# rollup-plugin-postcss-modules2

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

Latest version **1.1.0** (published 2018-06-27) · GPL-3.0 license · 0 weekly downloads

## Install

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

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-06-27 |
| First published | 2018-06-27 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | thcatshidog |
| Maintainers | thecatshidog |
| Keywords | rollup |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-postcss-modules2
- Repository: https://github.com/thecatshidog/rollup-plugin-postcss-modules
- Homepage: https://github.com/thecatshidog/rollup-plugin-postcss-modules#readme
- Issues: https://github.com/thecatshidog/rollup-plugin-postcss-modules/issues
- npm.io page: https://npm.io/package/rollup-plugin-postcss-modules2

## Dependencies (5)

- [mz](https://npm.io/package/mz.md) ^2.6.0
- [camelcase](https://npm.io/package/camelcase.md) ^4.1.0
- [source-map](https://npm.io/package/source-map.md) ^0.7.3
- [postcss-modules](https://npm.io/package/postcss-modules.md) ^0.8.0
- [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^0.5.5

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-06-27
- 1.0.2 — 2018-06-27
- 1.0.1 — 2018-06-27
- 1.0.0 — 2018-06-27

## README

[![Build Status]](https://travis-ci.org/flying-sheep/rollup-plugin-postcss-modules)

[Build Status]: https://travis-ci.org/flying-sheep/rollup-plugin-postcss-modules.svg?branch=master

rollup-plugin-postcss-modules
=============================

Using `rollup-plugin-postcss` with [`postcss-modules`](https://github.com/css-modules/postcss-modules) is relatively easy, but requires hard to remember boilerplate and there’s only one way to combine them.

Since the boilerplate clutters your `rollup.config.js`, this plugin wraps the above packages in the one way it makes sense.

Just add some regular PostCSS plugins and be on your way.

Two new options exist:

* `writeDefinitions: true` creates `.css.d.ts` files next to every processed `.css` file.
* `modules: { ... }` can be used to pass [options](https://github.com/css-modules/postcss-modules#usage) to the intrinsic `postcss-modules` plugin.

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-modules2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._