https://github.com/flying-sheep/rollup-plugin-postcss-modules

rollup-plugin-postcss wrapper with built-in TypeScript support
https://github.com/flying-sheep/rollup-plugin-postcss-modules

Last synced: 7 days ago
JSON representation

rollup-plugin-postcss wrapper with built-in TypeScript support

• Host: GitHub
• URL: https://github.com/flying-sheep/rollup-plugin-postcss-modules
• Owner: flying-sheep
• Created: 2017-04-28T13:11:09.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2024-12-10T08:17:57.000Z (16 days ago)
• Last Synced: 2024-12-10T09:23:34.743Z (16 days ago)
• Language: TypeScript
• Homepage:
• Size: 4.42 MB
• Stars: 18
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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

```

`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 


  }

}

```


`src/components/my-component.css`:

```css

.my-class { ... }

```