{"id":17877068,"url":"https://github.com/radvalentin/postcss-prefix-selector","last_synced_at":"2025-05-14T16:13:50.760Z","repository":{"id":26801262,"uuid":"30259709","full_name":"RadValentin/postcss-prefix-selector","owner":"RadValentin","description":"Prefix all CSS rules with a selector","archived":false,"fork":false,"pushed_at":"2025-03-27T11:02:08.000Z","size":607,"stargazers_count":185,"open_issues_count":1,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T23:17:30.840Z","etag":null,"topics":["postcss","postcss-plugin","prefix","selector"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RadValentin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-02-03T19:12:53.000Z","updated_at":"2025-04-07T13:23:51.000Z","dependencies_parsed_at":"2024-06-18T12:35:08.716Z","dependency_job_id":"b5d29471-8c73-4b54-9109-a09fab77ee52","html_url":"https://github.com/RadValentin/postcss-prefix-selector","commit_stats":{"total_commits":137,"total_committers":24,"mean_commits":5.708333333333333,"dds":0.5109489051094891,"last_synced_commit":"86cb9b9dd50caef6e075ac88f9d716975c68a597"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadValentin%2Fpostcss-prefix-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadValentin%2Fpostcss-prefix-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadValentin%2Fpostcss-prefix-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RadValentin%2Fpostcss-prefix-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RadValentin","download_url":"https://codeload.github.com/RadValentin/postcss-prefix-selector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975329,"owners_count":21192210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["postcss","postcss-plugin","prefix","selector"],"created_at":"2024-10-28T11:44:13.881Z","updated_at":"2025-04-14T23:17:52.877Z","avatar_url":"https://github.com/RadValentin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-prefix-selector\n\n[![NPM version][npm-image]][npm-url]\n[![Test coverage][coveralls-image]][coveralls-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n[![Gitpod ready-to-code][gitpod-image]][gitpod-url]\n\n\u003e Prefix every CSS selector with a custom namespace `.a =\u003e .prefix .a`\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage with PostCSS](#usage-with-postcss)\n- [Usage with Webpack](#usage-with-webpack)\n- [Usage with Vite](#usage-with-vite)\n- [Options](#options)\n- [Maintainer](#maintainer)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Install\n\n```console\n$ npm install postcss-prefix-selector\n```\n\n## Usage with PostCSS\n\nA prefix is added before most selectors. Below is an example of how CSS will be transformed by adding a prefix called `.namespace`.\n\n```js\nconst prefixer = require('postcss-prefix-selector')\n\n// css to be processed\nconst css = fs.readFileSync(\"input.css\", \"utf8\")\n\nconst out = postcss().use(prefixer({\n  prefix: '.namespace',\n  exclude: ['.c'],\n})).process(css).css\n```\n\n```css\n/* Input */\n.a, .b {\n  color: aqua;\n}\n\n.c {\n  color: coral;\n}\n\n/* Output */\n.namespace .a, .namespace .b {\n  color: aqua;\n}\n\n.c {\n  color: coral;\n}\n```\n\nPlease note that global selectors (`html`, `body`, `:root`) cannot be prefixed so instead they will be replaced with the prefix. This behaviour can be disabled with the `skipGlobalSelectors` option.\n\n```css\n/* Input */\n:root { --bs-blue:#0d6efd; }\nhtml { padding: 0; }\nbody { margin: 0; }\n\n/* Output */\n.namespace { --bs-blue:#0d6efd; }\n.namespace { padding: 0; }\n.namespace { margin: 0; }\n```\n\nIt's also possible to customize the way prefixing is done by defining a transform function:\n\n```js\nconst out = postcss().use(prefixer({\n  prefix: '.namespace',\n  // Optional transform callback for case-by-case overrides\n  transform: function (prefix, selector, prefixedSelector, filePath, rule) {\n    if (selector === 'body') {\n      return 'body' + prefix;\n    } else {\n      return prefixedSelector;\n    }\n  }\n})).process(css).css\n```\n\n```css\n/* Input */\nbody {\n  background: red;\n}\n\n/* Output */\nbody.namespace {\n  background: red;\n}\n```\n\n## Usage with webpack\n\nUse it like you'd use any other PostCSS plugin. If you also have `autoprefixer` in your webpack config then make sure that `postcss-prefix-selector` is called first. This is needed to avoid running the prefixer twice on both standard selectors and vendor specific ones (ex: `@keyframes` and `@webkit-keyframes`).\n\n```js\nmodule: {\n  rules: [{\n    test: /\\.css$/,\n    use: [\n      require.resolve('style-loader'),\n      require.resolve('css-loader'),\n      {\n        loader: require.resolve('postcss-loader'),\n        options: {\n          postcssOptions: {\n            plugins: {\n              \"postcss-prefix-selector\": {\n                prefix: '.my-prefix',\n                transform(prefix, selector, prefixedSelector, filePath, rule) {\n                  if (selector.match(/^(html|body)/)) {\n                    return selector.replace(/^([^\\s]*)/, `$1 ${prefix}`);\n                  }\n                  \n                  if (filePath.match(/node_modules/)) {\n                    return selector; // Do not prefix styles imported from node_modules\n                  }\n                  \n                  const annotation = rule.prev();\n                  if (annotation?.type === 'comment' \u0026\u0026 annotation.text.trim() === 'no-prefix') {\n                    return selector; // Do not prefix style rules that are preceded by: /* no-prefix */\n                  }\n\n                  return prefixedSelector;\n                },\n              },\n              autoprefixer: {\n                browsers: ['last 4 versions']\n              }\n            }\n          }\n        }\n      }\n    ]\n  }]\n}\n```\n\n\n## Usage with Vite\n\nFollowing the same way of Webpack but for Vite:\n\n```js\nimport prefixer from 'postcss-prefix-selector';\nimport autoprefixer from 'autoprefixer';\n\n...\n\nexport default defineConfig({\n...\n  css: {\n    postcss: {\n      plugins: [\n        prefixer({\n          prefix: '.my-prefix',\n          transform(prefix, selector, prefixedSelector, filePath, rule) {\n            if (selector.match(/^(html|body)/)) {\n              return selector.replace(/^([^\\s]*)/, `$1 ${prefix}`);\n            }\n\n            if (filePath.match(/node_modules/)) {\n              return selector; // Do not prefix styles imported from node_modules\n            }\n\n            const annotation = rule.prev();\n            if (annotation?.type === 'comment' \u0026\u0026 annotation.text.trim() === 'no-prefix') {\n              return selector; // Do not prefix style rules that are preceded by: /* no-prefix */\n            }\n\n            return prefixedSelector;\n          },\n        }),\n\n        autoprefixer({}) // add options if needed\n      ],\n    }\n  },\n...\n});  \n```\n\n## Options\n\n| Name | Type | Description |\n|-|-|-|\n| `prefix` | `string` | This string is added before every CSS selector |\n| `exclude` | `string[]` or `RegExp[]` | It's possible to avoid prefixing some selectors by passing an array of selectors |\n| `transform` | `Function` | In cases where you may want to use the prefix differently for different selectors, it is possible to pass in a custom transform method |\n| `ignoreFiles` | `string[]` or `RegExp[]` | List of ignored files for processing |\n| `includeFiles` | `string[]` or `RegExp[]` | List of included files for processing |\n| `skipGlobalSelectors` | `boolean` |  When enabled, global selectors (`html`, `body`, `root`) won't be modified by the prefixer. Default: `false`. | \n\n## Maintainer\n\nThis project was originally created by [@jongleberry](https://github.com/jonathanong) and is being maintained by [@RadValentin](https://github.com/RadValentin). If you have any questions, feel free to ping the latter.\n\n## Contribute\n\nPlease contribute! If you have any questions or bugs, [open an issue](https://github.com/RadValentin/postcss-prefix-selector/issues/new). Or, open a pull request with a fix.\n\nThis project uses Mocha. If you submit a PR, please add appropriate tests and make sure that everything is green for your branch.\n\n## License\n\n[MIT](LICENSE) © 2015-2024 Jonathan Ong.\n\n[gitpod-image]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod\n[gitpod-url]: https://gitpod.io/#https://github.com/RadValentin/postcss-prefix-selector\n[npm-image]: https://img.shields.io/npm/v/postcss-prefix-selector.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/postcss-prefix-selector\n[coveralls-image]: https://img.shields.io/coveralls/jonathanong/postcss-prefix-selector.svg?style=flat-square\n[coveralls-url]: https://coveralls.io/r/jonathanong/postcss-prefix-selector\n[license-image]: http://img.shields.io/npm/l/postcss-prefix-selector.svg?style=flat-square\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/postcss-prefix-selector.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/postcss-prefix-selector\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradvalentin%2Fpostcss-prefix-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradvalentin%2Fpostcss-prefix-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradvalentin%2Fpostcss-prefix-selector/lists"}