1.0.11 • Published 7 years ago
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;