{"name":"postcss-loader","version":"7.1.0","description":"PostCSS loader for webpack","license":"MIT","repository":{"type":"git","url":"git+https://github.com/webpack-contrib/postcss-loader.git"},"author":{"name":"Andrey Sitnik","email":"andrey@sitnik.ru"},"homepage":"https://github.com/webpack-contrib/postcss-loader","bugs":{"url":"https://github.com/webpack-contrib/postcss-loader/issues"},"funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"main":"dist/cjs.js","engines":{"node":">= 14.15.0"},"scripts":{"start":"npm run build -- -w","clean":"del-cli dist","prebuild":"npm run clean","build":"cross-env NODE_ENV=production babel src -d dist --copy-files","commitlint":"commitlint --from=master","security":"npm audit --production","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different","lint:js":"eslint --cache .","lint:spelling":"cspell \"**/*.*\"","lint":"npm-run-all -l -p \"lint:**\"","test:only":"cross-env NODE_ENV=test jest","test:watch":"npm run test:only -- --watch","test:coverage":"npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage","pretest":"npm run lint","test":"npm run test:coverage","prepare":"husky install && npm run build","release":"standard-version"},"peerDependencies":{"postcss":"^7.0.0 || ^8.0.1","webpack":"^5.0.0"},"dependencies":{"cosmiconfig":"^8.0.0","klona":"^2.0.6","semver":"^7.3.8"},"devDependencies":{"@babel/cli":"^7.21.0","@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@commitlint/cli":"^17.4.4","@commitlint/config-conventional":"^17.4.4","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-jest":"^29.4.3","cross-env":"^7.0.3","cspell":"^6.27.0","cssnano":"^5.1.15","del":"^6.1.1","del-cli":"^5.0.0","eslint":"^8.35.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.27.5","husky":"^8.0.3","jest":"^29.4.3","less":"^4.1.3","less-loader":"^11.1.0","lint-staged":"^13.2.0","memfs":"^3.4.13","midas":"^2.0.3","npm-run-all":"^4.1.5","postcss":"^8.4.21","postcss-dark-theme-class":"^0.7.3","postcss-import":"^15.1.0","postcss-js":"^4.0.1","postcss-nested":"^6.0.1","postcss-short":"^5.0.0","prettier":"^2.8.4","sass":"^1.58.3","sass-loader":"^13.2.0","standard-version":"^9.3.2","strip-ansi":"^6.0.0","sugarss":"^4.0.1","webpack":"^5.75.0"},"keywords":["css","postcss","postcss-runner","webpack","webpack-loader"],"gitHead":"b5c55fb1c5365d8f84a24b246028569a6eb0003f","_id":"postcss-loader@7.1.0","_nodeVersion":"18.7.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-vTD2DJ8vJD0Vr1WzMQkRZWRjcynGh3t7NeoLg+Sb1TeuK7etiZfL/ZwHbaVa3M+Qni7Lj/29voV9IggnIUjlIw==","shasum":"3ba0dfddff06043f3eac7690a1d8b432264bb866","tarball":"https://registry.npmmirror.com/postcss-loader/-/postcss-loader-7.1.0.tgz","fileCount":9,"unpackedSize":50712,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChFFNM5tTPpTLUwZfC2rniNP6I0Rl/y4vR6ZuHJ7ihVgIgQvKCyJ2meAxAa/U8U+4rK8wpfsfq2I6hAwK7wMSYZX8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEvaPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsiA/+LvKVABuGOvtO3MjhggZ8UdwyMkizwmJRNz2DkUozwSmJkJEU\r\no7idGNrpDPZw0asKkfk73hrFDJub3psph7/80uGpJs4ztYOHjfA6+lf/hI/C\r\nZYw/Pxu+4070J83N1pS9gtDsaFRrz4Me3+mwakXhidMm7z5ykqJ6p/bfyWGO\r\n6WOs4LBBjII1KrSCUiteqhtGMvbJIZzugNYB2WjpS9sgS+9GzAqGFEKdRhVu\r\nEIkq3EOI/hPAXdTCdXUbuHjvtoe1RB4uBCWVHvwtMNTmloaM8XACZhxgfbBP\r\n9UR7Ec9m82PpzElIoazVGetWeZcfSoeDkI7ZhRochsgU8STKHuIbg+50Fr8F\r\nz9ampfaZrUqQrXnPfUcyJyl9z9s4GQtUKyHuXUsdn6vbGhaLdU7GzD4QjAiI\r\n4aiqpF6ONR/NIQx2XrdvkUqUfvRFN2LGKO380rJhm9rzPB0LesaM7nzw7hL1\r\n6m66cVFm/Yt5oCZJkw0U8vDrhm6JaIKlIIXUA0ftz1Ew7Ess7Hjggn23B3Ox\r\njA4aQJu+5RxCw6SPQ0DqcyoEwmGY4SrJ4L2tOWrmu8F93J8UmE4I+dpdhHyS\r\neUazcB1VQK1WtKJXP1xZblJnZycPZjBJykFnORUHPxxXcUmg2M4npUuZnrqI\r\nD1IcWMAwsj1kgRVIsmOyQ348q+lfbBNlfu8=\r\n=CcKG\r\n-----END PGP SIGNATURE-----\r\n","size":12223},"_npmUser":{"name":"evilebottnawi","email":"sheo13666q@gmail.com"},"directories":{},"maintainers":[{"name":"evilebottnawi","email":"sheo13666q@gmail.com"},{"name":"sokra","email":"tobias.koppers@googlemail.com"},{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"ai","email":"andrey@sitnik.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-loader_7.1.0_1678964367365_0.769244827858719"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-03-16T10:59:27.539Z","publish_time":1678964367539,"readme":"
\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![size][size]][size-url]\n\nWebpack chat: [![chat][chat]][chat-url]\n\nPostCSS chat: [![chat-postcss][chat-postcss]][chat-postcss-url]\n\n# postcss-loader\n\nLoader to process CSS with [`PostCSS`](https://github.com/postcss/postcss).\n\n## Getting Started\n\nYou need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.\n\nTo begin, you'll need to install `postcss-loader` and `postcss`:\n\n```console\nnpm install --save-dev postcss-loader postcss\n```\n\nor\n\n```console\nyarn add -D postcss-loader postcss\n```\n\nor\n\n```console\npnpm add -D postcss-loader postcss\n```\n\nThen add the plugin to your `webpack` config. For example:\n\n> In the following configuration the plugin [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) is used, which is not installed by default.\n\n**file.js**\n\n```js\nimport css from \"file.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\nAlternative use with [config files](#config):\n\n**postcss.config.js**\n\n```js\nmodule.exports = {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n};\n```\n\nThe loader **automatically** searches for configuration files.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\"style-loader\", \"css-loader\", \"postcss-loader\"],\n },\n ],\n },\n};\n```\n\nAnd run `webpack` via your preferred method.\n\n## Options\n\n- [`execute`](#execute)\n- [`postcssOptions`](#postcssOptions)\n- [`sourceMap`](#sourcemap)\n- [`implementation`](#implementation)\n\n### `execute`\n\nType:\n\n```ts\ntype execute = boolean;\n```\n\nDefault: `undefined`\n\nEnable PostCSS Parser support in `CSS-in-JS`.\nIf you use JS styles the [`postcss-js`](https://github.com/postcss/postcss-js) parser, add the `execute` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.style.js$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n parser: \"postcss-js\",\n },\n execute: true,\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### `postcssOptions`\n\nType:\n\n```ts\ntype postcssOptions =\n | {\n from: string;\n map: boolean | SourceMapOptions;\n parser: string | object | (() => Parser);\n stringifier: Stringifier | Syntax;\n syntax: Syntax;\n to: string;\n }\n | ((loaderContext: LoaderContext) => {\n from: string;\n map: boolean | SourceMapOptions;\n parser: string | object | (() => Parser);\n stringifier: Stringifier | Syntax;\n syntax: Syntax;\n to: string;\n });\n```\n\nDefault: `undefined`\n\nAllows to set [`PostCSS options`](https://postcss.org/api/#processoptions) and plugins.\n\nAll `PostCSS` options are supported.\nThere is the special `config` option for config files. How it works and how it can be configured is described below.\n\nWe recommend do not specify `from`, `to` and `map` options, because this can lead to wrong path in source maps.\nIf you need source maps please use the [`sourcemap`](#sourcemap) option.\n\nFor large projects, to optimize performance of the loader, it is better to provide `postcssOptions` in loader\nconfig and specify `config: false`. This approach removes the need to lookup and load external config files multiple\ntimes during compilation.\n\n#### `object`\n\nSetup `plugins`:\n\n**webpack.config.js** (**recommended**)\n\n```js\nconst myOtherPostcssPlugin = require(\"postcss-my-plugin\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n \"postcss-import\",\n [\"postcss-short\", { prefix: \"x\" }],\n require.resolve(\"my-postcss-plugin\"),\n myOtherPostcssPlugin({ myOption: true }),\n // Deprecated and will be removed in the next major release\n { \"postcss-nested\": { preserveEmpty: true } },\n ],\n },\n },\n },\n ],\n },\n};\n```\n\n**webpack.config.js** (**deprecated**, will be removed in the next major release)\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: {\n \"postcss-import\": {},\n \"postcss-short\": { prefix: \"x\" },\n },\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `syntax`:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n // Can be `string`\n syntax: \"sugarss\",\n // Can be `object`\n syntax: require(\"sugarss\"),\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `parser`:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n // Can be `string`\n parser: \"sugarss\",\n // Can be `object`\n parser: require(\"sugarss\"),\n // Can be `function`\n parser: require(\"sugarss\").parse,\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `stringifier`:\n\n**webpack.config.js**\n\n```js\nconst Midas = require(\"midas\");\nconst midas = new Midas();\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n // Can be `string`\n stringifier: \"sugarss\",\n // Can be `object`\n stringifier: require(\"sugarss\"),\n // Can be `function`\n stringifier: midas.stringifier,\n },\n },\n },\n ],\n },\n};\n```\n\n#### `function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.(css|sss)$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: (loaderContext) => {\n if (/\\.sss$/.test(loaderContext.resourcePath)) {\n return {\n parser: \"sugarss\",\n plugins: [\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n }\n\n return {\n plugins: [\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n },\n },\n },\n ],\n },\n};\n```\n\n#### `config`\n\nType:\n\n```ts\ntype config = boolean | string;\n```\n\nDefault: `true`\n\nAllows to set options using config files.\nOptions specified in the config file are combined with options passed to the loader, the loader options overwrite options from config.\n\n##### Config Files\n\nThe loader will search up the directory tree for configuration in the following places:\n\n- a `postcss` property in `package.json`\n- a `.postcssrc` file in JSON or YAML format\n- a `.postcssrc.json`, `.postcssrc.yaml`, `.postcssrc.yml`, `.postcssrc.js`, or `.postcssrc.cjs` file\n- a `postcss.config.js` or `postcss.config.cjs` CommonJS module exporting an object (**recommended**)\n\n##### Examples of Config Files\n\nUsing `object` notation:\n\n**postcss.config.js** (**recommend**)\n\n```js\nmodule.exports = {\n // You can specify any options from https://postcss.org/api/#processoptions here\n // parser: 'sugarss',\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n};\n```\n\nUsing `function` notation:\n\n**postcss.config.js** (**recommend**)\n\n```js\nmodule.exports = (api) => {\n // `api.file` - path to the file\n // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/\n // `api.webpackLoaderContext` - loader context for complex use cases\n // `api.env` - alias `api.mode` for compatibility with `postcss-cli`\n // `api.options` - the `postcssOptions` options\n\n if (/\\.sss$/.test(api.file)) {\n return {\n // You can specify any options from https://postcss.org/api/#processoptions here\n parser: \"sugarss\",\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n }\n\n return {\n // You can specify any options from https://postcss.org/api/#processoptions here\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n};\n```\n\n**postcss.config.js** (**deprecated**, will be removed in the next major release)\n\n```js\nmodule.exports = {\n // You can specify any options from https://postcss.org/api/#processoptions here\n // parser: 'sugarss',\n plugins: {\n // Plugins for PostCSS\n \"postcss-short\": { prefix: \"x\" },\n \"postcss-preset-env\": {},\n },\n};\n```\n\n##### Config Cascade\n\nYou can use different `postcss.config.js` files in different directories.\nConfig lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found.\n\n```\n|– components\n| |– component\n| | |– index.js\n| | |– index.png\n| | |– style.css (1)\n| | |– postcss.config.js (1)\n| |– component\n| | |– index.js\n| | |– image.png\n| | |– style.css (2)\n|\n|– postcss.config.js (1 && 2 (recommended))\n|– webpack.config.js\n|\n|– package.json\n```\n\nAfter setting up your `postcss.config.js`, add `postcss-loader` to your `webpack.config.js`.\nYou can use it standalone or in conjunction with `css-loader` (recommended).\n\nUse 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](https://webpack.js.org/concepts/loaders/#configuration)).\n\n**webpack.config.js** (**recommended**)\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n importLoaders: 1,\n },\n },\n \"postcss-loader\",\n ],\n },\n ],\n },\n};\n```\n\n#### `boolean`\n\nEnables/Disables autoloading config.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n config: false,\n },\n },\n },\n ],\n },\n};\n```\n\n#### String\n\nAllows to specify the path to the config file.\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, \"custom.config.js\"),\n },\n },\n },\n ],\n },\n};\n```\n\n### `sourceMap`\n\nType:\n\n```ts\ntype sourceMap = boolean;\n```\n\nDefault: depends on the `compiler.devtool` value\n\nBy default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.\nAll values enable source map generation except `eval` and `false` value.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\", options: { sourceMap: true } },\n { loader: \"postcss-loader\", options: { sourceMap: true } },\n { loader: \"sass-loader\", options: { sourceMap: true } },\n ],\n },\n ],\n },\n};\n```\n\nAlternative setup:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n devtool: \"source-map\",\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n { loader: \"postcss-loader\" },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n### `implementation`\n\nType:\n\n```ts\ntype implementation = object;\n```\n\ntype of `implementation` should be the same as [postcss.d.ts](https://github.com/postcss/postcss/blob/main/lib/postcss.d.ts)\n\nDefault: `postcss`\n\nThe special `implementation` option determines which implementation of PostCSS to use. Overrides the locally installed `peerDependency` version of `postcss`.\n\n**This option is only really useful for downstream tooling authors to ease the PostCSS 7-to-8 transition.**\n\n#### `function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"postcss-loader\",\n options: { implementation: require(\"postcss\") },\n },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n#### String\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"postcss-loader\",\n options: { implementation: require.resolve(\"postcss\") },\n },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n## Examples\n\n### SugarSS\n\nYou'll need to install `sugarss`:\n\n```console\nnpm install --save-dev sugarss\n```\n\nUsing [`SugarSS`](https://github.com/postcss/sugarss) syntax.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n parser: \"sugarss\",\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### Autoprefixer\n\nYou'll need to install `autoprefixer`:\n\n```console\nnpm install --save-dev autoprefixer\n```\n\nAdd vendor prefixes to CSS rules using [`autoprefixer`](https://github.com/postcss/autoprefixer).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"autoprefixer\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n> **Warning**\n>\n> [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. More [information](https://github.com/csstools/postcss-preset-env#autoprefixer)\n\n### PostCSS Preset Env\n\nYou'll need to install `postcss-preset-env`:\n\n```console\nnpm install --save-dev postcss-preset-env\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### CSS Modules\n\nWhat is `CSS Modules`? Please [read](https://github.com/webpack-contrib/css-loader#modules).\n\nNo additional options required on the `postcss-loader` side.\nTo make them work properly, either add the `css-loader`’s `importLoaders` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n modules: true,\n importLoaders: 1,\n },\n },\n \"postcss-loader\",\n ],\n },\n ],\n },\n};\n```\n\n### CSS-in-JS and [`postcss-js`](https://github.com/postcss/postcss-js)\n\nYou'll need to install `postcss-js`:\n\n```console\nnpm install --save-dev postcss-js\n```\n\nIf you want to process styles written in JavaScript, use the [`postcss-js`](https://github.com/postcss/postcss-js) parser.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.style.js$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n importLoaders: 2,\n },\n },\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n parser: \"postcss-js\",\n },\n execute: true,\n },\n },\n \"babel-loader\",\n ],\n },\n ],\n },\n};\n```\n\nAs result you will be able to write styles in the following way\n\n```js\nimport colors from \"./styles/colors\";\n\nexport default {\n \".menu\": {\n color: colors.main,\n height: 25,\n \"&_link\": {\n color: \"white\",\n },\n },\n};\n```\n\n> **Warning**\n>\n> If you are using Babel you need to do the following in order for the setup to work\n\n> 1. Add [`babel-plugin-add-module-exports`](https://github.com/59naga/babel-plugin-add-module-exports) to your configuration.\n> 2. You need to have only one **default** export per style module.\n\n### Extract CSS\n\nUsing [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n**webpack.config.js**\n\n```js\nconst isProductionMode = process.env.NODE_ENV === \"production\";\n\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n mode: isProductionMode ? \"production\" : \"development\",\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n isProductionMode ? MiniCssExtractPlugin.loader : \"style-loader\",\n \"css-loader\",\n \"postcss-loader\",\n ],\n },\n ],\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: isProductionMode ? \"[name].[contenthash].css\" : \"[name].css\",\n }),\n ],\n};\n```\n\n### Emit assets\n\nTo write a asset from PostCSS plugin to the webpack, need to add a message in `result.messages`.\n\nThe message should contain the following fields:\n\n- `type` = `asset` - Message type (require, should be equal `asset`)\n- `file` - file name (require)\n- `content` - file content (require)\n- `sourceMap` - sourceMap\n- `info` - asset info\n\n**webpack.config.js**\n\n```js\nconst postcssCustomPlugin = (opts = {}) => {\n return {\n postcssPlugin: \"postcss-custom-plugin\",\n Once: (root, { result }) => {\n result.messages.push({\n type: \"asset\",\n file: \"sprite.svg\",\n content: \"\",\n });\n },\n };\n};\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [postcssCustomPlugin()],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### Add dependencies, contextDependencies, buildDependencies, missingDependencies\n\nThe dependencies are necessary for webpack to understand when it needs to run recompilation on the changed files.\n\nThere are two way to add dependencies:\n\n1. (Recommended). The plugin may emit messages in `result.messages`.\n\nThe message should contain the following fields:\n\n- `type` = `dependency` - Message type (require, should be equal `dependency`, `context-dependency`, `build-dependency` or `missing-dependency`)\n- `file` - absolute file path (require)\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nconst postcssCustomPlugin = (opts = {}) => {\n return {\n postcssPlugin: \"postcss-custom-plugin\",\n Once: (root, { result }) => {\n result.messages.push({\n type: \"dependency\",\n file: path.resolve(__dirname, \"path\", \"to\", \"file\"),\n });\n },\n };\n};\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n plugins: [postcssCustomPlugin()],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\nOr you can use ready-made plugin [postcss-add-dependencies](https://www.npmjs.com/package/postcss-add-dependencies).\n\n2. Pass `loaderContext` in plugin.\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"postcss-loader\",\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, \"path/to/postcss.config.js\"),\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n**postcss.config.js**\n\n```js\nmodule.exports = (api) => ({\n plugins: [\n require(\"path/to/postcssCustomPlugin.js\")({\n loaderContext: api.webpackLoaderContext,\n }),\n ],\n});\n```\n\n**postcssCustomPlugin.js**\n\n```js\nconst path = require(\"path\");\n\nconst postcssCustomPlugin = (opts = {}) => {\n return {\n postcssPlugin: \"postcss-custom-plugin\",\n Once: (root, { result }) => {\n opts.loaderContext.addDependency(\n path.resolve(__dirname, \"path\", \"to\", \"file\")\n );\n },\n };\n};\n\npostcssCustomPlugin.postcss = true;\nmodule.exports = postcssCustomPlugin;\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/postcss-loader.svg\n[npm-url]: https://npmjs.com/package/postcss-loader\n[node]: https://img.shields.io/node/v/postcss-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/postcss-loader/workflows/postcss-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/postcss-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/postcss-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/postcss-loader\n[chat]: https://badges.gitter.im/webpack/webpack.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[chat-postcss]: https://badges.gitter.im/postcss/postcss.svg\n[chat-postcss-url]: https://gitter.im/postcss/postcss\n[size]: https://packagephobia.now.sh/badge?p=postcss-loader\n[size-url]: https://packagephobia.now.sh/result?p=postcss-loader\n"}