# rollup-plugin-postcss
> Seamless integration between Rollup and PostCSS
Latest version **4.0.2** (published 2021-11-22) · MIT license · 0 weekly downloads
## Install
```sh
npm install rollup-plugin-postcss
pnpm add rollup-plugin-postcss
yarn add rollup-plugin-postcss
bun add rollup-plugin-postcss
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.0.2 |
| Published | 2021-11-22 |
| First published | 2015-12-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 13 |
| Unpacked size | 41.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 689 |
| Author | EGOIST |
| Maintainers | kchan, egoist, rem, lmihaidaniel, sasuke688848 |
| Keywords | postcss, rollup |
## Links
- npm: https://www.npmjs.com/package/rollup-plugin-postcss
- Repository: https://github.com/egoist/rollup-plugin-postcss
- Homepage: https://github.com/egoist/rollup-plugin-postcss#readme
- Issues: https://github.com/egoist/rollup-plugin-postcss/issues
- npm.io page: https://npm.io/package/rollup-plugin-postcss
## Dependencies (13)
- [pify](https://npm.io/package/pify.md) ^5.0.0
- [chalk](https://npm.io/package/chalk.md) ^4.1.0
- [cssnano](https://npm.io/package/cssnano.md) ^5.0.1
- [p-queue](https://npm.io/package/p-queue.md) ^6.6.2
- [resolve](https://npm.io/package/resolve.md) ^1.19.0
- [import-cwd](https://npm.io/package/import-cwd.md) ^3.0.0
- [style-inject](https://npm.io/package/style-inject.md) ^0.3.0
- [promise.series](https://npm.io/package/promise.series.md) ^0.2.0
- [postcss-modules](https://npm.io/package/postcss-modules.md) ^4.0.0
- [safe-identifier](https://npm.io/package/safe-identifier.md) ^0.4.2
- [rollup-pluginutils](https://npm.io/package/rollup-pluginutils.md) ^2.8.2
- [postcss-load-config](https://npm.io/package/postcss-load-config.md) ^3.0.0
- [concat-with-sourcemaps](https://npm.io/package/concat-with-sourcemaps.md) ^1.1.0
## Alternatives
- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads
## Recent versions
- 4.0.2 (latest) — 2021-11-22
- 3.0.0 (next) — 2020-04-21
- 4.0.1 — 2021-08-12
- 4.0.0 — 2020-12-07
- 3.1.8 — 2020-08-30
- 3.1.7 — 2020-08-30
- 3.1.6 — 2020-08-24
- 3.1.5 — 2020-08-10
- 3.1.4 — 2020-08-05
- 3.1.3 — 2020-07-14
- 3.1.2 — 2020-06-04
- 3.1.1 — 2020-04-24
- 3.1.0 — 2020-04-23
- 2.9.0 — 2020-04-21
- 2.8.2 — 2020-04-19
- … 72 more at https://npm.io/package/rollup-plugin-postcss/versions
## README
# rollup-plugin-postcss
[](https://npmjs.com/package/rollup-plugin-postcss) [](https://npmjs.com/package/rollup-plugin-postcss) [](https://circleci.com/gh/egoist/rollup-plugin-postcss) [](https://codecov.io/gh/egoist/rollup-plugin-postcss)
[](https://github.com/egoist/donate)
Seamless integration between [Rollup](https://github.com/rollup/rollup) and [PostCSS](https://github.com/postcss/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.
### Extract CSS
```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')
})
```
### CSS modules
```js
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](https://github.com/webpack-contrib/sass-loader#imports) works, you can prepend the path with `~` to tell this plugin to resolve in `node_modules`:
```sass
@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](#loaders).
### plugins
Type: `Array`
PostCSS Plugins.
### inject
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`](https://github.com/egoist/style-inject#options).
It can also be a `function` , returning a `string` which is js code.
### 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:
```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
```
### 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`](https://github.com/michael-ciniawsky/postcss-load-config#context) 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 {}
}
```
### to
Type: `string`
Destination CSS filename hint that could be used by PostCSS plugins, for example,
to properly resolve path, rebase and copy assets.
### use
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.
### loaders
Type: `Loader[]`
An array of custom loaders, check out our [sass-loader](./src/sass-loader.js) 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
}
```
### onImport
Type: `id => void`
A function to be invoked when an import for CSS file is detected.
## License
MIT © [EGOIST](https://github.com/egoist)
---
_Source: https://npm.io/package/rollup-plugin-postcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._