Registry / web-framework / postcss-assets-webpack-plugin

postcss-assets-webpack-plugin

JSON →
library4.1.2jsnpmunverified

A Webpack plugin that applies PostCSS transformations to CSS assets emitted by MiniCssExtractPlugin after all files are compiled. Version 4.1.2 supports Webpack 4 and 5 with PostCSS 8, requiring Node >=10. Unlike postcss-loader which processes files individually, this plugin enables whole-bundle optimizations like media query packing and minimization. It is stable with infrequent releases and no known security issues.

npm install postcss-assets-webpack-plugin
INSTALL
IMPORT
SIG · POSTCSS-ASSETS-WEB
P
postcss-assets-webpack-plugin
web-frameworkjavascriptv4.1.2
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

PostCSSAssetsPlugin
import PostCSSAssetsPlugin from 'postcss-assets-webpack-plugin'
const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin')
Package is ESM-only; using require will fail. Use import or dynamic import.
PostCSSAssetsPlugin
// No type import; plugin is not typed // Use @types/postcss-assets-webpack-plugin if available
import type { PostCSSAssetsPlugin } from 'postcss-assets-webpack-plugin'
The package does not ship TypeScript declarations; community types may exist.
PostCSSAssetsPlugin
const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin').default
const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin')
In CommonJS, the default export is under .default; direct require returns a module object.

Configures Webpack to extract CSS with MiniCssExtractPlugin and then apply PostCSS plugins (mqpacker and csswring) to the bundled CSS using postcss-assets-webpack-plugin.

import webpack from 'webpack'; import csswring from 'csswring'; import mqpacker from 'mqpacker'; import autoprefixer from 'autoprefixer'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import PostCSSAssetsPlugin from 'postcss-assets-webpack-plugin'; const devMode = process.env.NODE_ENV !== 'production'; export default { entry: './src/index.js', module: { rules: [ { test: /\.css$/, use: [ devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: devMode ? '[name].css' : '[name].[contenthash].css' }), new PostCSSAssetsPlugin({ test: /\.css$/, plugins: [ mqpacker(), csswring({ preservehacks: true, removeallcomments: true }) ], log: !devMode }) ] }
Debug
Known issues
breakingPostCSSAssetsPlugin 4.x removed support for PostCSS plugins used via string names. All plugins must be passed as PostCSS plugin functions (objects).
fix
Ensure each plugin in the `plugins` array is a PostCSS plugin object, not a string package name.
affects: >=4.0.0
breakingVersion 4.0.0 requires Node >=10 and Webpack >=4. Older versions are incompatible.
fix
Upgrade to v4+ or use an older version of the plugin with compatible Node and Webpack.
affects: <4.0.0
deprecatedThe `test` option is required but the plugin will log a warning if no files match. It is not deprecated but usage is mandatory.
fix
Always provide a `test` regex that matches your CSS filenames to avoid processing failures.
affects: >=4.0.0
gotchaThe plugin only processes assets emitted by MiniCssExtractPlugin. Other CSS assets (e.g., from style-loader) are ignored.
fix
Ensure you use MiniCssExtractPlugin in production and that CSS files are extracted before the emit hook.
affects: >=4.0.0
Errors
Common errors & fixes
TypeError: Cannot read property 'assets' of undefined
MiniCssExtractPlugin not used or not yet emitted assets when plugin runs.
fix
Ensure MiniCssExtractPlugin is registered before PostCSSAssetsPlugin in the plugins array.
Error: PostCSS plugin returned undefined. Did you forget to return a function?
Plugin in the `plugins` array is not a valid PostCSS plugin (e.g., a string or invalid object).
fix
Check that all items in the `plugins` array are PostCSS plugin instances (e.g., require('mqpacker')() ).
Module not found: Can't resolve 'postcss'
PostCSS is not installed as a dependency.
fix
Run `npm install --save-dev postcss`.
Upgrade
Version history
4.1.2latest on npm
Audit
Dependencies
webpackrequiredPeer dependency; required at runtime for plugin registration
Agent activity
4 hits · last 30 days
node
4
Resources
postcss-assets-webpack-plugin — npm install postcss-assets-webpack-plugin · libregistry