Seamless integration between Rollup and PostCSS.
- CSS modules support
- Extract CSS file
- Custom pre-processor support (like Stylus and Sass)
yarn add rollup-plugin-postcss --devconfig
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';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;
}
})
],
getExportNamed: false, //Default false, when set to true it will also named export alongside default export your class names
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_1You also can import only a specific CSS className like this:
import {className} from './style.css';
console.log(className); // .className_echwj_2Important, when importing specific classNames (getExportNamed), the following will happen :
- dashed class names will be transformed by replacing all the dashes to
$sign wrapped underlines, eg.--=>$__$ - js protected names used as your style class names, will be transformed by wrapping the names between
$signs, eg.switch=>$switch$
All transformed names will be logged in your terminal like:
use `foo$__$bar` to import `foo--bar` className
use `$switch$` to import `switch` className
The original will not be removed from the locals. For example:
.class-name {}
.class--name {}
.switch {}import style, { class$_$name, class$__$name, $switch$ } from './style.css';
console.log(style['class-name'] === class$_$name) // true
console.log(style['class--name'] === class$__$name) // true
console.log(style['switch'] === $switch$) // trueimport 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.
Simply use the cssnano plugin:
import postcss from 'rollup-plugin-postcss';
import cssnano from 'cssnano';
export default {
plugins: [
postcss({
plugins: [cssnano()]
})
]
}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'!
MIT © EGOIST