Package Exports

rollup-plugin-postcss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rollup-plugin-postcss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.

Install

yarn add rollup-plugin-postcss --dev

Usage

You are viewing the docs for v1.0, for v0.5 please see here.

// rollup.config.js
import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      plugins: []
    })
  ]
}

Then you can use CSS files:

import './style.css'

Note that the generated CSS will be injected to <head> by default, and the CSS string is also available as default export unless extract: true:

// Inject to `<head>` and also available as `style`
import style from './style.css'

It will also automatically use local PostCSS config files.

Extract CSS

postcss({
  extract: true
})

CSS modules

postcss({
  modules: true,
  // Or with custom options for `postcss-modules`
  modules: {}
})

With Sass/Stylus/Less

Install corresponding dependency:

For Sass install node-sass: yarn add node-sass --dev
For Stylus Install stylus: yarn add stylus --dev
For Less Install less: yarn add less --dev

That's it, you can now import .styl .scss .sass .less files in your library.

Options

plugins

Type: Array

PostCSS Plugins.

inject

Type: boolean object
Default: true

Inject CSS into <head>, it's always false when extract: true.

You can also use it as options for style-inject.

extract

Type: boolean
Default: false

Extract CSS into its own file.

modules

Type: boolean object
Default: false

Enable CSS modules or set options for postcss-modules.

namedExports

Type: boolean
Default: false

Use named exports alongside default export.

When importing specific classNames, the following will happen:

dashed class names will be transformed by replacing all the dashes to $ sign wrapped underlines, eg. -- => $__$
js protected names used as your style class names, will be transformed by wrapping the names between $ signs, eg. switch => $switch$

All transformed names will be logged in your terminal like:

Exported "new" as "$new$" in test/fixtures/named-exports/style.css

The original will not be removed, it's still available on default export:

import style, { class$_$name, class$__$name, $switch$ } from './style.css';
console.log(style['class-name'] === class$_$name) // true
console.log(style['class--name'] === class$__$name) // true
console.log(style['switch'] === $switch$) // true

minimize

Type: boolean object
Default: false

Minimize CSS, boolean or options for cssnano.

sourceMap

Type: boolean "inline"

Enable sourceMap.

parser

Type: string function

PostCSS parser, like sugarss.

stringifier

Type: string function

PostCSS Stringifier.

syntax

Type: string function

PostCSS Syntax.

exec

Type: boolean

Enable PostCSS Parser support in CSS-in-JS.

config

Type: boolean object
Default: true

Load PostCSS config file.

path

Type: string

The path to config file, so that we can skip searching.

ctx

Type: object

ctx argument for PostCSS config file.

use

Type: name[] [name, options][]
Default: ['sass', 'stylus', 'less']

Use a loader, currently built-in loaders are:

sass (Support .scss and .sass)
stylus (Support .styl and .stylus)
less (Support .less)

They are executed from right to left.

loaders

Type: Loader[]

An array of custom loaders, check out our sass-loader as example.

interface Loader {
  name: string,
  test: RegExp,
  process: (this: Context, input: Payload) => Promise<Payload> | Payload
}

interface Context {
  /** Loader options */
  options: any
  /** Sourcemap */
  sourceMap: any
  /** Resource path */
  id: string
}

interface Payload {
  /** File content */
  code: string
  /** Sourcemap */
  map?: string | SourceMap
}

onImport

Type: id => void

A function to be invoked when an import for CSS file is detected.

onExtract

Type: ({ code, map, codeFilePath, mapFilePath }) => any

A function to be invoked before extracting CSS file, you can make it return false to disable writing CSS and map file.