- Notifications
You must be signed in to change notification settings - Fork47
✨ Modular CSS bundler for browserify
License
stackcss/sheetify
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Modular CSS bundler for browserify. Works withnpm moduleslikebrowserify does.
- clarity: namespace CSS, no more need for naming schemes
- modularity: import and reuse CSS packages from npm
- extensibility: transform CSS using existing transforms, or write your own
- transparency: inline CSS in your views
- simplicity: tiny API surface and a minimal code base
Given some inline CSS:
constcss=require('sheetify')consthtml=require('nanohtml')constprefix=css` :host> h1 { text-align: center; }`consttree=html`<sectionclass=${prefix}><h1>My beautiful, centered title</h1></section>`document.body.appendChild(tree)
Compile with browserify using-t sheetify:
$ browserify -t sheetify index.js> bundle.jsCSS classes are namespaced based on the content hash:
._60ed23ec9f>h1 {text-align: center;}
And the rendered HTML includes the namespace:
<sectionclass="_60ed23ec9f"><h1>My beautiful, centered title</h1></section>
The element that gets a prefix applied can be styled using the:hostpseudoselector:
constcss=require('sheetify')consthtml=require('nanohtml')constprefix=css` :host { background-color: blue; } :host> h1 { text-decoration: underline; }`consttree=html`<sectionclass=${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;}
<sectionclass="_60ed23ec9f"><h1>My beautiful, centered title</h1></style>
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.
constcss=require('sheetify')consthtml=require('nanohtml')constsectionWidth='100px';constprefix=css` :host { background-color: blue; } :host> h1 { text-decoration: underline; }`consttree=html`<sectionclass=${prefix}style="width:${sectionWidth}"><h1>My beautiful, centered title</h1></section>`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.
constdynamicStyles={width:global.window.innerWidth,height:global.window.innerHeight,}letdynamicStyleString=JSON.stringify(dynamicStyles).replace(/\,/g,';').replace(/\"/g,'').replace(/\{|\}/g,'')consttree=html`<divstyle="${dynamicStyleString}"><h1>My beautiful, window width</h1></div>`
To include an external CSS file you can pass a path to sheetify assheetify('./my-file.css'):
constcss=require('sheetify')consthtml=require('nanohtml')constprefix=css('./my-styles.css')consttree=html`<sectionclass=${prefix}><h1>My beautiful, centered title</h1></section>`document.body.appendChild(tree)
To consume a package from npm that has.css file in itsmain orstylefield:
constcss=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 thebundle usecss-extract:
$ browserify index.js \ -t [ sheetify ] \ -p [ css-extract-o bundle.css ] index.js \ -o bundle.jscss-extract can also write to a stream from the JS api, look at thedocumentation to see how.
Sheetify usestransforms that take CSS and apply a transform.For example includesheetify-cssnext to supportautoprefixing, variables and more:
constcss=require('sheetify')consthtml=require('nanohtml')constprefix=css` h1 { transform: translate(0, 0); }`consttree=html`<sectionclass=${prefix}><h1>My beautiful, centered title</h1></section>`document.body.appendChild(tree)
Compile with browserify using-t [ sheetify -t sheetify-cssnext ]:
$ browserify -t [ sheetify-t sheetify-cssnext ] index.js> bundle.js
Transforms the CSS into:
h1 {-webkit-transform:translate(0,0);transform:translate(0,0);}
Browserify transforms accept either flags from the command line usingsubargs:
$ browserify -t [ sheetify-t sheetify-cssnext ] index.js> bundle.js
Or the equivalent options by passing in a configuration object in theJavaScript API:
constbrowserify=require('browserify')constb=browserify(path.join(__dirname,'transform/source.js'))b.transform('sheetify',{transform:['sheetify-cssnext']})b.bundle().pipe(process.stdout)
The following options are available:
Options: -t, --transform Consume a sheetify transform
$ npm install sheetify
- browserify - browser-siderequire() the node.js way
- glslify - module system for GLSLshaders
- hyperx - transform inline HTML to JS
- bankai - DIY server middleware forJS, CSS and HTML
- css-extract: extract CSS from a browserify bundle
About
✨ Modular CSS bundler for browserify
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.