Registry / devops / postcss-pipeline-webpack-plugin

postcss-pipeline-webpack-plugin

JSON →
library6.0.0jsnpmunverified

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.

devopsweb-framework
npm install postcss-pipeline-webpack-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · POSTCSS-PIPELINE-W
P
postcss-pipeline-webpack-plugin
devopsjavascriptv6.0.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

PostCssPipelineWebpackPlugin
✓ const PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin');
✗ import PostCssPipelineWebpackPlugin from 'postcss-pipeline-webpack-plugin';
The package is CJS-only; no default ESM export. Use require().
new PostCssPipelineWebpackPlugin({...})
✓ const pipelinePlugin = new PostCssPipelineWebpackPlugin({ processor: postcss([...]) });
✗ new PostCssPipelineWebpackPlugin();
The constructor requires at least a 'processor' option (a PostCSS instance).
plugin instance usage
✓ plugins: [new PostCssPipelineWebpackPlugin({...})]
✗ module.exports.plugins = [PostCssPipelineWebpackPlugin];
You must instantiate the plugin before adding to webpack plugins array.

Sets up PostCSS pipeline to minify all extracted CSS files using csso, adding a '.min' suffix and generating source maps.

const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin'); const postcss = require('postcss'); const csso = require('postcss-csso'); module.exports = { mode: 'production', entry: './src/index.css', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'styles.css', }), new PostCssPipelineWebpackPlugin({ suffix: 'min', processor: postcss([ csso() ]), map: { inline: false }, }), ], };
Debug
Known issues
breakingv3.0.0 requires Node.js >=4.7; older Node versions are incompatible.
fix
Upgrade Node.js to >=4.7 or use postcss-pipeline-webpack-plugin@1.x.
affects: >=1.0.0 <3.0.0
breakingPlugin requires webpack 5 for v6; v5 uses webpack 4, v3 uses webpack 3.
fix
Use postcss-pipeline-webpack-plugin@5 for webpack 4, or @3 for webpack 3.
affects: >=6.0.0 <7.0.0
gotchaPostCSS instance must be passed via 'processor' option; the plugin does not create one automatically.
fix
const postcss = require('postcss'); new PostCssPipelineWebpackPlugin({ processor: postcss([plugin]) });
affects: >=1.0.0
gotchaSource map options under 'map' property are passed directly to PostCSS; ensure compatibility with your PostCSS version.
fix
Consult PostCSS source map documentation for appropriate options.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: Cannot read property 'compilation' of undefined
Plugin instance not instantiated before adding to plugins array.
fix
Ensure you use 'new PostCssPipelineWebpackPlugin({...})' and not the class itself.
Module not found: Error: Can't resolve 'postcss'
postcss is not installed as a dependency; it's a peer dependency.
fix
Run 'npm install postcss --save-dev' to install PostCSS.
TypeError: Cannot read property 'CriticalCss' of undefined
Attempting to use postcss-critical-split without proper import.
fix
Import the plugin: const criticalSplit = require('postcss-critical-split');
Upgrade
Version history
6.0.0latest on npm
Audit
Dependencies
webpackrequiredPeer dependency; plugin hooks into webpack compilation
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/mistakster/postcss-pipeline-webpack-plugin ↗
packagehttps://www.npmjs.com/package/postcss-pipeline-webpack-plugin ↗
postcss-pipeline-webpack-plugin — npm install postcss-pipeline-webpack-plugin · libregistry