Need help with sheetify?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

stackcss
443 Stars 48 Forks MIT License 229 Commits 18 Opened issues

Description

:sparkles: Modular CSS bundler for browserify

Services available

!
?

Need anything else?

Contributors list

No Data

sheetify

NPM version build status Test coverage Downloads js-standard-style

Modular CSS bundler for browserify. Works with npm modules like browserify does.

Features

  • 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

Example

Given some inline CSS: ```js const css = require('sheetify') const html = require('nanohtml')

const prefix = css

  :host > h1 {
    text-align: center;
  }

const tree = html

  

My beautiful, centered title

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: ```js const css = require('sheetify') const html = require('nanohtml')

const prefix = css` :host { background-color: blue; }

: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:
._60ed23ec9f {
  background-color: blue;
}

._60ed23ec9f > h1 { text-decoration: underline; }

My beautiful, centered title

Dynamic vs static

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.

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 <section class="${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.

const dynamicStyles = {
  width: global.window.innerWidth,
  height: global.window.innerHeight,
}

let dynamicStyleString = JSON.stringify(dynamicStyles) .replace(/,/g,';') .replace(/"/g,'') .replace(/{|}/g,'')

const tree = html <div style="${dynamicStyleString}"> <h1>My beautiful, window width</h1> </div>

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

  

My beautiful, centered title

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:

sh
$ browserify index.js \
  -t [ sheetify ] \
  -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.

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

  h1 {
    transform: translate(0, 0);
  }

const tree = html

  

My beautiful, centered title

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

$ npm install sheetify

See Also

  • 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

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.