Awesome
postcss-brunch
Adds PostCSS support to brunch
Install
npm install --save-dev postcss-brunch
Add plugins
Add all plugins you want to use with PostCSS in your package.json
file too. For example, here we add Autoprefixer and CSS Wring.
{
"postcss-brunch": "^2.0",
"autoprefixer": "^6.3",
"csswring": "^5.1"
}
Or, use npm install --save-dev <plugin>
to get latest version in package.json.
Then, configure postcss-brunch
in the plugins
section of your brunch-config
file, like so:
plugins: {
postcss: {
processors: [
require('autoprefixer')(['last 8 versions']),
require('csswring')()
]
}
}
You can add as many processors as you want. CSS will be parsed only once. See PostCSS and each plugins docs.
Options
You can specify PostCSS options, such as custom parser for CSS:
plugins: {
postcss: {
options: {
parser: require('postcss-scss'),
},
},
},
CSS Modules
You can use CSS Modules with postcss-brunch. To enable it, change your config to:
module.exports = {
// ...
plugins: {
postcss: {
modules: true
}
}
};
You can also pass options directly to postcss-modules:
module.exports = {
// ...
plugins: {
postcss: {
modules: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
};
Then, author your styles like you normally would:
.title {
font-size: 32px;
}
And reference CSS class names by requiring the specific style into your javascript:
var style = require('./title.css');
<h1 className={style.title}>Yo</h1>
Note: enabling modules
does so for every stylesheet in your project, so it's all-or-nothing. Even the files you don't require will be transformed into CSS modules (aka will have obfuscated class names, like turn .title
into ._title_fdphn_1
).
Dependencies
You can pass options for progeny which retrieves dependencies for the input CSS file.
For example, if you use postcss-partial-import plugin, your CSS files
prefixed with underscore and have .css
extension. In this case, you need pass to progeny prefix
option, so brunch can
properly rebuild your partials on their change.
module.exports = {
// ...
plugins: {
postcss: {
progeny: {
prefix: '_'
}
}
}
}
License
MIT