rollup-plugin-postcss-modules2
v1.1.0
Published
rollup-plugin-postcss wrapper with built-in CSS module and TypeScript support
Downloads
4
Readme
rollup-plugin-postcss-modules
Using rollup-plugin-postcss with postcss-modules is relatively easy, but requires hard to remember boilerplate and there’s only one way to combine them.
Since the boilerplate clutters your rollup.config.js, this plugin wraps the above packages in the one way it makes sense.
Just add some regular PostCSS plugins and be on your way.
Two new options exist:
writeDefinitions: truecreates.css.d.tsfiles next to every processed.cssfile.modules: { ... }can be used to pass options to the intrinsicpostcss-modulesplugin.
Example
see here for a clonable repo.
rollup.config.js:
import postcss from 'rollup-plugin-postcss-modules'
import typescript from 'rollup-plugin-typescript2'
import autoprefixer from 'autoprefixer'
export default {
entry: 'src/index.tsx',
dest: 'dist/bundle.js',
format: 'iife',
plugins: [
postcss({
extract: true, // extracts to `${basename(dest)}.css`
plugins: [autoprefixer()],
writeDefinitions: true,
// modules: { ... }
}),
typescript(),
],
}index.html
<!doctype html>
<script src=dist/bundle.js></script>
<link rel=stylesheet href=dist/bundle.css>
<main id=main></main>src/index.tsx:
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MyComponent from './components/my-component'
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<MyComponent/>, document.querySelector('#main'))
})src/components/my-component.tsx:
import * as React from 'react'
import style from './my-component.css'
export default class MyClass extends React.Component<{}, {}> {
render() {
return <div className={style.myClass} />
}
}src/components/my-component.css:
.my-class { ... }