postcssify2 v1.0.11

browserify postcss plugin

Simple postcss plugin, which runs postcss.process() for each require('./file.css'). the generated css is collected and available as a stream via bundle.on('css stream', (stream) => {}).

This plugin must be installed before watchify.

API usage

const browserify = require('browserify');
const postcssify = require('postcssify2');
const rawBody = require('raw-body');

var bundle = browserify();

bundle.on('css stream', function (stream) {
  // consume stream... here's the collected css
  rawBody(stream, (err, buffer) => {
    var css = buffer.toString('utf8');
  });
});

bundle.plugin(postcssify, {
  /*
   * plugins, in order
   */
  plugins: [
    require('postcss-nested'),
    require('postcss-icss-selectors')({ mode: 'local' }),
  ],
  
  after: [
    require('postcss-discard-duplicates'),
  ],
  
  /*
   * Transform the postcss.process() result for each require(file.css)
   * which is exported via module.exports
   */
  transformResult: function (file, result) {
    return result.messages
      .reduce((memo, m) => {
        switch(m.plugin) {
          case 'postcss-icss-selectors':
          case 'postcss-simple-vars':
            memo[m.name] = m.value;
            break;
        }
        
        return memo;
      }, {}),
  },
});

bundle.add('index.js'));

Browserify usage

example.css

:local .dialog {
  background-color: red;
}

index.js

const style = require('./example.css');

var html = `
  <div class="${style.dialog}">
    lorem ipsum
  </div>`;
  
document.body.innerHTML = html;