{"id":20271,"library":"postcss-assets-webpack-plugin","title":"postcss-assets-webpack-plugin","description":"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.","status":"active","version":"4.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/klimashkin/postcss-assets-webpack-plugin","tags":["javascript","css","assets","webpack","postcss","postcss-loader","postcss-assets-webpack-plugin"],"install":[{"cmd":"npm install postcss-assets-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-assets-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-assets-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required at runtime for plugin registration","package":"webpack","optional":false}],"imports":[{"note":"Package is ESM-only; using require will fail. Use import or dynamic import.","wrong":"const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin')","symbol":"PostCSSAssetsPlugin","correct":"import PostCSSAssetsPlugin from 'postcss-assets-webpack-plugin'"},{"note":"The package does not ship TypeScript declarations; community types may exist.","wrong":"import type { PostCSSAssetsPlugin } from 'postcss-assets-webpack-plugin'","symbol":"PostCSSAssetsPlugin","correct":"// No type import; plugin is not typed\n// Use @types/postcss-assets-webpack-plugin if available"},{"note":"In CommonJS, the default export is under .default; direct require returns a module object.","wrong":"const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin')","symbol":"PostCSSAssetsPlugin","correct":"const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin').default"}],"quickstart":{"code":"import webpack from 'webpack';\nimport csswring from 'csswring';\nimport mqpacker from 'mqpacker';\nimport autoprefixer from 'autoprefixer';\nimport MiniCssExtractPlugin from 'mini-css-extract-plugin';\nimport PostCSSAssetsPlugin from 'postcss-assets-webpack-plugin';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\nexport default {\n  entry: './src/index.js',\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,\n          'css-loader',\n          'postcss-loader'\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new MiniCssExtractPlugin({\n      filename: devMode ? '[name].css' : '[name].[contenthash].css'\n    }),\n    new PostCSSAssetsPlugin({\n      test: /\\.css$/,\n      plugins: [\n        mqpacker(),\n        csswring({ preservehacks: true, removeallcomments: true })\n      ],\n      log: !devMode\n    })\n  ]\n}","lang":"javascript","description":"Configures Webpack to extract CSS with MiniCssExtractPlugin and then apply PostCSS plugins (mqpacker and csswring) to the bundled CSS using postcss-assets-webpack-plugin."},"warnings":[{"fix":"Ensure each plugin in the `plugins` array is a PostCSS plugin object, not a string package name.","message":"PostCSSAssetsPlugin 4.x removed support for PostCSS plugins used via string names. All plugins must be passed as PostCSS plugin functions (objects).","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade to v4+ or use an older version of the plugin with compatible Node and Webpack.","message":"Version 4.0.0 requires Node >=10 and Webpack >=4. Older versions are incompatible.","severity":"breaking","affected_versions":"<4.0.0"},{"fix":"Always provide a `test` regex that matches your CSS filenames to avoid processing failures.","message":"The `test` option is required but the plugin will log a warning if no files match. It is not deprecated but usage is mandatory.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Ensure you use MiniCssExtractPlugin in production and that CSS files are extracted before the emit hook.","message":"The plugin only processes assets emitted by MiniCssExtractPlugin. Other CSS assets (e.g., from style-loader) are ignored.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure MiniCssExtractPlugin is registered before PostCSSAssetsPlugin in the plugins array.","cause":"MiniCssExtractPlugin not used or not yet emitted assets when plugin runs.","error":"TypeError: Cannot read property 'assets' of undefined"},{"fix":"Check that all items in the `plugins` array are PostCSS plugin instances (e.g., require('mqpacker')() ).","cause":"Plugin in the `plugins` array is not a valid PostCSS plugin (e.g., a string or invalid object).","error":"Error: PostCSS plugin returned undefined. Did you forget to return a function?"},{"fix":"Run `npm install --save-dev postcss`.","cause":"PostCSS is not installed as a dependency.","error":"Module not found: Can't resolve 'postcss'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}