rollup-plugin-postcss-modules's Introduction

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: true creates .css.d.ts files next to every processed .css file.

Also the default namedExports option is slightly different:

.class-name { ... } .switch { ... } gets converted to something like

export 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} />
    }
}