Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    sheetifypublic

    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:

    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:

    $ browserify -t sheetify 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>

    Styling host elements

    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>

    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('bel')
     
    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'):

    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)

    Use npm packages

    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.

    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:

    $ 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:

    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 -t sheetify-cssnext ]:

    $ browserify -t [ sheetify -t sheetify-cssnext ] index.js > bundle.js

    Transforms the CSS into:

    h1 {
      -webkit-transform: translate(00);
              transform: translate(00);
    }

    API

    Browserify transforms accept either flags from the command line using subargs:

    $ browserify -t [ sheetify -t 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: [ 'sheetify-cssnext' ] })
    b.bundle().pipe(process.stdout)

    The following options are available:

    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

    install

    npm i sheetify

    Downloadsweekly downloads

    637

    version

    7.3.2

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar