spo

sportsokken

Require css from your node modules and obfuscates class names in each stylesheet with a prefix to avoid collisions

Showing:

Popularity

Downloads/wk

3

GitHub Stars

0

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

5

Size (min+gzip)

66.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Sportsokken

Require css from your js files in your Browserify project and obfuscate class names in each stylesheet with a prefix to avoid collisions.

Install

npm install sportsokken

Setup (using Gulp)

Wrap your Browserify instance in sportsokken(). This function returns the Browserify instance so you can use all its methods after wrapping it.

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var hbsfy = require("hbsfy");
var sportsokken = require("sportsokken");

gulp.task("default", function() {

    return sportsokken(browserify("./src/main.js"))
        .transform(hbsfy)
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("./out/js"));

});

Basic example using Hbsfy (Handlebars transform)

my-module.css

.root {
    padding: 20px;
    background: red;
}

.head {
    font-size: 30px;
    font-weight: bold;
}

.body {
    line-height: 1.5;
}

my-module.hbs

<div class="{{css.root}}">
    <div class="{{css.head}}">
        My Module
    </div>
    <div class="{{css.body}}">
        This is my module
    </div>
</div>

MyModule.js

var css = require("./my-module.css");
var template = require("./my-module.hbs");

template({
    css: css
});

Note than you can create a new stylesheet for another module and use the same css class names (.root, .head etc) without worrying about collisions.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100