rollup-plugin-postcss is a Rollup plugin that allows you to import and process CSS files with PostCSS. It supports various PostCSS plugins, CSS modules, and can even extract CSS into separate files.

What are rollup-plugin-postcss's main functionalities?

Importing CSS

This feature allows you to import CSS files directly into your JavaScript or TypeScript files. The imported styles can then be used within your components.

import styles from './styles.css';

Using PostCSS Plugins

This feature allows you to use PostCSS plugins like autoprefixer to process your CSS. The example demonstrates how to configure the plugin to use autoprefixer.

import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      plugins: [
        autoprefixer()
      ]
    })
  ]
};

Extracting CSS

This feature allows you to extract CSS into a separate file instead of including it in the JavaScript bundle. The example shows how to configure the plugin to extract CSS.

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      extract: true
    })
  ]
};

CSS Modules

This feature allows you to use CSS Modules, which scope CSS by automatically creating unique class names. The example demonstrates how to enable CSS Modules in the plugin configuration.

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      modules: true
    })
  ]
};

Other packages similar to rollup-plugin-postcss

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,
  // Or with custom file name
  extract: 'dist/my-custom-file-name.css'
})

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 function(cssVariableName, fileId): string

Default: true

Inject CSS into <head>, 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.

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

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

License

MIT © EGOIST

Keywords

FAQs

What is rollup-plugin-postcss?

Is rollup-plugin-postcss popular?

Is rollup-plugin-postcss well maintained?

Package last updated on 21 Apr 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

rollup-plugin-postcss

What is rollup-plugin-postcss?

What are rollup-plugin-postcss's main functionalities?

Other packages similar to rollup-plugin-postcss

rollup-plugin-css-only

rollup-plugin-sass

rollup-plugin-styles

rollup-plugin-postcss

Install

Usage

Extract CSS

CSS modules

With Sass/Stylus/Less

imports

Options

extensions

plugins

inject

extract

modules

autoModules

namedExports

minimize

sourceMap

parser

stringifier

syntax

exec

config

config.path

config.ctx

to

use

loaders

onImport

License

Keywords

Related posts

Introducing the Socket Python SDK

The Wildcard Gamble: Understanding the Risks of Floating Dependency Ranges in npm

New Rust RFC Proposes Adding Support for Trusted Publishing to Crates.io