Name: sheetify
Owner: stackcss
Description: :sparkles: Modular CSS bundler for browserify
Created: 2014-02-11 01:02:24.0
Updated: 2018-01-17 02:50:49.0
Pushed: 2018-01-18 11:41:24.0
Size: 207
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Modular CSS bundler for browserify. Works with npm modules like browserify does.
Given some inline CSS:
t css = require('sheetify')
t html = require('bel')
t prefix = css`
ost > h1 {
text-align: center;
t tree = html`
ection class=${prefix}>
<h1>My beautiful, centered title</h1>
section>
ment.body.appendChild(tree)
Compile with browserify using -t sheetify:
owserify -t sheetify index.js > bundle.js
CSS classes are namespaced based on the content hash:
ed23ec9f h1 {
xt-align: center;
And the rendered HTML includes the namespace:
tion class="_60ed23ec9f">
1>My beautiful, centered title</h1>
ction>
The element that gets a prefix applied can be styled using the :host pseudoselector:
t css = require('sheetify')
t html = require('bel')
t prefix = css`
ost {
background-color: blue;
ost > h1 {
text-decoration: underline;
t tree = html`
ection class=${prefix}>
<h1>My beautiful, centered title</h1>
section>
ment.body.appendChild(tree)
By using :host we are able to provide styles for the parent element:
ed23ec9f {
ckground-color: blue;
ed23ec9f > h1 {
xt-decoration: underline;
tml
tion class="_60ed23ec9f">
1>My beautiful, centered title</h1>
yle>
Sheetify is very good for namespacing static css assets in your javaScript code. Currently there is no support for dynamic variables within sheetify, however you could achieve this by setting the inline style property of an element.
t css = require('sheetify')
t html = require('bel')
t sectionWidth = '100px';
t prefix = css`
ost {
background-color: blue;
ost > h1 {
text-decoration: underline;
t tree = html`
ection class=${prefix} style="width:${sectionWidth}">
<h1>My beautiful, centered title</h1>
section>
ment.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.
t dynamicStyles = {
dth: global.window.innerWidth,
ight: global.window.innerHeight,
dynamicStyleString = JSON.stringify(dynamicStyles)
.replace(/\,/g,';')
.replace(/\"/g,'')
.replace(/\{|\}/g,'')
t tree = html`
iv style="${dynamicStyleString}">
<h1>My beautiful, window width</h1>
div>
To include an external CSS file you can pass a path to sheetify as
sheetify('./my-file.css'):
t css = require('sheetify')
t html = require('bel')
t prefix = css('./my-styles.css')
t tree = html`
ection class=${prefix}>
<h1>My beautiful, centered title</h1>
section>
ment.body.appendChild(tree)
To consume a package from npm that has .css file in its main or style
field:
t css = require('sheetify')
'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:
owserify index.js \
[ sheetify ] \
[ css-extract -o bundle.css ] index.js \
bundle.js
css-extract can also write to a stream from the JS api, look at the documentation to see how.
Sheetify uses transforms that take CSS and apply a transform. For example include sheetify-cssnext to support autoprefixing, variables and more:
t css = require('sheetify')
t html = require('bel')
t prefix = css`
{
transform: translate(0, 0);
t tree = html`
ection class=${prefix}>
<h1>My beautiful, centered title</h1>
section>
ment.body.appendChild(tree)
Compile with browserify using -t [ sheetify -t sheetify-cssnext ]:
owserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js
Transforms the CSS into:
ebkit-transform: translate(0, 0);
transform: translate(0, 0);
Browserify transforms accept either flags from the command line using subargs:
owserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js
Or the equivalent options by passing in a configuration object in the JavaScript API:
t browserify = require('browserify')
t b = browserify(path.join(__dirname, 'transform/source.js'))
ansform('sheetify', { transform: [ 'sheetify-cssnext' ] })
ndle().pipe(process.stdout)
The following options are available:
ons:
, --transform Consume a sheetify transform
m install sheetify