rollup-plugin-postcss-modules
rollup-plugin-postcss wrapper with built-in CSS module and TypeScript support
Last updated a year ago by flying-sheep .
GPL-3.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rollup-plugin-postcss-modules 
SYNC missed versions from official npm registry.

NPM Version Build Status

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 { ... }

Current Tags

  • 2.0.1                                ...           latest (a year ago)

13 Versions

  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 22
Last Day 0
Last Week 2
Last Month 16
Dependencies (5)

Copyright 2014 - 2016 © taobao.org |