Nasal Pathway Melodrama

    rollup-plugin-postcss2

    1.0.0 • Public • Published

    rollup-plugin-postcss

    NPM version NPM downloads Build Status codecov donate

    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.

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

    Install

    npm i rollup-plugin-postcss2

    DownloadsWeekly Downloads

    9

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    62.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • zoumiaojiang