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

src/components/my-component.css:

.my-class { ... }

Package detail

rollup-plugin-postcss-modules

readme

rollup-plugin-postcss-modules

Example