Awesome

csjs-extractify

Browserify plugin to extract csjs into an external css bundle at build time

Usage

To use this plugin, create a seperate files for each CSJS module. For example:

main.csjs.js

const csjs = require('csjs');

module.exports = csjs`

.foo {
  color: red;
}

`;

When bundling your app, all exported CSJS will be extracted into a single, static CSS bundle.

Options

  --extension    [default: '.csjs.js']
  The file extension of your CSJS modules

  --output
  The path to write the output css bundle

CLI usage

browserify -p [ csjs-extractify -o dist/main.css ] index.js

API usage

Write to file:

const browserify = require('browserify');
const extractify = require('csjs-extractify');

const b = browserify('./main.js');
b.plugin(extractify, {output: './dist/scoped.css'});
b.bundle();

Or grab output stream:

const fs = require('fs');
const browserify = require('browserify');
const extractify = require('csjs-extractify');

const b = browserify('./main.js');
b.plugin(extractify);

const bundle = b.bundle();
bundle.on('extracted_csjs_stream', css => {
  css.pipe(fs.createWriteStream('scoped.css'));
});

Limitations

• Your CSJS files must export the result of a CSJS tagged template string
• Your CSJS files (and any dependencies) must be executable natively on your version of Node without any transpilation or browserify transforms

More sophisticated extraction is being worked on, but this should cover many use cases for now.