# rollup-plugin-postcss-modules

> rollup-plugin-postcss wrapper with built-in CSS module and TypeScript support

Latest version **2.1.1** (published 2023-01-06) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-postcss-modules
pnpm add rollup-plugin-postcss-modules
yarn add rollup-plugin-postcss-modules
bun add rollup-plugin-postcss-modules
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2023-01-06 |
| First published | 2017-04-30 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Philipp A. |
| Maintainers | flying-sheep |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-postcss-modules
- Repository: https://github.com/flying-sheep/rollup-plugin-postcss-modules
- npm.io page: https://npm.io/package/rollup-plugin-postcss-modules

## Dependencies (4)

- [camelcase](https://npm.io/package/camelcase.md) ^6.0.0 || ^7.0.0
- [reserved-words](https://npm.io/package/reserved-words.md) ^0.1.2
- [postcss-modules](https://npm.io/package/postcss-modules.md) ^6.0.0
- [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.2

## Recent versions

- 2.1.1 (latest) — 2023-01-06
- 2.1.0 — 2022-11-11
- 2.0.2 — 2020-08-14
- 2.0.1 — 2019-02-20
- 2.0.0 — 2019-02-15
- 1.0.10 — 2018-10-24
- 1.0.9 — 2018-10-01
- 1.0.8 — 2017-08-30
- 1.0.7 — 2017-08-30
- 1.0.6 — 2017-08-30
- 1.0.5 — 2017-08-30
- 1.0.4 — 2017-08-30
- 1.0.3 — 2017-04-30
- 1.0.2 — 2017-04-30
- 1.0.1 — 2017-04-30
- … 1 more at https://npm.io/package/rollup-plugin-postcss-modules/versions

## README

[![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](https://github.com/css-modules/postcss-modules#usage)
to the [`postcss-modules`](https://github.com/css-modules/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](https://github.com/flying-sheep/rollup-plugin-postcss-modules-example) 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
<!doctype html>
<script src=dist/bundle.js></script>
<link rel=stylesheet href=dist/bundle.css>

<main id=main></main>
```

`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(<MyComponent/>, 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 <div className={style.myClass} />
    }
}
```

`src/components/my-component.css`:
```css
.my-class { ... }
```

---
_Source: https://npm.io/package/rollup-plugin-postcss-modules · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._