Modular CSS bundler
npm install sheetifyModular CSS bundler for browserify. Works with npm modules
like browserify does.
js
const css = require('sheetify')
const html = require('nanohtml')const prefix = css
const tree = html
document.body.appendChild(tree)
`Compile with browserify using
-t sheetify:
`sh
$ browserify -t sheetify index.js > bundle.js
`CSS classes are namespaced based on the content hash:
`css
._60ed23ec9f > h1 {
text-align: center;
}
`And the rendered HTML includes the namespace:
`html
My beautiful, centered title
`Styling host elements
The element that gets a prefix applied can be styled using the [:host
pseudoselector][1]:
`js
const css = require('sheetify')
const html = require('nanohtml')const prefix = css
:host > h1 {
text-decoration: underline;
}
const tree = html
My beautiful, centered title
document.body.appendChild(tree)
`
By using :host we are able to provide styles for the parent element:
`css
._60ed23ec9f {
background-color: blue;
}
._60ed23ec9f > h1 {
text-decoration: underline;
}
`
`html`
My beautiful, centered title
`js
const css = require('sheetify')
const html = require('nanohtml')
const sectionWidth = '100px';
const prefix = css
:host {
background-color: blue;
}
:host > h1 {
text-decoration: underline;
}
const tree = html
My beautiful, centered title
document.body.appendChild(tree)
`
Should you want to, you could even set dynamic variables in an object and do a rather complicated JSON.stringify with a replace on that object to turn it into a style for an element.
`js
const dynamicStyles = {
width: global.window.innerWidth,
height: global.window.innerHeight,
}
let dynamicStyleString = JSON.stringify(dynamicStyles)
.replace(/\,/g,';')
.replace(/\"/g,'')
.replace(/\{|\}/g,'')
const tree = html
`
External files
To include an external CSS file you can pass a path to sheetify as
sheetify('./my-file.css'):
`js
const css = require('sheetify')
const html = require('nanohtml')const prefix = css('./my-styles.css')
const tree = html
document.body.appendChild(tree)
`Use npm packages
To consume a package from npm that has .css file in its main or style
field:
`js
const css = require('sheetify')css('normalize.css')
`
Packages from npm will not be namespaced by default.Write to separate file on disk
To write the compiled CSS to a separate file, rather than keep it in the
bundle use [css-extract][2]:
`sh
$ browserify index.js \
-t [ sheetify ] \
-p [ css-extract -o bundle.css ] index.js \
-o bundle.js
`
[css-extract][2] can also write to a stream from the JS api, look at the
documentation to see how.Transforms
Sheetify uses transforms that take CSS and apply a transform.
For example include
sheetify-cssnext to support
autoprefixing, variables and more:
`js
const css = require('sheetify')
const html = require('nanohtml')const prefix = css
const tree = html
document.body.appendChild(tree)
`Compile with browserify using
-t [ sheetify -t sheetify-cssnext ]:
`sh
$ browserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js
`Transforms the CSS into:
`css
h1 {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
`API
Browserify transforms accept either flags from the command line using
subargs:
`sh
$ browserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js
`Or the equivalent options by passing in a configuration object in the
JavaScript API:
`js
const browserify = require('browserify')const b = browserify(path.join(__dirname, 'transform/source.js'))
b.transform('sheetify', { transform: [ 'sheetify-cssnext' ] })
b.bundle().pipe(process.stdout)
`The following options are available:
`txt
Options:
-t, --transform Consume a sheetify transform
`Installation
`sh
$ npm install sheetify
``[npm-image]: https://img.shields.io/npm/v/sheetify.svg?style=flat-square
[npm-url]: https://npmjs.org/package/sheetify
[travis-image]: https://img.shields.io/travis/stackcss/sheetify/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/stackcss/sheetify
[codecov-image]: https://img.shields.io/codecov/c/github/stackcss/sheetify/master.svg?style=flat-square
[codecov-url]: https://codecov.io/github/stackcss/sheetify
[downloads-image]: http://img.shields.io/npm/dm/sheetify.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/sheetify
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: https://github.com/feross/standard
[1]: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host
[2]: https://github.com/stackcss/css-extract