rollup-plugin-postcss-modules
v2.1.1
Published
rollup-plugin-postcss wrapper with built-in CSS module and TypeScript support
Downloads
12,766
Readme
rollup-plugin-postcss-modules
Use the option modules: { ... } to pass options
to the postcss-modules plugin.
With rollup-plugin-postcss 2.0, the only continued advantage this one has is TypeScript support.
One new option exists:
writeDefinitions: truecreates.css.d.tsfiles next to every processed.cssfile.
Also the default namedExports option is slightly different:
.class-name { ... } .switch { ... }gets converted to something likeexport const className = 'class-name' export const $switch$ = 'switch' export default { 'class-name': 'class-name', className: 'class-name', 'switch': 'switch', $switch$: 'switch', }
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 { ... }