Modular CSS bundler for browserify. Works with npm modules like browserify does.
- clarity: namespace CSS, no more need for naming schemes
- modularity: import and reuse CSS packages from npm
- extensibility: transform CSS using existing plugins, or write your own
- transparency: inline CSS in your views
- simplicity: tiny API surface and a minimal code base
Given some inline CSS:
const css = require('sheetify')
const html = require('bel')
const prefix = css`
:host > h1 {
text-align: center;
}
`
const tree = html`
<section class=${prefix}>
<h1>My beautiful, centered title</h1>
</section>
`
document.body.appendChild(tree)
Compile with browserify using -t sheetify/transform
:
$ browserify -t sheetify/transform index.js > bundle.js
CSS classes are namespaced based on the content hash:
._60ed23ec9f h1 {
text-align: center;
}
And the rendered HTML includes the namespace:
<section class="_60ed23ec9f">
<h1>My beautiful, centered title</h1>
</section>
The element that gets a prefix applied can be styled using the :host
pseudoselector:
const css = require('sheetify')
const html = require('bel')
const prefix = css`
:host {
background-color: blue;
}
:host > h1 {
text-decoration: underline;
}
`
const tree = html`
<section class=${prefix}>
<h1>My beautiful, centered title</h1>
</section>
`
document.body.appendChild(tree)
By using :host
we are able to provide styles for the parent element:
._60ed23ec9f {
background-color: blue;
}
._60ed23ec9f > h1 {
text-decoration: underline;
}
<section class="_60ed23ec9f">
<h1>My beautiful, centered title</h1>
</style>
To include an external CSS file you can pass a path to sheetify as
sheetify('./my-file.css')
:
const css = require('sheetify')
const html = require('bel')
const prefix = css('./my-styles.css')
const tree = html`
<section class=${prefix}>
<h1>My beautiful, centered title</h1>
</section>
`
document.body.appendChild(tree)
To consume a package from npm that has .css
file in its main
or style
field:
const css = require('sheetify')
css('normalize.css')
Packages from npm will not be namespaced by default.
To write the compiled CSS to a separate file, rather than keep it in the bundle use css-extract:
$ browserify index.js \
-t [ sheetify/transform ] \
-p [ css-extract -o bundle.css ] index.js \
-o bundle.js
css-extract can also write to a stream from the JS api, look at the documentation to see how.
Sheetify uses plugins that take CSS and apply a transform. For example include sheetify-cssnext to support autoprefixing, variables and more:
const css = require('sheetify')
const html = require('bel')
const prefix = css`
h1 {
transform: translate(0, 0);
}
`
const tree = html`
<section class=${prefix}>
<h1>My beautiful, centered title</h1>
</section>
`
document.body.appendChild(tree)
Compile with browserify using -t [ sheetify/transform -u sheetify-cssnext ]
:
$ browserify -t [ sheetify/transform -u sheetify-cssnext ] index.js > bundle.js
Transforms the CSS into:
h1 {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
The following plugins are available:
- sheetify-cssnext - use tomorrow's CSS syntax today
Browserify transforms accept either flags from the command line using subargs:
$ browserify -t [ sheetify/transform -u sheetify-cssnext ] index.js > bundle.js
Or the equivalent options by passing in a configuration object in the JavaScript API:
const browserify = require('browserify')
const b = browserify(path.join(__dirname, 'transform/source.js'))
b.transform('sheetify/transform', { use: [ 'sheetify-cssnext' ] })
b.bundle().pipe(process.stdout)
The following options are available:
Options:
-u, --use Consume a sheetify plugin
Well, that might be because you're running babelify
before running
sheetify
. sheetify
looks for template strings in your code and then
transforms them as inline stylesheets. If these are caught and transformed to
ES5 strings by babelify
then sheetify
ends up sad. So try running
sheetify
before babelify
and you should be good, we hope.
$ npm install sheetify
- browserify - browser-side require() the node.js way
- glslify - module system for GLSL shaders
- hyperx - transform inline HTML to JS
- bankai - DIY server middleware for JS, CSS and HTML
- css-extract: extract CSS from a browserify bundle