streamich / nano-css-extract-demo

Demo of nano-css extract addon - extracts CSS into an external style sheet

extract Addon Demo

Extracts nano-css styles into an external style sheet.

How-to

Run these commands to execute demo.

npm install
node extract.js

Usage

Its a three step process.

Step 1: Add extract addon

Create file that will do the extraction, say extract.js, import your instance of nano-css and add extact addon.

const nano = require('./src/nano').nano;

require('nano-css/addon/extract').addon(nano);

Step 2: Generate CSS

Evaluate all modules from which you want to extract CSS. Your modules should not have side-effects for this step to work correctly.

require('./src/components/Button');
require('./src/components/Form');
// ...
// ...

Step 3: Save your CSS

All CSS that was possible to extract will now be available in nano.raw property. You can save it to a file on the next tick.

process.nextTick(() => {
  console.log('CSS', nano.raw);
  fs.writeFileSync('./my-styles.css', nano.raw);
});