Webpack discussion:

PostCSS chat:

postcss-loader

Loader to process CSS with PostCSS.

Getting Started

You need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.

To begin, you'll need to install postcss-loader and postcss:

1npm install --save-dev postcss-loader postcss

or

1yarn add -D postcss-loader postcss

or

1pnpm add -D postcss-loader postcss

Then add the plugin to your webpack config. For example:

In the following configuration the plugin postcss-preset-env is used, which is not installed by default.

file.js

1import css from "file.css";

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          "style-loader",
8          "css-loader",
9          {
10            loader: "postcss-loader",
11            options: {
12              postcssOptions: {
13                plugins: [
14                  [
15                    "postcss-preset-env",
16                    {
17                      // Options
18                    },
19                  ],
20                ],
21              },
22            },
23          },
24        ],
25      },
26    ],
27  },
28};

Alternative use with config files:

postcss.config.js

1module.exports = {
2  plugins: [
3    [
4      "postcss-preset-env",
5      {
6        // Options
7      },
8    ],
9  ],
10};

The loader automatically searches for configuration files.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: ["style-loader", "css-loader", "postcss-loader"],
7      },
8    ],
9  },
10};

And run webpack via your preferred method.

Options

• execute
• postcssOptions
• sourceMap
• implementation

execute

Type:

1type execute = boolean;

Default: undefined

Enable PostCSS Parser support in CSS-in-JS. If you use JS styles the postcss-js parser, add the execute option.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.style.js$/,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10          },
11          {
12            loader: "postcss-loader",
13            options: {
14              postcssOptions: {
15                parser: "postcss-js",
16              },
17              execute: true,
18            },
19          },
20        ],
21      },
22    ],
23  },
24};

postcssOptions

See the file ./src/config.d.ts.

Type:

1import type { Config as PostCSSConfig } from "postcss-load-config";
2import type { LoaderContext } from "webpack";
3
4type PostCSSLoaderContext = LoaderContext<PostCSSConfig>;
5
6interface PostCSSLoaderAPI {
7  mode: PostCSSLoaderContext["mode"];
8  file: PostCSSLoaderContext["resourcePath"];
9  webpackLoaderContext: PostCSSLoaderContext;
10  env: PostCSSLoaderContext["mode"];
11  options: PostCSSConfig;
12}
13
14export type PostCSSLoaderOptions =
15  | PostCSSConfig
16  | ((api: PostCSSLoaderAPI) => PostCSSConfig);

Default: undefined

Allows to set PostCSS options and plugins.

All PostCSS options are supported. There is the special config option for config files. How it works and how it can be configured is described below.

We recommend do not specify from, to and map options, because this can lead to wrong path in source maps. If you need source maps please use the sourcemap option.

For large projects, to optimize performance of the loader, it is better to provide postcssOptions in loader config and specify config: false. This approach removes the need to lookup and load external config files multiple times during compilation.

object

Setup plugins:

webpack.config.js (recommended)

1const myOtherPostcssPlugin = require("postcss-my-plugin");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.sss$/i,
8        loader: "postcss-loader",
9        options: {
10          postcssOptions: {
11            plugins: [
12              "postcss-import",
13              ["postcss-short", { prefix: "x" }],
14              require.resolve("my-postcss-plugin"),
15              myOtherPostcssPlugin({ myOption: true }),
16              // Deprecated and will be removed in the next major release
17              { "postcss-nested": { preserveEmpty: true } },
18            ],
19          },
20        },
21      },
22    ],
23  },
24};

webpack.config.js (deprecated, will be removed in the next major release)

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.sss$/i,
6        loader: "postcss-loader",
7        options: {
8          postcssOptions: {
9            plugins: {
10              "postcss-import": {},
11              "postcss-short": { prefix: "x" },
12            },
13          },
14        },
15      },
16    ],
17  },
18};

Setup syntax:

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.sss$/i,
6        loader: "postcss-loader",
7        options: {
8          postcssOptions: {
9            // Can be `string`
10            syntax: "sugarss",
11            // Can be `object`
12            syntax: require("sugarss"),
13          },
14        },
15      },
16    ],
17  },
18};

Setup parser:

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.sss$/i,
6        loader: "postcss-loader",
7        options: {
8          postcssOptions: {
9            // Can be `string`
10            parser: "sugarss",
11            // Can be `object`
12            parser: require("sugarss"),
13            // Can be `function`
14            parser: require("sugarss").parse,
15          },
16        },
17      },
18    ],
19  },
20};

Setup stringifier:

webpack.config.js

1const Midas = require("midas");
2const midas = new Midas();
3
4module.exports = {
5  module: {
6    rules: [
7      {
8        test: /\.sss$/i,
9        loader: "postcss-loader",
10        options: {
11          postcssOptions: {
12            // Can be `string`
13            stringifier: "sugarss",
14            // Can be `object`
15            stringifier: require("sugarss"),
16            // Can be `function`
17            stringifier: midas.stringifier,
18          },
19        },
20      },
21    ],
22  },
23};

function

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.(css|sss)$/i,
6        loader: "postcss-loader",
7        options: {
8          postcssOptions: (loaderContext) => {
9            if (/\.sss$/.test(loaderContext.resourcePath)) {
10              return {
11                parser: "sugarss",
12                plugins: [
13                  ["postcss-short", { prefix: "x" }],
14                  "postcss-preset-env",
15                ],
16              };
17            }
18
19            return {
20              plugins: [
21                ["postcss-short", { prefix: "x" }],
22                "postcss-preset-env",
23              ],
24            };
25          },
26        },
27      },
28    ],
29  },
30};

config

Type:

1type config = boolean | string;

Default: true

Allows to set options using config files. Options specified in the config file are combined with options passed to the loader, the loader options overwrite options from config.

Config Files

The loader will search up the directory tree for configuration in the following places:

• a postcss property in package.json
• a .postcssrc file in JSON or YAML format
• a .postcssrc.json, .postcssrc.yaml, .postcssrc.yml, .postcssrc.js, or .postcssrc.cjs file
• a postcss.config.js or postcss.config.cjs CommonJS module exporting an object (recommended)

Examples of Config Files

Using object notation:

postcss.config.js (recommend)

1module.exports = {
2  // You can specify any options from https://postcss.org/api/#processoptions here
3  // parser: 'sugarss',
4  plugins: [
5    // Plugins for PostCSS
6    ["postcss-short", { prefix: "x" }],
7    "postcss-preset-env",
8  ],
9};

Using function notation:

postcss.config.js (recommend)

1module.exports = (api) => {
2  // `api.file` - path to the file
3  // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
4  // `api.webpackLoaderContext` - loader context for complex use cases
5  // `api.env` - alias `api.mode` for compatibility with `postcss-cli`
6  // `api.options` - the `postcssOptions` options
7
8  if (/\.sss$/.test(api.file)) {
9    return {
10      // You can specify any options from https://postcss.org/api/#processoptions here
11      parser: "sugarss",
12      plugins: [
13        // Plugins for PostCSS
14        ["postcss-short", { prefix: "x" }],
15        "postcss-preset-env",
16      ],
17    };
18  }
19
20  return {
21    // You can specify any options from https://postcss.org/api/#processoptions here
22    plugins: [
23      // Plugins for PostCSS
24      ["postcss-short", { prefix: "x" }],
25      "postcss-preset-env",
26    ],
27  };
28};

postcss.config.js (deprecated, will be removed in the next major release)

1module.exports = {
2  // You can specify any options from https://postcss.org/api/#processoptions here
3  // parser: 'sugarss',
4  plugins: {
5    // Plugins for PostCSS
6    "postcss-short": { prefix: "x" },
7    "postcss-preset-env": {},
8  },
9};

Config Cascade

You can use different postcss.config.js files in different directories. Config lookup starts from path.dirname(file) and walks the file tree upwards until a config file is found.

|– components
| |– component
| | |– index.js
| | |– index.png
| | |– style.css (1)
| | |– postcss.config.js (1)
| |– component
| | |– index.js
| | |– image.png
| | |– style.css (2)
|
|– postcss.config.js (1 && 2 (recommended))
|– webpack.config.js
|
|– package.json

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended).

Use it before css-loader and style-loader, but after other preprocessor loaders like e.g sass|less|stylus-loader, if you use any (since webpack loaders evaluate right to left/bottom to top).

webpack.config.js (recommended)

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10            options: {
11              importLoaders: 1,
12            },
13          },
14          "postcss-loader",
15        ],
16      },
17    ],
18  },
19};

boolean

Enables/Disables autoloading config.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        loader: "postcss-loader",
7        options: {
8          postcssOptions: {
9            config: false,
10          },
11        },
12      },
13    ],
14  },
15};

String

Allows to specify the path to the config file.

webpack.config.js

1const path = require("path");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.css$/i,
8        loader: "postcss-loader",
9        options: {
10          postcssOptions: {
11            config: path.resolve(__dirname, "custom.config.js"),
12          },
13        },
14      },
15    ],
16  },
17};

sourceMap

Type:

1type sourceMap = boolean;

Default: depends on the compiler.devtool value

By default generation of source maps depends on the devtool option. All values enable source map generation except eval and false value.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          { loader: "style-loader" },
8          { loader: "css-loader", options: { sourceMap: true } },
9          { loader: "postcss-loader", options: { sourceMap: true } },
10          { loader: "sass-loader", options: { sourceMap: true } },
11        ],
12      },
13    ],
14  },
15};

Alternative setup:

webpack.config.js

1module.exports = {
2  devtool: "source-map",
3  module: {
4    rules: [
5      {
6        test: /\.css$/i,
7        use: [
8          { loader: "style-loader" },
9          { loader: "css-loader" },
10          { loader: "postcss-loader" },
11          { loader: "sass-loader" },
12        ],
13      },
14    ],
15  },
16};

implementation

Type:

1type implementation = object;

type of implementation should be the same as postcss.d.ts

Default: postcss

The special implementation option determines which implementation of PostCSS to use. Overrides the locally installed peerDependency version of postcss.

This option is only really useful for downstream tooling authors to ease the PostCSS 7-to-8 transition.

function

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          { loader: "style-loader" },
8          { loader: "css-loader" },
9          {
10            loader: "postcss-loader",
11            options: { implementation: require("postcss") },
12          },
13          { loader: "sass-loader" },
14        ],
15      },
16    ],
17  },
18};

String

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          { loader: "style-loader" },
8          { loader: "css-loader" },
9          {
10            loader: "postcss-loader",
11            options: { implementation: require.resolve("postcss") },
12          },
13          { loader: "sass-loader" },
14        ],
15      },
16    ],
17  },
18};

Examples

SugarSS

You'll need to install sugarss:

1npm install --save-dev sugarss

Using SugarSS syntax.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.sss$/i,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10            options: { importLoaders: 1 },
11          },
12          {
13            loader: "postcss-loader",
14            options: {
15              postcssOptions: {
16                parser: "sugarss",
17              },
18            },
19          },
20        ],
21      },
22    ],
23  },
24};

Autoprefixer

You'll need to install autoprefixer:

1npm install --save-dev autoprefixer

Add vendor prefixes to CSS rules using autoprefixer.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10            options: { importLoaders: 1 },
11          },
12          {
13            loader: "postcss-loader",
14            options: {
15              postcssOptions: {
16                plugins: [
17                  [
18                    "autoprefixer",
19                    {
20                      // Options
21                    },
22                  ],
23                ],
24              },
25            },
26          },
27        ],
28      },
29    ],
30  },
31};

Warning

postcss-preset-env includes autoprefixer, so adding it separately is not necessary if you already use the preset. More information

PostCSS Preset Env

You'll need to install postcss-preset-env:

1npm install --save-dev postcss-preset-env

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10            options: { importLoaders: 1 },
11          },
12          {
13            loader: "postcss-loader",
14            options: {
15              postcssOptions: {
16                plugins: [
17                  [
18                    "postcss-preset-env",
19                    {
20                      // Options
21                    },
22                  ],
23                ],
24              },
25            },
26          },
27        ],
28      },
29    ],
30  },
31};

CSS Modules

What is CSS Modules? Please read.

No additional options required on the postcss-loader side. To make them work properly, either add the css-loader’s importLoaders option.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.css$/i,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10            options: {
11              modules: true,
12              importLoaders: 1,
13            },
14          },
15          "postcss-loader",
16        ],
17      },
18    ],
19  },
20};

CSS-in-JS and postcss-js

You'll need to install postcss-js:

1npm install --save-dev postcss-js

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

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        test: /\.style.js$/,
6        use: [
7          "style-loader",
8          {
9            loader: "css-loader",
10            options: {
11              importLoaders: 2,
12            },
13          },
14          {
15            loader: "postcss-loader",
16            options: {
17              postcssOptions: {
18                parser: "postcss-js",
19              },
20              execute: true,
21            },
22          },
23          "babel-loader",
24        ],
25      },
26    ],
27  },
28};

As result you will be able to write styles in the following way

1import colors from "./styles/colors";
2
3export default {
4  ".menu": {
5    color: colors.main,
6    height: 25,
7    "&_link": {
8      color: "white",
9    },
10  },
11};

Warning

If you are using Babel you need to do the following in order for the setup to work

1. Add babel-plugin-add-module-exports to your configuration.
2. You need to have only one default export per style module.

Extract CSS

Using mini-css-extract-plugin.

webpack.config.js

1const isProductionMode = process.env.NODE_ENV === "production";
2
3const MiniCssExtractPlugin = require("mini-css-extract-plugin");
4
5module.exports = {
6  mode: isProductionMode ? "production" : "development",
7  module: {
8    rules: [
9      {
10        test: /\.css$/,
11        use: [
12          isProductionMode ? MiniCssExtractPlugin.loader : "style-loader",
13          "css-loader",
14          "postcss-loader",
15        ],
16      },
17    ],
18  },
19  plugins: [
20    new MiniCssExtractPlugin({
21      filename: isProductionMode ? "[name].[contenthash].css" : "[name].css",
22    }),
23  ],
24};

Emit assets

To write a asset from PostCSS plugin to the webpack, need to add a message in result.messages.

The message should contain the following fields:

• type = asset - Message type (require, should be equal asset)
• file - file name (require)
• content - file content (require)
• sourceMap - sourceMap
• info - asset info

webpack.config.js

1const postcssCustomPlugin = (opts = {}) => {
2  return {
3    postcssPlugin: "postcss-custom-plugin",
4    Once: (root, { result }) => {
5      result.messages.push({
6        type: "asset",
7        file: "sprite.svg",
8        content: "<svg>...</svg>",
9      });
10    },
11  };
12};
13
14module.exports = {
15  module: {
16    rules: [
17      {
18        test: /\.css$/i,
19        use: [
20          "style-loader",
21          "css-loader",
22          {
23            loader: "postcss-loader",
24            options: {
25              postcssOptions: {
26                plugins: [postcssCustomPlugin()],
27              },
28            },
29          },
30        ],
31      },
32    ],
33  },
34};

Add dependencies, contextDependencies, buildDependencies, missingDependencies

The dependencies are necessary for webpack to understand when it needs to run recompilation on the changed files.

There are two way to add dependencies:

1. (Recommended). The plugin may emit messages in result.messages.

The message should contain the following fields:

• type = dependency - Message type (require, should be equal dependency, context-dependency, build-dependency or missing-dependency)
• file - absolute file path (require)

webpack.config.js

1const path = require("path");
2
3const postcssCustomPlugin = (opts = {}) => {
4  return {
5    postcssPlugin: "postcss-custom-plugin",
6    Once: (root, { result }) => {
7      result.messages.push({
8        type: "dependency",
9        file: path.resolve(__dirname, "path", "to", "file"),
10      });
11    },
12  };
13};
14
15module.exports = {
16  module: {
17    rules: [
18      {
19        test: /\.css$/i,
20        use: [
21          "style-loader",
22          "css-loader",
23          {
24            loader: "postcss-loader",
25            options: {
26              postcssOptions: {
27                plugins: [postcssCustomPlugin()],
28              },
29            },
30          },
31        ],
32      },
33    ],
34  },
35};

Or you can use ready-made plugin postcss-add-dependencies.

2. Pass loaderContext in plugin.

webpack.config.js

1const path = require("path");
2
3module.exports = {
4  module: {
5    rules: [
6      {
7        test: /\.css$/i,
8        use: [
9          "style-loader",
10          "css-loader",
11          {
12            loader: "postcss-loader",
13            options: {
14              postcssOptions: {
15                config: path.resolve(__dirname, "path/to/postcss.config.js"),
16              },
17            },
18          },
19        ],
20      },
21    ],
22  },
23};

postcss.config.js

1module.exports = (api) => ({
2  plugins: [
3    require("path/to/postcssCustomPlugin.js")({
4      loaderContext: api.webpackLoaderContext,
5    }),
6  ],
7});

postcssCustomPlugin.js

1const path = require("path");
2
3const postcssCustomPlugin = (opts = {}) => {
4  return {
5    postcssPlugin: "postcss-custom-plugin",
6    Once: (root, { result }) => {
7      opts.loaderContext.addDependency(
8        path.resolve(__dirname, "path", "to", "file"),
9      );
10    },
11  };
12};
13
14postcssCustomPlugin.postcss = true;
15module.exports = postcssCustomPlugin;

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT