Package detail

postcss-loader

webpack-contrib61mMIT8.1.1

PostCSS loader for webpack

css, postcss, postcss-runner, webpack, webpack-loader

readme

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:

npm install --save-dev postcss-loader postcss

yarn add -D postcss-loader postcss

pnpm 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

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

Alternative use with config files:

postcss.config.js

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

The loader automatically searches for configuration files.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

And run webpack via your preferred method.

`execute`

Type:

type 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

module.exports = {
  module: {
    rules: [
      {
        test: /\.style.js$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "postcss-js",
              },
              execute: true,
            },
          },
        ],
      },
    ],
  },
};

`postcssOptions`

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

Type:

import type { Config as PostCSSConfig } from "postcss-load-config";
import type { LoaderContext } from "webpack";

type PostCSSLoaderContext = LoaderContext<PostCSSConfig>;

interface PostCSSLoaderAPI {
  mode: PostCSSLoaderContext["mode"];
  file: PostCSSLoaderContext["resourcePath"];
  webpackLoaderContext: PostCSSLoaderContext;
  env: PostCSSLoaderContext["mode"];
  options: PostCSSConfig;
}

export type PostCSSLoaderOptions =
  | PostCSSConfig
  | ((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)

const myOtherPostcssPlugin = require("postcss-my-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-import",
              ["postcss-short", { prefix: "x" }],
              require.resolve("my-postcss-plugin"),
              myOtherPostcssPlugin({ myOption: true }),
              // Deprecated and will be removed in the next major release
              { "postcss-nested": { preserveEmpty: true } },
            ],
          },
        },
      },
    ],
  },
};

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: {
              "postcss-import": {},
              "postcss-short": { prefix: "x" },
            },
          },
        },
      },
    ],
  },
};

Setup syntax:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            // Can be `string`
            syntax: "sugarss",
            // Can be `object`
            syntax: require("sugarss"),
          },
        },
      },
    ],
  },
};

Setup parser:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            // Can be `string`
            parser: "sugarss",
            // Can be `object`
            parser: require("sugarss"),
            // Can be `function`
            parser: require("sugarss").parse,
          },
        },
      },
    ],
  },
};

Setup stringifier:

webpack.config.js

const Midas = require("midas");
const midas = new Midas();

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            // Can be `string`
            stringifier: "sugarss",
            // Can be `object`
            stringifier: require("sugarss"),
            // Can be `function`
            stringifier: midas.stringifier,
          },
        },
      },
    ],
  },
};

`function`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(css|sss)$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: (loaderContext) => {
            if (/\.sss$/.test(loaderContext.resourcePath)) {
              return {
                parser: "sugarss",
                plugins: [
                  ["postcss-short", { prefix: "x" }],
                  "postcss-preset-env",
                ],
              };
            }

            return {
              plugins: [
                ["postcss-short", { prefix: "x" }],
                "postcss-preset-env",
              ],
            };
          },
        },
      },
    ],
  },
};

`config`

Type:

type 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)

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

Using function notation:

postcss.config.js (recommend)

module.exports = (api) => {
  // `api.file` - path to the file
  // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
  // `api.webpackLoaderContext` - loader context for complex use cases
  // `api.env` - alias `api.mode` for compatibility with `postcss-cli`
  // `api.options` - the `postcssOptions` options

  if (/\.sss$/.test(api.file)) {
    return {
      // You can specify any options from https://postcss.org/api/#processoptions here
      parser: "sugarss",
      plugins: [
        // Plugins for PostCSS
        ["postcss-short", { prefix: "x" }],
        "postcss-preset-env",
      ],
    };
  }

  return {
    // You can specify any options from https://postcss.org/api/#processoptions here
    plugins: [
      // Plugins for PostCSS
      ["postcss-short", { prefix: "x" }],
      "postcss-preset-env",
    ],
  };
};

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

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

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)

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
      },
    ],
  },
};

`boolean`

Enables/Disables autoloading config.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            config: false,
          },
        },
      },
    ],
  },
};

String

Allows to specify the path to the config file.

webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            config: path.resolve(__dirname, "custom.config.js"),
          },
        },
      },
    ],
  },
};

`sourceMap`

Type:

type 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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader", options: { sourceMap: true } },
          { loader: "postcss-loader", options: { sourceMap: true } },
          { loader: "sass-loader", options: { sourceMap: true } },
        ],
      },
    ],
  },
};

Alternative setup:

webpack.config.js

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "postcss-loader" },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

`implementation`

Type:

type 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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "postcss-loader",
            options: { implementation: require("postcss") },
          },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

String

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "postcss-loader",
            options: { implementation: require.resolve("postcss") },
          },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

Examples

SugarSS

You'll need to install sugarss:

npm install --save-dev sugarss

Using SugarSS syntax.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "sugarss",
              },
            },
          },
        ],
      },
    ],
  },
};

Autoprefixer

You'll need to install autoprefixer:

npm install --save-dev autoprefixer

Add vendor prefixes to CSS rules using autoprefixer.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

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:

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
      },
    ],
  },
};

CSS-in-JS and `postcss-js`

You'll need to install postcss-js:

npm install --save-dev postcss-js

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.style.js$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "postcss-js",
              },
              execute: true,
            },
          },
          "babel-loader",
        ],
      },
    ],
  },
};

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

import colors from "./styles/colors";

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

Warning

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

Add babel-plugin-add-module-exports to your configuration.

You need to have only one default export per style module.

Extract CSS

Using mini-css-extract-plugin.

webpack.config.js

const isProductionMode = process.env.NODE_ENV === "production";

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: isProductionMode ? "production" : "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          isProductionMode ? MiniCssExtractPlugin.loader : "style-loader",
          "css-loader",
          "postcss-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: isProductionMode ? "[name].[contenthash].css" : "[name].css",
    }),
  ],
};

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

const postcssCustomPlugin = (opts = {}) => {
  return {
    postcssPlugin: "postcss-custom-plugin",
    Once: (root, { result }) => {
      result.messages.push({
        type: "asset",
        file: "sprite.svg",
        content: "<svg>...</svg>",
      });
    },
  };
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [postcssCustomPlugin()],
              },
            },
          },
        ],
      },
    ],
  },
};

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:

(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

const path = require("path");

const postcssCustomPlugin = (opts = {}) => {
  return {
    postcssPlugin: "postcss-custom-plugin",
    Once: (root, { result }) => {
      result.messages.push({
        type: "dependency",
        file: path.resolve(__dirname, "path", "to", "file"),
      });
    },
  };
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [postcssCustomPlugin()],
              },
            },
          },
        ],
      },
    ],
  },
};

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

Pass loaderContext in plugin.

webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, "path/to/postcss.config.js"),
              },
            },
          },
        ],
      },
    ],
  },
};

postcss.config.js

module.exports = (api) => ({
  plugins: [
    require("path/to/postcssCustomPlugin.js")({
      loaderContext: api.webpackLoaderContext,
    }),
  ],
});

postcssCustomPlugin.js

const path = require("path");

const postcssCustomPlugin = (opts = {}) => {
  return {
    postcssPlugin: "postcss-custom-plugin",
    Once: (root, { result }) => {
      opts.loaderContext.addDependency(
        path.resolve(__dirname, "path", "to", "file"),
      );
    },
  };
};

postcssCustomPlugin.postcss = true;
module.exports = postcssCustomPlugin;

Contributing

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

CONTRIBUTING

License

MIT

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

8.1.1 (2024-02-28)

Bug Fixes

respect default when loading postcss esm configs (52d8050)

8.1.0 (2024-01-30)

Features

add @rspack/core as an optional peer dependency (#679) (512e4c3)

8.0.0 (2024-01-16)

⚠ BREAKING CHANGES

minimum supported Node.js version is 18.12.0 (#677) (8dd0315)

7.3.4 (2023-12-27)

Bug Fixes

do not crash if pkg.(d|devD)ependencies unset (#667) (8ef0c7e)

7.3.3 (2023-06-10)

Bug Fixes

perf: avoid using klona for postcss options (#658) (e754c3f)
bug with loading configurations after updating cosmiconfig to version 8.2 (684d265)

7.3.2 (2023-05-28)

Bug Fixes

use cause to keep original errors and warnings (#655) (e8873f4)

7.3.1 (2023-05-26)

Bug Fixes

warning and error serialization (65748ec)

7.3.0 (2023-04-28)

Features

use jiti for typescript configurations (#649) (8b876fa)

7.2.4 (2023-04-04)

Bug Fixes

memory leak (#642) (7ab3b59)

7.2.3 (2023-04-03)

Bug Fixes

ts-node loading (#640) (38b1992)

7.2.2 (2023-04-03)

Bug Fixes

cannot find module 'ts-node' (#639) (ab4d16a)

7.2.1 (2023-04-03)

Bug Fixes

cosmiconfig typescript loader (#635) (129f5be)

7.2.0 (2023-04-03)

Features

add support for TypeScript based configs (#632) (c6b5def)

7.1.0 (2023-03-16)

Features

deps: update cosmiconfig (#628) (8114be4)

7.0.2 (2022-11-29)

Bug Fixes

support ESM version of postcss.config.js and postcss.config.mjs (#614) (955085f)

7.0.1 (2022-07-11)

Bug Fixes

unexpected failing on CSS syntax error (#593) (888d72e)

7.0.0 (2022-05-18)

⚠ BREAKING CHANGES

minimum supported Node.js version is 14.15.0

6.2.1 (2021-11-26)

Bug Fixes

watching configuration (#553) (7f165b4)

6.2.0 (2021-10-13)

Features

add link field in schema (#540) (1ae8212)

6.1.1 (2021-07-01)

Bug Fixes

do not swallow exception from postcss (2eec42b)

6.1.0 (2021-06-10)

Features

allow String value for the "implementation" option (0d342b1)

6.0.0 (2021-06-10)

⚠ BREAKING CHANGES

minimum supported Node.js version is 12.13.0 (#526)

Bug Fixes

check postcss as project dependency (570db67)

5.3.0 (2021-05-14)

Features

add support for dir-dependency message type (#524) (91dea60)

5.2.0 (2021-03-11)

Features

support ecma modules for the 'parser', 'stringifier' and 'syntax' options (#519) (cc69754)

5.1.0 (2021-03-05)

Features

added support for registering context, build and missing dependencies (#518) (9ce4972), please read docs

5.0.0 (2021-02-02)

⚠ BREAKING CHANGES

minimum supported webpack version is 5

4.2.0 (2021-01-21)

Features

added the implementation option (#511) (deac978)

4.1.0 (2020-11-19)

Features

partial compatibility with postcss-cli, added api.env (alias for api.mode) and api.options (contains options from the postcssOptions options), please look at the example for more details (#498) (84a9c46)

4.0.4 (2020-10-09)

Chore

update schema-utils

4.0.3 (2020-10-02)

Bug Fixes

PostCSS 8 plugin loading (e1b82fe)
error and warning messages (#485) (4b44e01)

4.0.2 (2020-09-15)

Bug Fixes

compatibility with postcss@8 (#479) (218b0f8)

4.0.1 (2020-09-08)

Bug Fixes

source map generation with the map option for postcss (#476) (6babeb1)

4.0.0 (2020-09-07)

⚠ BREAKING CHANGES

minimum supported Node.js version is 10.13
minimum supported webpack version is 4
postcss was moved to peerDependencies, you need to install postcss
PostCSS (plugins/syntax/parser/stringifier) options was moved to the postcssOptions option, please look at docs
sourceMap default value depends on the compiler.devtool option
the inline value was removed for the sourceMap option, please use { map: { inline: true, annotation: false } } to achieve this
source maps contain absolute paths in sources
loader output only CSS, so you need to use css-loader/file-loader/raw-loader to inject code inside bundle
exec option was renamed to the execute option
the config option doesn't support Object type anymore, config.path and config.ctx options were removed
argument in the config for Function notation (previously config.ctx) was changed, now it contains { file, mode, webpackLoaderContext }
loader context in the config was renamed from webpack to webpackLoaderContext

Features

message API for emit assets (#443) (e966ab9)
reuse AST from other loaders (#468) (9b75888)
allows to use config and loader options together, options from the loader takes precedence over the config, the plugins option from the config and options are merged (0eb5aaf)
postcssOptions options can be Function

Bug Fixes

compatibility with webpack@5 (#437) (ed50491)
default export for plugins (#465) (3d32c35)
avoid mutations of loader options and config (#470) (cad6f07)
respect the map option from loader options and config (#458) (98441ff)

Notes

you don't need ident option for loader
Object syntax for the plugin option is soft deprecated, please migrate on Array syntax (plugins: ['postcss-preset-env', ['cssnano', options]])

3.0.0 (2018-08-08)

Bug Fixes

index: add ast version (meta.ast) (f34954f)
index: emit warnings as an instance of {Error} (8ac6fb5)
options: improved ValidationError messages (549ea08)

Chores

package: update postcss v6.0.0...7.0.0 (dependencies) (#375) (daa0da8)

BREAKING CHANGES

package: requires node >= v6.0.0

2.1.6 (2018-07-10)

Bug Fixes

package: config memory leak, updates postcss-load-config v1.2.0...2.0.0 (dependencies) (0547b12)

2.1.5 (2018-05-04)

Bug Fixes

index: remove sourceMap warning (#361) (4416791)

2.1.4 (2018-04-16)

Bug Fixes

restore loader object in postcss config context (#355) (2ff1735)

2.1.3 (2018-03-20)

Bug Fixes

options: revert additionalProperties changes to keep SemVer (bd7fc38)

2.1.2 (2018-03-17)

Bug Fixes

options: disallow additional properties and add ident to validation (#346) (82ef553)

2.1.1 (2018-02-26)

Bug Fixes

index: don't set to value (options) (#339) (cdbb8b6)

2.1.0 (2018-02-02)

Bug Fixes

index: continue watching after dependency {Error} (#332) (a8921cc)

Features

index: pass AST (result.root) && Messages (result.messages) as metadata to other loaders (#322) (56232e7)

2.0.10 (2018-01-03)

Bug Fixes

index: copy loader options before modifying (#326) (61ff03c)

2.0.9 (2017-11-24)

Bug Fixes

index: filter ident (options.ident) (#315) (3e1c7fa)

2.0.8 (2017-10-14)

Bug Fixes

lib/options: handle {Object} return (options.plugins) (#301) (df010a7)
schema: allow to pass an {Object} (options.syntax/options.stringifier) (#300) (58e9996)

2.0.7 (2017-10-10)

Bug Fixes

sanitizing from and to options (postcss.config.js) (#260) (753dea7)
index: runaway promise (#269) (8df20ce)

2.0.6 (2017-06-14)

Bug Fixes

allow to pass an {Object} (options.parser) (#257) (4974607)
misspelling in warnings (#237) (adcbb2e)
index: simplify config loading behaviour (#259) (b313478)

2.0.5 (2017-05-10)

Bug Fixes

regression with options.plugins {Function} (webpack.config.js) (#229) (dca52a9)

2.0.4 (2017-05-10)

Bug Fixes

index: postcss.config.js not resolved correctly (options.config) (faaeee4)
index: update validation schema, better warning message (4f20c99)

2.0.3 (2017-05-09)

Bug Fixes

index: don't fail on 'sourceMap: false' && emit a warning instead, when previous map found (options.sourceMap) (159b66a)

2.0.2 (2017-05-09)

Bug Fixes

index: 'No PostCSS Config found' (options.config) (#215) (e764761)

2.0.1 (2017-05-08)

Bug Fixes

index: 'Cannot create property prev on boolean false' (options.sourceMap) (c4f0064)

2.0.0 (2017-05-08)

Features

index: add ctx, ctx.file, ctx.options (0dceb2c)
index: add options validation (2b76df8)

1.3.3

Remove postcss-loader-before-processing warning (by Michael Ciniawsky).

1.3.2

Fix deprecated warning (by Xiaoyu Zhai).

1.3.1

Fix conflict with CLI --config argument (by EGOIST).

1.3

Allow object in syntax options, not only path for require (by Jeff Escalante).

1.2.2

Watch postcss.config.js for changes (by Michael Ciniawsky).

1.2.1

Fix relative config parameter resolving (by Simen Bekkhus).

1.2

Add config parameter (by sainthkh).

1.1.1

Fix this in options function (by Jeff Escalante).

1.1

PostCSS common config could be placed to subdirs.
Add webpack instance to PostCSS common config context.

1.0

Add common PostCSS config support (by Mateusz Derks).
Add Webpack 2 support with plugins query option (by Izaak Schroeder).
Add dependency message support.
Rewrite docs (by Michael Ciniawsky).

0.13

Add exec parameter (by Neal Granger).

0.12

Add CSS syntax highlight to syntax error code frame.

0.11.1

Fix Promise API (by Daniel Haus).

0.11

Add postcss-loader-before-processing webpack event (by Jan Nicklas).

0.10.1

Better syntax error message (by Andrey Popp).

0.10.0

Add sourceMap parameter to force inline maps (by 雪狼).

0.9.1

Fix plugin in simple array config.

0.9

Allow to pass syntax, parser or stringifier as function (by Jeff Escalante).

0.8.2

Fix source map support (by Andrew Bradley).

0.8.1

Fix resource path.

0.8

Add postcss-js support (by Simon Degraeve).

0.7

Added argument with webpack instance to plugins callback (by Maxime Thirouin).

0.6

Use PostCSS 5.0.
Remove safe parameter. Use Safe Parser.
Add syntax, parser and stringifier parameters.

0.5.1

Fix string source map support (by Jan Nicklas).

0.5.0

Set plugins by function for hot reload support (by Stefano Brilli).

0.4.4

Fix error on empty PostCSS config.

0.4.3

Better check for CssSyntaxError.

0.4.2

Fixed invalid sourcemap exception (by Richard Willis).

0.4.1

Use only Promise API to catch PostCSS errors.

0.4

Add PostCSS asynchronous API support.
Fix source map support (by Richard Willis).
Add warnings API support.
Better output for CSS syntax errors.

0.3

Use PostCSS 4.0.

0.2

Use PostCSS 3.0.

0.1

Initial release.

Package detail

readme

postcss-loader

Getting Started

Options

execute

postcssOptions

object

function

config

Config Files

Examples of Config Files

Config Cascade

boolean

String

sourceMap

implementation

function

String

Examples

SugarSS

Autoprefixer

PostCSS Preset Env

CSS Modules

CSS-in-JS and postcss-js

Extract CSS

Emit assets

Add dependencies, contextDependencies, buildDependencies, missingDependencies

Contributing

License

changelog

Changelog

8.1.1 (2024-02-28)

Bug Fixes

8.1.0 (2024-01-30)

Features

8.0.0 (2024-01-16)

⚠ BREAKING CHANGES

7.3.4 (2023-12-27)

Bug Fixes

7.3.3 (2023-06-10)

Bug Fixes

7.3.2 (2023-05-28)

Bug Fixes

7.3.1 (2023-05-26)

Bug Fixes

7.3.0 (2023-04-28)

Features

7.2.4 (2023-04-04)

Bug Fixes

7.2.3 (2023-04-03)

Bug Fixes

7.2.2 (2023-04-03)

Bug Fixes

7.2.1 (2023-04-03)

Bug Fixes

7.2.0 (2023-04-03)

Features

7.1.0 (2023-03-16)

Features

7.0.2 (2022-11-29)

Bug Fixes

7.0.1 (2022-07-11)

Bug Fixes

7.0.0 (2022-05-18)

⚠ BREAKING CHANGES

6.2.1 (2021-11-26)

Bug Fixes

6.2.0 (2021-10-13)

Features

6.1.1 (2021-07-01)

Bug Fixes

6.1.0 (2021-06-10)

Features

6.0.0 (2021-06-10)

⚠ BREAKING CHANGES

Bug Fixes

5.3.0 (2021-05-14)

Features

5.2.0 (2021-03-11)

`execute`

`postcssOptions`

`object`

`function`

`config`

`boolean`

`sourceMap`

`implementation`

`function`

CSS-in-JS and `postcss-js`