{"id":41753,"library":"postcss-prefix-webpack","title":"PostCSS Prefix Webpack Plugin","description":"A webpack plugin that adds a prefix to all CSS selectors (classes and IDs) in specified files. Version 1.0.3 is the latest and only available release. It is a lightweight plugin with no updates since initial publication. Compared to similar tools like postcss-prefixer, it integrates directly as a webpack plugin rather than a PostCSS plugin, offering ignore patterns for selectors.","status":"maintenance","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/nagendertank/postcss-prefix-webpack","tags":["javascript","postcss","webpack","postcss-prefix","css"],"install":[{"cmd":"npm install postcss-prefix-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add postcss-prefix-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add postcss-prefix-webpack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package does not export ESM; use CommonJS require. No default export for ES modules.","wrong":"import PostCSSPrefix from 'postcss-prefix-webpack';","symbol":"default","correct":"const PostCSSPrefix = require('postcss-prefix-webpack');"},{"note":"It is a constructor, must be used with 'new'.","wrong":"PostCSSPrefix({...})","symbol":"PostCSSPrefix","correct":"new PostCSSPrefix({...})"}],"quickstart":{"code":"const PostCSSPrefix = require('postcss-prefix-webpack');\n\nmodule.exports = {\n  plugins: [\n    new PostCSSPrefix({\n      input: './src/style.css',\n      output: './public/style-prefix.css',\n      prefixProperties: {\n        prefix: 'myapp-',\n        ignore: [/^body/, '#keep']\n      }\n    })\n  ]\n};","lang":"javascript","description":"Shows how to add the plugin to webpack config with input/output files and prefix options."},"warnings":[{"fix":"Use PostCSS loader with postcss-prefixer instead if you need to prefix CSS in webpack bundle imports.","message":"Plugin only processes CSS files specified via input; it does not transform CSS imported into JS bundles.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For ignore, use regex for partial matching (e.g., /selector-/) or exact ID/class strings (e.g., '.ignore', '#ignore').","message":"Ignore patterns must be either regex or string selectors; strings are matched exactly.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.3':23 'add':9 'avail':29 'class':16 'compar':42 'css':14,73 'direct':52 'file':21 'id':18 'ignor':63 'initi':40 'integr':51 'javascript':67 'latest':26 'lightweight':34 'like':46 'offer':62 'pattern':64 'plugin':4,7,35,56,61 'postcss':1,48,60,68,71 'postcss-prefix':47,70 'prefix':2,11,49,72 'public':41 'rather':57 'releas':30 'selector':15,66 'similar':44 'sinc':39 'specifi':20 'tool':45 'updat':38 'version':22 'webpack':3,6,55,69","created_at":"2026-06-04T18:53:56.300596+00:00","updated_at":"2026-06-04T18:53:56.300596+00:00","problems":[{"fix":"Use 'new PostCSSPrefix({...})' instead of 'PostCSSPrefix({...})'.","cause":"Using the exported function without 'new' keyword.","error":"TypeError: PostCSSPrefix is not a constructor"},{"fix":"Provide prefixProperties object with 'prefix' and optional 'ignore' fields.","cause":"Missing or empty 'prefixProperties' option.","error":"TypeError: Cannot destructure property 'prefix' of 'this.prefixProperties' as it is undefined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/nagendertank/postcss-prefix-webpack#readme","github":"https://github.com/nagendertank/postcss-prefix-webpack","docs":null,"changelog":null,"pypi":null,"npm":"postcss-prefix-webpack","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}