rollup-plugin-postcss-modules

[![NPM Version]](https://www.npmjs.com/package/rollup-plugin-postcss-modules)
[![Build Status]](https://github.com/flying-sheep/rollup-plugin-postcss-modules/actions/workflows/ci.yml)

[NPM Version]: https://img.shields.io/npm/v/rollup-plugin-postcss-modules.svg?style=flat
[Build Status]: https://github.com/flying-sheep/rollup-plugin-postcss-modules/actions/workflows/ci.yml/badge.svg

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

``typescript
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:
`javascript
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
`html





`

src/index.tsx:
`typescript
import * as React from 'react'
import * as ReactDOM from 'react-dom'

import MyComponent from './components/my-component'

document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(, document.querySelector('#main'))
})
`

src/components/my-component.tsx:
`typescript
import * as React from 'react'

import style from './my-component.css'

export default class MyClass extends React.Component<{}, {}> {
render() {
return