{"id":20273,"library":"postcss-pipeline-webpack-plugin","title":"postcss-pipeline-webpack-plugin","description":"Webpack 5 plugin that processes generated CSS assets with PostCSS pipelines, enabling multi-file transformations like critical CSS extraction and minification where loaders fall short. Version 6.0.0 (latest) requires Node >=10 and webpack ^5; for webpack 4 use v5, for webpack 3 use v3. Key differentiator: processes all generated CSS files (including those from plugins like MiniCssExtractPlugin) through PostCSS plugins in a pipeline, with support for custom filters, naming (prefix, suffix, transformName), and source maps. Supports PostCSS 6, 7, 8.0.","status":"active","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mistakster/postcss-pipeline-webpack-plugin","tags":["javascript","webpack","plugin","postcss","pipeline","critical","minification"],"install":[{"cmd":"npm install postcss-pipeline-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-pipeline-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-pipeline-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin hooks into webpack compilation","package":"webpack","optional":false}],"imports":[{"note":"The package is CJS-only; no default ESM export. Use require().","wrong":"import PostCssPipelineWebpackPlugin from 'postcss-pipeline-webpack-plugin';","symbol":"PostCssPipelineWebpackPlugin","correct":"const PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin');"},{"note":"The constructor requires at least a 'processor' option (a PostCSS instance).","wrong":"new PostCssPipelineWebpackPlugin();","symbol":"new PostCssPipelineWebpackPlugin({...})","correct":"const pipelinePlugin = new PostCssPipelineWebpackPlugin({ processor: postcss([...]) });"},{"note":"You must instantiate the plugin before adding to webpack plugins array.","wrong":"module.exports.plugins = [PostCssPipelineWebpackPlugin];","symbol":"plugin instance usage","correct":"plugins: [new PostCssPipelineWebpackPlugin({...})]"}],"quickstart":{"code":"const path = require('path');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin');\nconst postcss = require('postcss');\nconst csso = require('postcss-csso');\n\nmodule.exports = {\n  mode: 'production',\n  entry: './src/index.css',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          MiniCssExtractPlugin.loader,\n          'css-loader',\n        ],\n      },\n    ],\n  },\n  plugins: [\n    new MiniCssExtractPlugin({\n      filename: 'styles.css',\n    }),\n    new PostCssPipelineWebpackPlugin({\n      suffix: 'min',\n      processor: postcss([\n        csso()\n      ]),\n      map: { inline: false },\n    }),\n  ],\n};","lang":"javascript","description":"Sets up PostCSS pipeline to minify all extracted CSS files using csso, adding a '.min' suffix and generating source maps."},"warnings":[{"fix":"Upgrade Node.js to >=4.7 or use postcss-pipeline-webpack-plugin@1.x.","message":"v3.0.0 requires Node.js >=4.7; older Node versions are incompatible.","severity":"breaking","affected_versions":">=1.0.0 <3.0.0"},{"fix":"Use postcss-pipeline-webpack-plugin@5 for webpack 4, or @3 for webpack 3.","message":"Plugin requires webpack 5 for v6; v5 uses webpack 4, v3 uses webpack 3.","severity":"breaking","affected_versions":">=6.0.0 <7.0.0"},{"fix":"const postcss = require('postcss'); new PostCssPipelineWebpackPlugin({ processor: postcss([plugin]) });","message":"PostCSS instance must be passed via 'processor' option; the plugin does not create one automatically.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consult PostCSS source map documentation for appropriate options.","message":"Source map options under 'map' property are passed directly to PostCSS; ensure compatibility with your PostCSS version.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure you use 'new PostCssPipelineWebpackPlugin({...})' and not the class itself.","cause":"Plugin instance not instantiated before adding to plugins array.","error":"TypeError: Cannot read property 'compilation' of undefined"},{"fix":"Run 'npm install postcss --save-dev' to install PostCSS.","cause":"postcss is not installed as a dependency; it's a peer dependency.","error":"Module not found: Error: Can't resolve 'postcss'"},{"fix":"Import the plugin: const criticalSplit = require('postcss-critical-split');","cause":"Attempting to use postcss-critical-split without proper import.","error":"TypeError: Cannot read property 'CriticalCss' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}