JarCasting
JarCasting JarCasting

rollup-plugin-postcss-modules

WebJar for rollup-plugin-postcss-modules

License

License
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

rollup-plugin-postcss-modules
Last Version

Last Version

1.0.8
Release Date

Release Date
Type

Type

jar
Description

Description

rollup-plugin-postcss-modules
WebJar for rollup-plugin-postcss-modules
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

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

Download rollup-plugin-postcss-modules

Filename Size
rollup-plugin-postcss-modules-1.0.8.pom
rollup-plugin-postcss-modules-1.0.8.jar 7 KB
rollup-plugin-postcss-modules-1.0.8-sources.jar 22 bytes
rollup-plugin-postcss-modules-1.0.8-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/rollup-plugin-postcss-modules/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>rollup-plugin-postcss-modules</artifactId>
    <version>1.0.8</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/rollup-plugin-postcss-modules/
implementation 'org.webjars.npm:rollup-plugin-postcss-modules:1.0.8'
// https://jarcasting.com/artifacts/org.webjars.npm/rollup-plugin-postcss-modules/
implementation ("org.webjars.npm:rollup-plugin-postcss-modules:1.0.8")
'org.webjars.npm:rollup-plugin-postcss-modules:jar:1.0.8'
<dependency org="org.webjars.npm" name="rollup-plugin-postcss-modules" rev="1.0.8">
  <artifact name="rollup-plugin-postcss-modules" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='rollup-plugin-postcss-modules', version='1.0.8')
)
libraryDependencies += "org.webjars.npm" % "rollup-plugin-postcss-modules" % "1.0.8"
[org.webjars.npm/rollup-plugin-postcss-modules "1.0.8"]

Dependencies

compile (4)

Group / Artifact Type Version
org.webjars.npm : camelcase jar [4.1.0,5)
org.webjars.npm : mz jar [2.6.0,3)
org.webjars.npm : postcss-modules jar [0.8.0,0.9)
org.webjars.npm : rollup-plugin-postcss jar [0.5.4,0.6)

Project Modules

There are no modules declared in this project.

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

Versions

Version
1.0.8