A Rollup plugin that converts CSS and CSS extension languages into CSS modules and imports the generated CSS files. This plugin gives you the ability to build a library that imports its styles (under the assumption the library will be bundled with a bundler like webpack or rollup).
Today there are 2 main ways to bundle and import styles from a library
- Having a single CSS file for all styles in the library
- Using CSS-in-JS (styled-components, emotion, ...)
These two ways have some disadvantages, when we are having a single CSS file, we are importing styles that probably will not be necessary, and when we are using CSS-in-JS we are increasing the HTML size
This plugin brings you the ability to consume only the used styles from the library
yarn add rollup-plugin-lib-style --dev
npm i rollup-plugin-lib-style --save-dev
// rollup.config.js
import {libStylePlugin} from "rollup-plugin-lib-style"
export default {
plugins: [libStylePlugin()],
}
After adding this plugin we will be able to use CSS, SCSS, and SASS files (and more languages by adding plugins) The imported CSS file will be transformed into a CSS module and a new CSS file will be generated
In the js file that imports style file, the import will be changed in the following way:
import style from "./style.css"
import style from "./style.css.js"
The newly generated file will export the CSS module, but also will import the new CSS file.
// style.css.js"
import "./myComponent/style.css"
var style = {test: "test_cPySKa"}
export {style as default}
This gives us the ability to consume only the used style
Type: boolean
Default: true
Description: auto import the generated CSS
Type: string
Default: ""
Description: prefix for the classnames
Type: string
Default: "[local]_[hash:base64:6]"
Description: customize the scoped name of the classname
Type: object[]
Default: []
Description: PostCSS Plugins
Type: Loader[]
Default: []
Description: loaders for CSS extension languages like Less, Stylus, ...
Example:
// rollup.config.js
const lessLoader = {
name: "lessLoader"
regex: /\.less$/
process: ({code, filePath}) => less(code)
}
export default {
plugins: [libStylePlugin({loaders: [lessLoader]})],
}
Type: Array<string | RegExp> | string | RegExp
Default: null
Description: exclude files from load by the loader
In some cases, we will want to create global class names (without hash) we can do so by adding ".global" to the style file name. In this case, the scopedName will be "[local]" Example: myStyle.global.css, mySecondStyle.global.scss
// myStyle.global.css
.myStyle {
background-color: red;
}
// myStyle.global.css.js
import "./myComponent/style.css"
var style = {myStyle: "myStyle"}
export {style as default}
"Unresolved dependencies" warnings
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@@_MAGIC_PATH_@@/src/components/Component/style.css (imported by "src/components/Component/style.scss")
These warnings can be suppressed by using the "onwarn" function
// rollup.config.js
import {libStylePlugin, onwarn} from "rollup-plugin-lib-style"
export default {
onwarn,
plugins: [libStylePlugin()],
}
MIT © Daniel Amenou