rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.

Install

yarn add rollup-plugin-postcss --dev

Usage

You are viewing the docs for v2.0 which only support Rollup 1.0 or above.

// 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.

imports

For Sass/Scss Only.

Similar to how webpack's sass-loader works, you can prepend the path with ~ to tell this plugin to resolve in node_modules:

@import "~bootstrap/dist/css/bootstrap";

Options

extensions

Type: string[]
Default: ['.css', '.sss', '.pcss']

This plugin will process files ending with these extensions and the extensions supported by custom loaders.

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 string
Default: false

Extract CSS to the same location where JS file is generated but with .css extension.

You can also set it to an absolute path.

modules

Type: boolean object
Default: false

Enable CSS modules or set options for postcss-modules.

autoModules

Type: boolean
Default: true

Automatically enable CSS modules for .module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less files.

namedExports

Type: boolean function
Default: false

Use named exports alongside default export.

You can supply a function to control how exported named is generated:

namedExports(name) {
  // Maybe you simply want to convert dash to underscore
  return name.replace(/-/g, '_')
}

If you set it to true, the following will happen when importing specific classNames:

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.

config.path

Type: string

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

config.ctx

Type: object

ctx argument for PostCSS config file.

Note: Every keys you pass to config.ctx will be available under options inside the postcss config.

// rollup.config.js
postcss({
  config: {
    ctx: {
      foo: 'bar'
    }
  }
})

// postcss.config.js
module.exports = context => {
  console.log(context.options.foo) // 'bar'

  return {}
}

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
  /** Files to watch */
  dependencies: Set<string>
  /** Emit a waring */
  warn: PluginContext.warn
  /** https://rollupjs.org/guide/en#plugin-context */
  plugin: PluginContext
}

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.

newset / rollup-plugin-postcss Goto Github PK