{"id":31733360,"url":"https://github.com/webpack/postcss-loader","last_synced_at":"2026-02-15T21:16:36.313Z","repository":{"id":21445228,"uuid":"24763574","full_name":"webpack/postcss-loader","owner":"webpack","description":"PostCSS loader for webpack","archived":false,"fork":false,"pushed_at":"2025-10-07T14:10:52.000Z","size":4097,"stargazers_count":2850,"open_issues_count":3,"forks_count":208,"subscribers_count":44,"default_branch":"main","last_synced_at":"2025-10-08T12:22:22.675Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"open_collective":"webpack"}},"created_at":"2014-10-03T15:29:46.000Z","updated_at":"2025-10-07T14:10:55.000Z","dependencies_parsed_at":"2024-02-05T12:31:20.768Z","dependency_job_id":"86cbbc70-82ac-4b68-976d-a0ea64cd4035","html_url":"https://github.com/webpack/postcss-loader","commit_stats":{"total_commits":545,"total_committers":96,"mean_commits":5.677083333333333,"dds":0.6807339449541284,"last_synced_commit":"8024e67c7b57c3656063f50465d924a24ec796ce"},"previous_names":["postcss/postcss-loader","webpack/postcss-loader","webpack-contrib/postcss-loader"],"tags_count":87,"template":false,"template_full_name":null,"purl":"pkg:github/webpack/postcss-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fpostcss-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fpostcss-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fpostcss-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fpostcss-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack","download_url":"https://codeload.github.com/webpack/postcss-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack%2Fpostcss-loader/sbom","scorecard":{"id":741749,"data":{"date":"2025-07-28","repo":{"name":"github.com/webpack-contrib/postcss-loader","commit":"b29fde3deda7d7a00a104a33f288e1fc2fa0b56f"},"scorecard":{"version":"v5.2.1-26-g4feedb85","commit":"4feedb857ab8d82158aa9774bf8054df41992180"},"score":6.1,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":5,"reason":"6 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":10,"reason":"GitHub workflow tokens follow principle of least privilege","details":["Info: topLevel 'contents' permission set to 'read': .github/workflows/dependency-review.yml:5","Info: topLevel 'contents' permission set to 'read': .github/workflows/nodejs.yml:14","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":7,"reason":"Found 23/29 approved changesets -- score normalized to 7","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":4,"reason":"dependency not pinned by hash detected -- score normalized to 4","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/dependency-review.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/dependency-review.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/nodejs.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/nodejs.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:97: update your workflow using https://app.stepsecurity.io/secureworkflow/webpack-contrib/postcss-loader/nodejs.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/nodejs.yml:92","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   2 out of   3 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 26 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":8,"reason":"2 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/4feedb857ab8d82158aa9774bf8054df41992180/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T17:37:52.369Z","repository_id":21445228,"created_at":"2025-08-22T17:37:52.369Z","updated_at":"2025-08-22T17:37:52.369Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000783,"owners_count":26082906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-09T08:24:44.920Z","updated_at":"2025-12-25T12:37:13.886Z","avatar_url":"https://github.com/webpack.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg \n    width=\"180\" \n    height=\"180\" \n    hspace=\"10\"\n    alt=\"PostCSS Logo\"\n    src=\"https://api.postcss.org/logo.svg\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg \n      width=\"200\" \n      height=\"200\" \n      hspace=\"10\"\n      src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg\"\u003e\n  \u003c/a\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://evilmartians.com/?utm_source=postcss\"\u003e\n      \u003cimg \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\"\u003e\n    \u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\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 discussion: [![discussion][discussion]][discussion-url]\n\nPostCSS chat: [![chat-postcss][chat-postcss]][chat-postcss-url]\n\n# postcss-loader\n\nA loader to process CSS using [`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 loader to your `webpack` configuration. For example:\n\n\u003e 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\nFinally, run `webpack` using the method you normally use (e.g., via CLI or an npm script).\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 for `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          { loader: \"css-loader\" },\n          {\n            loader: \"postcss-loader\",\n            options: {\n              postcssOptions: { parser: \"postcss-js\" },\n              execute: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n### `postcssOptions`\n\nSee the file [`./src/config.d.ts`](./src/config.d.ts).\n\nType:\n\n```ts\nimport { type Config as PostCSSConfig } from \"postcss-load-config\";\nimport { type LoaderContext } from \"webpack\";\n\ntype PostCSSLoaderContext = LoaderContext\u003cPostCSSConfig\u003e;\n\ninterface PostCSSLoaderAPI {\n  mode: PostCSSLoaderContext[\"mode\"];\n  file: PostCSSLoaderContext[\"resourcePath\"];\n  webpackLoaderContext: PostCSSLoaderContext;\n  env: PostCSSLoaderContext[\"mode\"];\n  options: PostCSSConfig;\n}\n\nexport type PostCSSLoaderOptions =\n  | PostCSSConfig\n  | ((api: PostCSSLoaderAPI) =\u003e PostCSSConfig);\n```\n\nDefault: `undefined`\n\nAllows you 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 instead.\n\nFor large projects, to optimize performance of the loader, it is better to provide `postcssOptions` in loader config and specify `config: false`.\nThis approach removes the need to lookup and load external config files multiple times 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: { \"postcss-import\": {}, \"postcss-short\": { prefix: \"x\" } },\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\nSetup `syntax`:\n\n**webpack.config.js**\n\n\u003c!-- eslint-skip --\u003e\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\u003c!-- eslint-skip --\u003e\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\u003c!-- eslint-skip --\u003e\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) =\u003e {\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 you 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) =\u003e {\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 \u0026\u0026 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 `postcss-loader` **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          { loader: \"css-loader\", options: { importLoaders: 1 } },\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: { postcssOptions: { config: false } },\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(\"node: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\n`SugarSS` is a whitespace-based syntax for PostCSS.\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          { loader: \"css-loader\", options: { importLoaders: 1 } },\n          {\n            loader: \"postcss-loader\",\n            options: { postcssOptions: { parser: \"sugarss\" } },\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\nAutomatically add 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          { loader: \"css-loader\", options: { importLoaders: 1 } },\n          {\n            loader: \"postcss-loader\",\n            options: {\n              postcssOptions: {\n                plugins: [\n                  [\n                    \"autoprefixer\",\n                    {\n                      // Autoprefixer options (optional)\n                    },\n                  ],\n                ],\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n\u003e [!WARNING]\n\u003e\n\u003e [`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          { loader: \"css-loader\", options: { importLoaders: 1 } },\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\n\u003e What are `CSS Modules`? Please [read here](https://github.com/webpack/css-loader#modules).\n\nNo additional options required on the `postcss-loader` side to support CSS Modules.\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: { modules: true, importLoaders: 1 },\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\nTo process styles written in JavaScript, you can use `postcss-js` as the parser.\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          { loader: \"css-loader\", options: { importLoaders: 2 } },\n          {\n            loader: \"postcss-loader\",\n            options: {\n              postcssOptions: { parser: \"postcss-js\" },\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\": { color: colors.main, height: 25, \"\u0026_link\": { color: \"white\" } },\n};\n```\n\n\u003e [!WARNING]\n\u003e\n\u003e If you are using Babel you need to do the following in order for the setup to work\n\u003e\n\u003e 1. Add [`babel-plugin-add-module-exports`](https://github.com/59naga/babel-plugin-add-module-exports) to your configuration.\n\u003e 2. You need to have only one **default** export per style module.\n\n### Extract CSS\n\nTo extract CSS into separate files, use [`mini-css-extract-plugin`](https://github.com/webpack/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\u003e 💡 Use this setup to extract and cache CSS in production while keeping fast style injection during development.\n\n### Emit assets\n\nTo emit an 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 = {}) =\u003e ({\n  postcssPlugin: \"postcss-custom-plugin\",\n  Once: (root, { result }) =\u003e {\n    result.messages.push({\n      type: \"asset\",\n      file: \"sprite.svg\",\n      content: \"\u003csvg\u003e...\u003c/svg\u003e\",\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: { postcssOptions: { plugins: [postcssCustomPlugin()] } },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n\u003e ℹ️ This allows your plugin to generate additional files as part of the build process, and Webpack will handle them like any other emitted asset.\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(\"node:path\");\n\nconst postcssCustomPlugin = (opts = {}) =\u003e ({\n  postcssPlugin: \"postcss-custom-plugin\",\n  Once: (root, { result }) =\u003e {\n    result.messages.push({\n      type: \"dependency\",\n      file: path.resolve(__dirname, \"path\", \"to\", \"file\"),\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: { postcssOptions: { plugins: [postcssCustomPlugin()] } },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n\u003e 💡 You can use ready-made plugin [postcss-add-dependencies](https://www.npmjs.com/package/postcss-add-dependencies) to simplify this process.\n\n2. Pass `loaderContext` in plugin (for advanced setups).\n\n**webpack.config.js**\n\n```js\nconst path = require(\"node: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\u003e ⚠️ Use this approach only when managing dependencies via custom PostCSS configurations with dynamic imports or external files.\n\n**postcss.config.js**\n\nPass the `webpackLoaderContext` through the PostCSS `api` object:\n\n```js\nmodule.exports = (api) =\u003e ({\n  plugins: [\n    require(\"path/to/postcssCustomPlugin.js\")({\n      loaderContext: api.webpackLoaderContext,\n    }),\n  ],\n});\n```\n\n**postcssCustomPlugin.js**\n\nRegister a file dependency using `loaderContext.addDependency`:\n\n```js\nconst path = require(\"node:path\");\n\nconst postcssCustomPlugin = (opts = {}) =\u003e ({\n  postcssPlugin: \"postcss-custom-plugin\",\n  Once: (root, { result }) =\u003e {\n    opts.loaderContext.addDependency(\n      path.resolve(__dirname, \"path\", \"to\", \"file\"),\n    );\n  },\n});\n\npostcssCustomPlugin.postcss = true;\n\nmodule.exports = postcssCustomPlugin;\n```\n\n\u003e ✅ This method is ideal when you want to dynamically declare dependencies without relying on result.messages, especially in more complex setups or shared plugin configurations.\n\n## Contributing\n\nWe welcome all contributions!\nIf you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.\n\n[CONTRIBUTING](https://github.com/webpack/postcss-loader?tab=contributing-ov-file#contributing)\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/postcss-loader/workflows/postcss-loader/badge.svg\n[tests-url]: https://github.com/webpack/postcss-loader/actions\n[cover]: https://codecov.io/gh/webpack/postcss-loader/branch/main/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack/postcss-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\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","funding_links":["https://opencollective.com/webpack"],"categories":["HarmonyOS","JavaScript"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fpostcss-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack%2Fpostcss-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack%2Fpostcss-loader/lists"}