{"id":15416787,"url":"https://github.com/jsimck/postcss-webpack-plugin","last_synced_at":"2026-01-07T12:04:41.275Z","repository":{"id":51058791,"uuid":"495523151","full_name":"jsimck/postcss-webpack-plugin","owner":"jsimck","description":"A webpack plugin to process generated assets with PostCSS with support for webpack 5 filesystem cache.","archived":false,"fork":false,"pushed_at":"2023-04-25T14:08:39.000Z","size":1095,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T11:45:09.636Z","etag":null,"topics":["cache","filesystem","loader","pipeline","plugin","postcss","postcss-loader","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/jsimck.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}},"created_at":"2022-05-23T18:11:29.000Z","updated_at":"2022-08-08T05:04:56.000Z","dependencies_parsed_at":"2024-10-21T16:01:08.738Z","dependency_job_id":null,"html_url":"https://github.com/jsimck/postcss-webpack-plugin","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.06896551724137934,"last_synced_commit":"3e42f232922a439552b51153fc09a8d5ce3f212c"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsimck%2Fpostcss-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsimck%2Fpostcss-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsimck%2Fpostcss-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsimck%2Fpostcss-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsimck","download_url":"https://codeload.github.com/jsimck/postcss-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245966926,"owners_count":20701759,"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","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":["cache","filesystem","loader","pipeline","plugin","postcss","postcss-loader","webpack","webpack-plugin"],"created_at":"2024-10-01T17:13:50.069Z","updated_at":"2026-01-07T12:04:41.234Z","avatar_url":"https://github.com/jsimck.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ePostCSS Webpack Plugin\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  A \u003ca href=\"https://webpack.js.org/\" target=\"_blank\"\u003ewebpack\u003c/a\u003e plugin to process generated assets with \u003ca href=\"https://postcss.org/\" target=\"_blank\"\u003ePostCSS\u003c/a\u003e with support for webpack 5.x \u003cb\u003efilesystem cache\u003c/b\u003e.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/jsimck/postcss-webpack-plugin/actions/workflows/ci.yml\"\u003e\n        \u003cimg alt=\"ci\" src=\"https://github.com/jsimck/postcss-webpack-plugin/actions/workflows/ci.yml/badge.svg?branch=main\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n        \u003cimg alt=\"Prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nServes as an alternative and also addition to `postcss-loader`. While webpack loaders are pretty efficient, they allow you to process just one file at time.\n\nThis plugin tries to solve this issue while taking great inspiration from [postcss-pipeline-webpack-plugin](https://github.com/mistakster/postcss-pipeline-webpack-plugin#readme). It allows you to run PostCSS plugins on generated (and newly emitted) assets, with support for webpack 5.x filesystem cache and ability to change content of existing assets, rather than a need to always generate new ones.\n\n## Installation\n```console\nnpm i -D postcss-webpack-plugin\n```\n\n## Usage\n\n```javascript\n// webpack.config.js\nconst { PostCSSWebpackPlugin } = require('postcss-webpack-plugin');\n\nmodule.exports = {\n  entry: 'base.css',\n  plugins: [\n    new MiniCssExtractPlugin({\n      filename: '[name].css',\n      chunkFilename: '[id].[name].css',\n    }),\n    ...(config?.plugins ?? []),\n  ],\n  module: {\n    rules: [\n      {\n        test: /.css$/i,\n        use: [MiniCssExtractPlugin.loader, 'css-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new PostCSSWebpackPlugin({\n      plugins: [require('postcss-pxtorem'), require('cssnano')],\n    }),\n  ],\n};\n```\n\n### Chaining multiple instances together\n\nFollowing example first runs css nano and pxtorem plugin son the `base.css` asset and then creates a new one with only mobile styles (using `unmq` plugin) in the second pass.\n\n```javascript\n// webpack.config.js\nconst { PostCSSWebpackPlugin } = require('postcss-webpack-plugin');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new PostCSSWebpackPlugin({\n      plugins: [require('postcss-pxtorem'), require('cssnano')],\n    }),\n    new PostCSSWebpackPlugin({\n      plugins: [\n        require('postcss-unmq')({\n          type: 'screen',\n          width: 540,\n        }),\n      ],\n      filename: '[name].mobile[ext]',\n    })\n  ]\n}\n```\n\n\n### Plugin options\n```typescript\ninterface PostCSSWebpackPluginOptions {\n  filename?: string | ((filename: string) =\u003e string);\n  filter?: RegExp | ((filename: string) =\u003e boolean);\n  implementation?: Postcss;\n  additionalAssets?: true | undefined;\n  stage?: number;\n  plugins: any[];\n}\n```\n\n#### `filename`\n\u003e `string | ((filename: string) =\u003e string)`\n\nOptional custom filename. If not provided the plugins are applied on the existing css assets without creating new ones. Can be either function or string with support for `[base], [dir], [ext], [name], [root]` template variables.\n\n#### `filter`\n\u003e `RegExp | ((filename: string) =\u003e boolean)`\n\nCustom function or RegExp to filter assets to process (defaults to `/\\.css$/`).\n\n#### `implementation`\n\u003e `Postcss`\n\nOptional custom implementation for `postcss`. Can be usefull in some projects where the default `require('postcss')` resolves to wrong version.\n\n#### `additionalAssets`\n\u003e `true | undefined`\n\nSet to true to run plugin for newly emitted assets. Should be used in combination with `filter` option in order to prevent cycles in compilation.\n\n#### `stage`\n\u003e `number`\n\nCustom plugin processAssets hook stage (defaults to `PROCESS_ASSETS_STAGE_OPTIMIZE`).\n\n#### `plugins`\n\u003e `any[]`\n\nArray of postcss plugins.\n\n## Supported versions\n- node  **14+**\n- postcss **8+**\n- webpack **5+**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsimck%2Fpostcss-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsimck%2Fpostcss-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsimck%2Fpostcss-webpack-plugin/lists"}