scopedify

Scoped modular CSS bundler for browserify. (folked from sheetify)

Works with npm modules like browserify does.

Example

Given some inline CSS:

const css = require('scopedify')
const html = require('bel')
 
const scope = css`
  .base h1 {
    text-align: center;
  }
`
 
const tree = scope(html`
  <section class='base'>
    <h1>My beautiful, centered title</h1>
  </section>
`)
 
document.body.appendChild(tree)

Compile with browserify using -t scopedify/transform:

$ browserify -t scopedify/transform index.js > bundle.js

CSS selectors are namespaced based on the content hash:

.base[_scope_a68eaa6a] h1[_scope_a68eaa6a] {
  text-align: center;
}

And the rendered HTML includes the namespace:

<section class="base" _scope_a68eaa6a>
  <h1 _scope_a68eaa6a>My beautiful, centered title</h1>
</section>

Nested namespaces

CSS cascading will not be occured outer the scope. Components will no longer be polluted with ancestors' styles.

Note: CSS inheritance (color, text-align, ...) will be occured normally. Use initial to reset inherited properties.

const css = require('scopedify')
const html = require('bel')
 
const componentScope = css`
  .base h1 {
    background-color: #aaf;
  }
`
 
const component = componentScope(html`
  <p class="base">
    <h1>Blue background, no border</h1>
  </p>
`)
 
const treeScope = css`
  .base h1 {
    border: solid 4px #faa;
  }
`
 
const tree = treeScope(html`
  <section class='base'>
    <h1>Red Bordered</h1>
    ${component}
  </section>
`)
 
document.body.appendChild(tree)

Rendered html:

<section class="base" _scope_b29bc9f1>
  <h1 _scope_b29bc9f1>Red Bordered</h1>
  <p class="base" _scope_43e26b4d>
    <h1 _scope_43e26b4d>Blue background, no border</h1>
  </p>
</section>

Multiple namespaces

If the given html is already scoped, the new scope will be added to nodes which has same scope as root in given html.

const css = require('scopedify')
const html = require('bel')
 
const componentScope = css`
  .base h1 {
    background-color: #aaf;
  }
`
 
const component = componentScope(html`
  <p class="base">
    <h1>Blue background, no border</h1>
  </p>
`)
 
const Scope1 = css`
  .base h1 {
    border: solid 4px #faa;
  }
`
 
const Scope2 = css`
  .base h1 {
    transform: scale(0.5);
  }
`
 
const tree = Scope2(Scope1(html`
  <section class='base'>
    <h1>Red Bordered</h1>
    ${component}
  </section>
`))
 
document.body.appendChild(tree)

Rendered html:

<section class="base" _scope_b29bc9f1 _scope_136a89ad>
  <h1 _scope_b29bc9f1 _scope_136a89ad>Red Bordered</h1>
  <p class="base" _scope_43e26b4d>
    <h1 _scope_43e26b4d>Blue background, no border</h1>
  </p>
</section>

External files

To include an external CSS file you can pass a path to scopedify as scopedify('./my-file.css'):

const css = require('scopedify')
const html = require('bel')
 
const scope = css('./my-styles.css')
 
const tree = scope(html`
  <section class=${prefix}>
    <h1>My beautiful, centered title</h1>
  </section>
`)
 
document.body.appendChild(tree)

Disable namespaces

To disable namespaces for throughout a file:

css('./my-styles.css', { noscope: false })

Selectors are not namespaced under :root pseudo selector:

:root a {
  color: red;
}

Use npm packages

To consume a package from npm that has .css file in its main or style field:

const css = require('scopedify')
 
css('normalize.css')

Packages from npm will not be namespaced by default.

Write to separate file on disk

See sheetify#write-to-separate-file-on-disk

Plugins

See sheetify#plugins

It is compatible with sheetify plugins.

API

See sheetify#api

FAQ

See sheetify#faq

Installation

$ npm install scopedify

License

MIT