rollup-plugin-postcss
Seamless integration between Rollup and PostCSS.
Features
- CSS modules support
- Extract CSS file
- Custom pre-processor support (like Stylus and Sass)
Installation
yarn add rollup-plugin-postcss --dev
Examples
Basic
config
import postcss from 'rollup-plugin-postcss';
export default {
entry: 'main.js',
plugins: [
postcss({
plugins: [
// cssnext(),
// yourPostcssPlugin()
],
//sourceMap: false, // default value
//extract: false, // default value
extensions: ['.css', '.sss'] // default value
// parser: sugarss
})
]
}
entry
import '/path/to/some_random_file.css';
Use with CSS modules
The postcss-modules plugin allows you to use CSS modules in PostCSS, it requires some additional setup to use in Rollup:
import postcss from 'rollup-plugin-postcss';
import postcssModules from 'postcss-modules';
const cssExportMap = {};
export default {
plugins: [
postcss({
plugins: [
postcssModules({
getJSON (id, exportTokens) {
cssExportMap[id] = exportTokens;
}
})
],
getExport (id) {
return cssExportMap[id];
}
})
]
}
That's it, you can now use CSS modules and import CSS like this:
import style from './style.css';
console.log(style.className); // .className_echwj_1
You also can import only a specific CSS className like this:
import {className} from './style.css';
console.log(className); // .className_echwj_2
Also, note that all your dashed class names will be transformed to camlCased one when it be individually imported, but the original will not be removed from the locals. For example:
.class-name {}
import style, { className } from './style.css';
console.log(style['class-name'] === className) // true
Extract CSS
import postcss from 'rollup-plugin-postcss';
export default {
plugins: [
postcss({
sourceMap: true, // true, "inline" or false
extract : '/path/to/style.css'
})
]
}
When extract
is set to true
the plugin will automatically generate a css file in the same place where the js is created by rollup. The css file will have the same name as the js file.
Minimize
Simply use the cssnano plugin:
import postcss from 'rollup-plugin-postcss';
import cssnano from 'cssnano';
export default {
plugins: [
postcss({
plugins: [cssnano()]
})
]
}
Custom pre-processor
For example, you want to run stylus
or sass
before postcss
:
import postcss from 'rollup-plugin-postcss';
import stylus from 'stylus';
const preprocessor = (content, id) => new Promise((resolve, reject) => {
const renderer = stylus(content, {
filename: id,
sourcemap: {inline: true}
});
renderer.render((err, code) => {
if (err) {
return reject(err);
}
resolve({code, map: renderer.sourcemap});
});
});
export default {
plugins: [
postcss({
preprocessor,
extensions: ['.styl']
})
]
}
Then you can import './your-stylus.styl'
!
License
MIT © EGOIST