postcss-loader 0,0,1,2,0 editorconfig eslint travis-ci gulp npm

PostCSS loader for webpack

2 years after MIT

PostCSS for Webpack Build Status

<img align="right" width="95" height="95" title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo.svg">

PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.

<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">

Install

npm install postcss-loader --save-dev

Usage

You can configure PostCSS Loader in common PostCSS config or directly in Webpack config. Common PostCSS config is recommended way, because many PostCSS tools will be able to share it.

PostCSS Config

Add PostCSS Loader to webpack.config.js. Put it before css-loader and style-loader. But after sass-loader, if you use it.

module.exports = {
  module: {
    loaders: [
      {
        test:   /\.css$/,
        loader: [
          'style-loader',
          'css-loader?importLoaders=1',
          'postcss-loader'
        ]
      }
    ]
  }
}

Then create postcss.config.js:

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

You could put different configs in different directories. For example, global config in project/postcss.config.js and override its plugins in project/src/legacy/postcss.config.js.

You can read more about common PostCSS config in postcss-load-config.

Webpack 2.x Config

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('precss'),
                  require('autoprefixer')
                ];
              }
            }
          }
        ]
      }
    ]
  }
}

Webpack 1.x Config

module.exports = {
  module: {
    loaders: [
      {
        test:   /\.css$/,
        loader: [
          'style-loader',
          'css-loader?importLoaders=1',
          'postcss-loader'
        ]
      }
    ]
  },
  postcss: function () {
    return [
      require('precss'),
      require('autoprefixer')
    ];
  }
}

Options

Syntaxes

PostCSS can transforms styles in any syntax, not only in CSS. There are 3 parameters to control syntax:

  • syntax accepts module name with parse and stringify function.
  • parser accepts module name with input parser function.
  • stringifier accepts module name with output stringifier function.
module.exports = {
  module: {
    loaders: [
      {
        test:   /\.sss/,
        loader: [
          'style-loader',
          'css-loader?importLoaders=1',
          'postcss-loader?parser=sugarss'
        ]
      }
    ]
  }
}

SourceMaps

Loader will use source map settings from previous loader.

You can set this sourceMap parameter to inline value to put source maps into CSS annotation comment:

module.exports = {
  module: {
    loaders: [
      {
        test: '\/.css',
        loader: [
          'style-loader',
          'css-loader?importLoaders=1',
          'postcss-loader?sourceMap=inline'
        ]
      }
    ]
  }
}

Examples

CSS Modules

This loader cannot be used with CSS Modules out of the box due to the way css-loader processes file imports. To make them work properly, either add the css-loader’s importLoaders option

…
      {
        test: /\.css$/,
        loader: [
          'style-loader',
          'css-loader?modules&importLoaders=1',
          'postcss-loader'
        ]
      }
…

or use postcss-modules plugin instead of css-loader.

JS Styles

If you want to process styles written in JavaScript you can use the postcss-js parser.

…
      {
        test: /\.style.js$/,
        loader: [
          'style-loader',
          'css-loader?modules&importLoaders=1',
          'postcss-loader?parser=postcss-js',
          'babel'
        ]
      }
…

As result you will be able to write styles as:

import colors from './config/colors'

export default {
  '.menu': {
    color: colors.main,
    height: 25,
    '&_link': {
      color: 'white'
    }
  }
}

If you use JS styles without postcss-js parser, you can add exec parameter:

…
      {
        test:   /\.style.xyz$/,
        loader: [
          'style-loader',
          'css-loader?modules&importLoaders=1',
          'postcss-loader?parser=custom-parser&exec'
        ]
      }
…

Webpack Events

Webpack provides webpack plugin developers a convenient way to hook into the build pipeline. The postcss-loader makes use of this event system to allow building integrated postcss-webpack tools.

See the example implementation.

Event postcss-loader-before-processing is fired before processing and allows to add or remove postcss plugins.

Related Repositories

postcss

postcss

Transforming styles with JS plugins ...

css-loader

css-loader

css loader module for webpack ...

css-loader

css-loader

css loader module for webpack ...

bootstrap-loader

bootstrap-loader

Load Bootstrap styles and scripts in your Webpack bundle ...

isomorphic-style-loader

isomorphic-style-loader

Isomorphic CSS style loader for Webpack ...


Top Contributors

ai cybercase jantimon ertrzyiks izaakschroeder MoOx michael-ciniawsky badsyntax DmitryAuine andreypopp bcbcb leyyinad cspotcode pgilad iamakulov taion josephfinlayson nealgranger olegakbarov SimonDegraeve yargalot sdn90 fson partyka1

Dependencies

package version
loader-utils ^1.1.0
postcss ^6.0.2
postcss-load-config ^1.2.0
schema-utils ^0.3.0
dev coveralls ^2.13.1
fs-extra ^3.0.1
jest ^20.0.4
jsdoc-to-markdown ^3.0.0
postcss-js ^1.0.0
standard ^10.0.2
standard-version ^4.1.0
sugarss ^1.0.0
webpack ^3.0.0

Releases

-   0.13.0 zip tar
-   0.12.0 zip tar
-   0.11.1 zip tar
-   0.11.0 zip tar
-   0.10.1 zip tar
-   0.10.0 zip tar
-   0.9.1 zip tar
-   0.9.0 zip tar
-   0.8.2 zip tar
-   0.8.1 zip tar
-   0.8.0 zip tar
-   0.7.0 zip tar
-   0.6.0 zip tar
-   0.5.1 zip tar
-   0.5.0 zip tar
-   0.4.4 zip tar
-   0.4.3 zip tar
-   0.4.2 zip tar
-   0.4.1 zip tar
-   0.4.0 zip tar
-   0.3.0 zip tar
-   0.2.0 zip tar
-   0.1.0 zip tar