{"_id":"@phated/postcss-loader","_rev":"2-f4d2bb1d0b18456f57dec62cac477cfe","name":"@phated/postcss-loader","dist-tags":{"latest":"4.2.0-phated.2"},"versions":{"4.2.0-phated.1":{"name":"@phated/postcss-loader","version":"4.2.0-phated.1","description":"PostCSS loader for webpack","license":"MIT","repository":{"type":"git","url":"git+https://github.com/phated/postcss-loader.git"},"author":{"name":"Andrey Sitnik","email":"andrey@sitnik.ru"},"homepage":"https://github.com/phated/postcss-loader","bugs":{"url":"https://github.com/phated/postcss-loader/issues"},"funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"main":"dist/cjs.js","engines":{"node":">= 10.13.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","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different","lint:js":"eslint --cache .","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":"npm run build","release":"standard-version","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.0.0 || ^5.0.0","postcss":"^7.0.0 || ^8.0.1"},"dependencies":{"cosmiconfig":"^7.0.0","klona":"^2.0.4","loader-utils":"^2.0.0","schema-utils":"^3.0.0","semver":"^7.3.2"},"devDependencies":{"@babel/cli":"^7.12.8","@babel/core":"^7.12.8","@babel/preset-env":"^7.12.7","@commitlint/cli":"^11.0.0","@commitlint/config-conventional":"^11.0.0","@webpack-contrib/defaults":"^6.3.0","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-jest":"^26.6.3","cross-env":"^7.0.2","cssnano":"^4.1.10","del":"^6.0.0","del-cli":"^3.0.1","eslint":"^7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-import":"^2.22.1","husky":"^4.3.0","jest":"^26.6.3","less":"^3.12.2","less-loader":"^7.1.0","lint-staged":"^10.5.2","memfs":"^3.2.0","midas":"^2.0.3","npm-run-all":"^4.1.5","postcss":"^8.1.7","postcss-dark-theme-class":"^0.5.1","postcss-import":"^13.0.0","postcss-js":"^3.0.3","postcss-nested":"^5.0.1","postcss-short":"^5.0.0","prettier":"^2.2.0","sass":"^1.29.0","sass-loader":"^10.1.0","standard-version":"^9.0.0","strip-ansi":"^6.0.0","sugarss":"^3.0.3","webpack":"^5.6.0"},"keywords":["css","postcss","postcss-runner","webpack","webpack-loader"],"gitHead":"462d2d73dd498e9ee92d2e38ab53f7a82b54fab0","_id":"@phated/postcss-loader@4.2.0-phated.1","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-qi3bdLXb7CgjjBFY/WuHQ2M4V+nh4gJdymc7OyRsnq5rWlYxskyWag8X0Brv0qUc2RQqsEWZRpdGAnqESLCM8Q==","shasum":"ee6ab970a18454d81997b1be6e7812e987d3c803","tarball":"https://registry.npmjs.org/@phated/postcss-loader/-/postcss-loader-4.2.0-phated.1.tgz","fileCount":10,"unpackedSize":58422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAiI4CRA9TVsSAnZWagAAkLUQAI7Yuw+O/YfZpebVriBb\nimtQGuOulvb8GkbgOfO0/FoXJf2NX8EIjhI3X0J+OPgX0SXFnaY31pa8gALH\nhOTg8M1m72yS3eYjET8CDBEgPjU0wESaBx0w9hPrOpP5c+jG9iLz27aVPWb0\n6sixKppGK6nx97oCMxER6iRCjNJH1ry4AEFMaz1rsagNGD4ChJQj/xDpsQ3N\nXOdtfOvBC+v0Xt1CpjXsdNMOPoOn6J4FtGBJGQvGMh3Ae53bt+bfH0lhdwg1\n/yHCQGmL9igev6bLs0CEsa6wWWhEeAXCbsy6/6VsjpLrRyrV+0ZnjW0GUN5O\nflb58dC3c5+IkDVZM1p/du9uZgeApH9xrmxFzixJ34s0y4o83A4KHOnHQWfm\niRZitNO++DK/VvhH9voDc35ek/fXfrIpXlxF4LtKGidLN942NB22c5AZEnw7\n47CgcmI242w3C6melCjnRObXDsqC1EYmbHHotUXfjmMC0RW8zdzKWrce0Py9\nKkrW+NgAsNY1z3XngU+xVtPspGwi4KMDBlc1RlCN/VqM2nHUXjozN0cYaxYW\nGKoRPdEoLr9aRoniY0PennTRSBsw9mjUvYgiaK43UuHH+YyjqJpKVK4gLrFr\njXZmRFHGxTeS6H3iHST3GpOZdkfWfKmkI0ll9JYPcRolH7W/4eq6C0LTfzZH\nlcAn\r\n=1a4n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbU5TCStgDXiRvXaUSf0+fsOelG+7ZTPZzVHW5/qDaFAiEAqXuDgKgTnwkd+Cf73V3vElaJy1G4OjYhO4HJMZdKcLM="}]},"_npmUser":{"name":"phated","email":"blaine.bublitz@gmail.com"},"directories":{},"maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-loader_4.2.0-phated.1_1610752568345_0.47078834129105984"},"_hasShrinkwrap":false},"4.2.0-phated.2":{"name":"@phated/postcss-loader","version":"4.2.0-phated.2","description":"PostCSS loader for webpack","license":"MIT","repository":{"type":"git","url":"git+https://github.com/phated/postcss-loader.git"},"author":{"name":"Andrey Sitnik","email":"andrey@sitnik.ru"},"homepage":"https://github.com/phated/postcss-loader","bugs":{"url":"https://github.com/phated/postcss-loader/issues"},"funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"main":"dist/cjs.js","engines":{"node":">= 10.13.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","lint:prettier":"prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different","lint:js":"eslint --cache .","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":"npm run build","release":"standard-version","defaults":"webpack-defaults"},"peerDependencies":{"webpack":"^4.0.0 || ^5.0.0","postcss":"^7.0.0 || ^8.0.1"},"dependencies":{"cosmiconfig":"^7.0.0","klona":"^2.0.4","loader-utils":"^2.0.0","schema-utils":"^3.0.0","semver":"^7.3.2"},"devDependencies":{"@babel/cli":"^7.12.8","@babel/core":"^7.12.8","@babel/preset-env":"^7.12.7","@commitlint/cli":"^11.0.0","@commitlint/config-conventional":"^11.0.0","@webpack-contrib/defaults":"^6.3.0","@webpack-contrib/eslint-config-webpack":"^3.0.0","babel-jest":"^26.6.3","cross-env":"^7.0.2","cssnano":"^4.1.10","del":"^6.0.0","del-cli":"^3.0.1","eslint":"^7.14.0","eslint-config-prettier":"^6.15.0","eslint-plugin-import":"^2.22.1","husky":"^4.3.0","jest":"^26.6.3","less":"^3.12.2","less-loader":"^7.1.0","lint-staged":"^10.5.2","memfs":"^3.2.0","midas":"^2.0.3","npm-run-all":"^4.1.5","postcss":"^8.1.7","postcss-dark-theme-class":"^0.5.1","postcss-import":"^13.0.0","postcss-js":"^3.0.3","postcss-nested":"^5.0.1","postcss-short":"^5.0.0","prettier":"^2.2.0","sass":"^1.29.0","sass-loader":"^10.1.0","standard-version":"^9.0.0","strip-ansi":"^6.0.0","sugarss":"^3.0.3","webpack":"^5.6.0"},"keywords":["css","postcss","postcss-runner","webpack","webpack-loader"],"gitHead":"f2a0adbd02b8eab06530445bdc01b2204953dd58","_id":"@phated/postcss-loader@4.2.0-phated.2","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-AxUMWL27X5MVVh9LIA3mMWWbWjcbzqdHFpCvJp0XFEd1wtBZpltJmowVp5MsSojuDEhKhu1dpYcsafS7CHx9zw==","shasum":"a7629f96a920946658503c0a46366c21c03eb0c8","tarball":"https://registry.npmjs.org/@phated/postcss-loader/-/postcss-loader-4.2.0-phated.2.tgz","fileCount":10,"unpackedSize":58528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB12RCRA9TVsSAnZWagAAfGQP/3cMrKhzyFssw//j/UCv\ngAp+fXP/JTi1TCpKpeEnUeu7wQSv96GEdfKrmT2WAwsrj+thN8PdJ/agtQ0M\nezFitfu62qnYhFOl4SIyMTu7M1x99nJrNvZI9Fxy2lZMbm4W8Slg8hp3RdOp\nFg8mQPi9t9KPajmTCKxI/6U1iz6Nz8+MnlDhLcX/m07HS5xPrhD8D354Quet\nrbCrlSduKvxv6QtsndQD1TNlR3j2SHW6ysYt7bY9HegQgfvkjK345WLxXBYC\nHjtQB+V4ig2PhYzL1rdOclVKVsJzdLvJYepzA54Ra+jbCKqxjgGDVH4JSr3T\nHkqDvgWgixxNEUk/EGebmwl7NKOhW1WjenhqGoBnSely9ULLsmGDhKgd7nnA\nL/sR4mESZJ8MOPuRgVgiB0o6a09wgqUfpJjLBSGCd29eIuF3H8915aO7Gwgi\nZJADhN3I2IouT67vWu5tmqjI4vdcxcaNB4uE53pC1O0gDXnbOp+0cUdkigR7\nv5nFlR6th+Qj43bmWQmE4WFCQpWNdQc0O4PzkwvceJZr8X/z1eP6TL11P1hb\nEr4ti3MIXI2RuWHZr6LQYXGQNYC/oQaKX/ZOdvvAKZAY99BQVtLsxugbgB5o\nYI7e4DAgJESqdLyeaDm7AlooJcCDiHoyL0DtnUakYh6Mr7vbAyS9vqt9i7pE\nD5OB\r\n=vOWm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+0hlaP5DQNfL/bVeogTD9LPiV3MKqV9hwV9BDpS75QAiEA6ZOZmk3dv0O/BjS3rLw0OFLx8qzDm8oA+xANZQZRA0g="}]},"_npmUser":{"name":"phated","email":"blaine.bublitz@gmail.com"},"directories":{},"maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-loader_4.2.0-phated.2_1611095441152_0.300727378237893"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-15T23:16:08.270Z","4.2.0-phated.1":"2021-01-15T23:16:08.554Z","modified":"2022-04-06T14:14:21.505Z","4.2.0-phated.2":"2021-01-19T22:30:41.257Z"},"maintainers":[{"name":"phated","email":"blaine.bublitz@gmail.com"}],"description":"PostCSS loader for webpack","homepage":"https://github.com/phated/postcss-loader","keywords":["css","postcss","postcss-runner","webpack","webpack-loader"],"repository":{"type":"git","url":"git+https://github.com/phated/postcss-loader.git"},"author":{"name":"Andrey Sitnik","email":"andrey@sitnik.ru"},"bugs":{"url":"https://github.com/phated/postcss-loader/issues"},"license":"MIT","readme":"<div align=\"center\">\n  <img \n    width=\"180\" \n    height=\"180\" \n    hspace=\"10\"\n    alt=\"PostCSS Logo\"\n    src=\"https://api.postcss.org/logo.svg\">\n  <a href=\"https://github.com/webpack/webpack\">\n    <img \n      width=\"200\" \n      height=\"200\" \n      hspace=\"10\"\n      src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg\">\n  </a>\n  <div align=\"center\">\n    <a href=\"https://evilmartians.com/?utm_source=postcss\">\n      <img \n        src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n        alt=\"Sponsored by Evil Martians\" \n        width=\"236\" \n        height=\"54\" \n        vspace=\"10\">\n    </a>\n  </div>\n</div>\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![deps][deps]][deps-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\nTo begin, you'll need to install `postcss-loader` and `postcss`:\n\n```console\nnpm install --save-dev postcss-loader postcss\n```\n\nThen add the plugin to your `webpack` config. For example:\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|                Name                 |         Type         |                Default                | Description                                  |\n| :---------------------------------: | :------------------: | :-----------------------------------: | :------------------------------------------- |\n|        [`execute`](#execute)        |     `{Boolean}`      |              `undefined`              | Enable PostCSS Parser support in `CSS-in-JS` |\n| [`postcssOptions`](#postcssOptions) | `{Object\\|Function}` | `defaults values for Postcss.process` | Set `PostCSS` options and plugins            |\n|      [`sourceMap`](#sourcemap)      |     `{Boolean}`      |          `compiler.devtool`           | Enables/Disables generation of source maps   |\n\n### `execute`\n\nType: `Boolean`\nDefault: `undefined`\n\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: `Object|Function`\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\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: `Boolean|String`\nDefault: `undefined`\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: `Boolean`\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: `Function`\nDefault: `undefined`\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**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## 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: [`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: 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 customPlugin = () => (css, result) => {\n  result.messages.push({\n    type: \"asset\",\n    file: \"sprite.svg\",\n    content: \"<svg>...</svg>\",\n  });\n};\n\nconst postcssPlugin = postcss.plugin(\"postcss-assets\", customPlugin);\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: [postcssPlugin()],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### Add dependencies\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`)\n- `file` - absolute file path (require)\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nconst customPlugin = () => (css, result) => {\n  result.messages.push({\n    type: \"dependency\",\n    file: path.resolve(__dirname, \"path\", \"to\", \"file\"),\n  });\n};\n\nconst postcssPlugin = postcss.plugin(\"postcss-assets\", customPlugin);\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: [postcssPlugin()],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\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/customPlugin\")({\n      loaderContext: api.webpackLoaderContext,\n    }),\n  ],\n});\n```\n\n**customPlugin.js**\n\n```js\nconst path = require(\"path\");\n\nconst customPlugin = (loaderContext) => (css, result) => {\n  loaderContext.webpack.addDependency(\n    path.resolve(__dirname, \"path\", \"to\", \"file\")\n  );\n};\n\nmodule.exports = postcss.plugin(\"postcss-assets\", customPlugin);\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[deps]: https://david-dm.org/webpack-contrib/postcss-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/postcss-loader\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","readmeFilename":"README.md"}