rollup-plugin-postcss

   

title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo.svg">

Seamless integration between Rollup and PostCSS.

Install

``bash
yarn add postcss rollup-plugin-postcss --dev
`

Usage

v2.0 support rollup v1 or above, but it prints deprecated warning from rollup v2.

Breaking change: v3.0 only support rollup v2, and the extract path based on bundle root
the location of the generated file outside the bundle directory not allowed in rollup v2.

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

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

Then you can use CSS files:

`js
import './style.css'
`

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

`js
// Inject to and also available as style
import style from './style.css'
`

It will also automatically use local PostCSS config files.

$3

`js
// for v2
postcss({
extract: true,
// Or with custom file name, it will generate file relative to bundle.js in v3
extract: 'dist/my-custom-file-name.css'
})

// for v3
import path from 'path'
postcss({
extract: true,
// Or with custom file name
extract: path.resolve('dist/my-custom-file-name.css')
})
`

$3

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

$3

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:

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

Options

$3

Type: string[]

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

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

$3

Type: Array

PostCSS Plugins.

$3

Type: boolean object function(cssVariableName, fileId): string

Default: true

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

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

It can also be a function , returning a string which is js code.

$3

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.

$3

Type: boolean object

Default: false

Enable CSS modules or set options for postcss-modules.

$3

Type: boolean

Default: true

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

$3

Type: boolean function

Default: false

Use named exports alongside default export.

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

`js
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:

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

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

`js
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
`

$3

Type: boolean object

Default: false

Minimize CSS, boolean or options for cssnano.

$3

Type: boolean "inline"

Enable sourceMap.

$3

Type: string function

PostCSS parser, like sugarss.

$3

Type: string function

PostCSS Stringifier.

$3

Type: string function

PostCSS Syntax.

$3

Type: boolean

Enable PostCSS Parser support in CSS-in-JS.

$3

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 key you pass to config.ctx will be available under options inside
the postcss config.

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

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

return {}
}
`

$3

Type: string

Destination CSS filename hint that could be used by PostCSS plugins, for example,
to properly resolve path, rebase and copy assets.

$3

Type: name[] [name, options][] { sass: options, stylus: options, less: 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.

If you pass the object, then its property sass, stylus and less will
be pass in the corresponding loader.

$3

Type: Loader[]

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

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

interface Context {
/* Loader options /
options: any
/* Sourcemap /
sourceMap: any
/* Resource path /
id: string
/* Files to watch /
dependencies: Set
/* 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
}
`

$3

Type: id => void`

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

License

MIT © EGOIST