{"id":17967354,"url":"https://github.com/dbtedman/postcss-prefixwrap","last_synced_at":"2025-05-16T12:00:22.760Z","repository":{"id":11336739,"uuid":"69342318","full_name":"dbtedman/postcss-prefixwrap","owner":"dbtedman","description":"A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.","archived":false,"fork":false,"pushed_at":"2025-04-23T08:18:16.000Z","size":2447,"stargazers_count":74,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T09:27:13.051Z","etag":null,"topics":["bun","deno","npm","pnpm","postcss","postcss-plugin","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/dbtedman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-09-27T09:47:01.000Z","updated_at":"2025-04-23T08:18:13.000Z","dependencies_parsed_at":"2023-02-10T05:30:45.055Z","dependency_job_id":"2f189057-f1bb-4e69-903c-999e743a12e0","html_url":"https://github.com/dbtedman/postcss-prefixwrap","commit_stats":{"total_commits":654,"total_committers":16,"mean_commits":40.875,"dds":"0.44342507645259943","last_synced_commit":"380fd1a2d358454c4528a640a54a29f52bdd6c03"},"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtedman%2Fpostcss-prefixwrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtedman%2Fpostcss-prefixwrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtedman%2Fpostcss-prefixwrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbtedman%2Fpostcss-prefixwrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbtedman","download_url":"https://codeload.github.com/dbtedman/postcss-prefixwrap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527071,"owners_count":22085917,"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":["bun","deno","npm","pnpm","postcss","postcss-plugin","typescript"],"created_at":"2024-10-29T14:08:16.776Z","updated_at":"2025-05-16T12:00:22.730Z","avatar_url":"https://github.com/dbtedman.png","language":"TypeScript","readme":"# [PostCSS Prefix Wrap](https://github.com/dbtedman/postcss-prefixwrap)\n\n[![CI GitHub Pipeline](https://img.shields.io/github/actions/workflow/status/dbtedman/postcss-prefixwrap/ci.yml?branch=main\u0026style=for-the-badge\u0026logo=github\u0026label=ci)](https://github.com/dbtedman/postcss-prefixwrap/actions/workflows/ci.yml?query=branch%3Amain)\n[![SAST GitHub Pipeline](https://img.shields.io/github/actions/workflow/status/dbtedman/postcss-prefixwrap/sast.yml?branch=main\u0026style=for-the-badge\u0026logo=github\u0026label=sast)](https://github.com/dbtedman/postcss-prefixwrap/actions/workflows/sast.yml)\n[![Latest Release](https://img.shields.io/github/v/release/dbtedman/postcss-prefixwrap?style=for-the-badge\u0026logo=github\u0026color=43cc11)](https://github.com/dbtedman/postcss-prefixwrap/releases)\n[![NPM Downloads Per Week](https://img.shields.io/npm/dw/postcss-prefixwrap?color=blue\u0026logo=npm\u0026style=for-the-badge)](https://www.npmjs.com/package/postcss-prefixwrap)\n\nA [PostCSS (postcss.org)](https://postcss.org) plugin which prepends a selector to CSS styles to constrain their effect on parent\nelements in a page.\n\n| Supports                                     | Versions                          |\n| :------------------------------------------- | :-------------------------------- |\n| [Bun (bun.sh)](https://bun.sh)               | `latest`                          |\n| [Deno (deno.com)](https://deno.com)          | `v2`                              |\n| [NodeJS (nodejs.org)](https://nodejs.org)    | `v18`, `v19`, `v20`, `v21`, `v22` |\n| [PostCSS (postcss.org)](https://postcss.org) | `v7`, `v8`                        |\n\n\u003e ⚠️ PostCSS v7 support is no longer validated in automated test cases, and will be removed entirely in a future release.\n\n- [How to use this plugin?](#how-to-use-this-plugin)\n- [What options does it have?](#what-options-does-it-have)\n- [What problems can it solve?](#what-problems-can-it-solve)\n- [How to contribute?](#how-to-contribute)\n- [Is this project secure?](#is-this-project-secure)\n- [License](#license)\n\n## How to use this plugin?\n\n\u003e ⚠️ These instructions are only for this plugin. See the [PostCSS (postcss.org)](https://postcss.org) website for framework information.\n\n### Install\n\n| Package Manager or Runtime                                              | Command                                                  |\n| :---------------------------------------------------------------------- | :------------------------------------------------------- |\n| [Bun (bun.sh)](https://bun.sh)                                          | `bun add postcss-prefixwrap --dev --exact`               |\n| [Deno (deno.com)](https://deno.com)                                     | `deno add npm:postcss-prefixwrap --dev`                  |\n| [NPM (npmjs.com)](https://www.npmjs.com/package/postcss-prefixwrap)     | `npm install postcss-prefixwrap --save-dev --save-exact` |\n| [PNPM (pnpm.io)](https://pnpm.io)                                       | `pnpm add postcss-prefixwrap --save-dev --save-exact`    |\n| [Yarn (yarnpkg.com)](https://yarnpkg.com/en/package/postcss-prefixwrap) | `yarn add postcss-prefixwrap --dev --exact`              |\n\n### Configure\n\nAdd to your [PostCSS (postcss.org)](https://postcss.org) configuration.\n\n```javascript\nconst PostCSS = require(\"gulp-postcss\");\nconst PrefixWrap = require(\"postcss-prefixwrap\");\n\nPostCSS([PrefixWrap(\".my-custom-wrap\")]);\n```\n\n### Container\n\nAdd the container to your markup.\n\n```html\n\u003cdiv class=\"my-custom-wrap\"\u003e\u003c!-- Your existing markup. --\u003e\u003c/div\u003e\n```\n\n### View\n\nView your CSS, now prefix-wrapped.\n\n**Before**\n\n```css\np {\n    color: red;\n}\n\nbody {\n    font-size: 16px;\n}\n```\n\n**After**\n\n```css\n.my-custom-wrap p {\n    color: red;\n}\n\n.my-custom-wrap {\n    font-size: 16px;\n}\n```\n\n## What options does it have?\n\n```typescript\nPrefixWrap(\".my-custom-wrap\", {\n    // You may want to exclude some selectors from being prefixed, this is\n    // enabled using the `ignoredSelectors` option.\n    ignoredSelectors: [\":root\", \"#my-id\", /^\\.some-(.+)$/],\n\n    // You may want root tags, like `body` and `html` to be converted to\n    // classes, then prefixed, this is enabled using the `prefixRootTags`\n    // option.\n    // With this option, a selector like `html` will be converted to\n    // `.my-container .html`, rather than the default `.my-container`.\n    prefixRootTags: true,\n\n    // In certain scenarios, you may only want `PrefixWrap()` to wrap certain\n    // CSS files. This is done using the `whitelist` option.\n    // ⚠️ **Please note** that each item in the `whitelist` is parsed as a\n    // regular expression. This will impact how file paths are matched when you\n    // need to support both Windows and Unix like operating systems which use\n    // different path separators.\n    whitelist: [\"editor.css\"],\n\n    // In certain scenarios, you may want `PrefixWrap()` to exclude certain CSS\n    // files. This is done using the `blacklist` option.\n    // ⚠️ **Please note** that each item in the `blacklist` is parsed as a\n    // regular expression. This will impact how file paths are matched when you\n    // need to support both Windows and Unix like operating systems which use\n    // different path separators.\n    // If `whitelist` option is also included, `blacklist` will be ignored.\n    blacklist: [\"colours.css\"],\n\n    // When writing nested css rules, and using a plugin like `postcss-nested`\n    // to compile them, you will want to ensure that the nested selectors are\n    // not prefixed. This is done by defining the `nested` property and setting\n    // the value to the selector prefix being used to represent nesting, this is\n    // most likely going to be `\"\u0026\"`.\n    nested: \"\u0026\",\n});\n```\n\n## What problems can it solve?\n\nPostCSS Prefix Wrap can be used to solve multiple different problems. The following articles give some concrete examples:\n\n- [Embedding Content Within an Existing Site With PostCSS Prefix Wrap (tedman.dev)](https://tedman.dev/posts/embedding-content-within-an-existing-site-with-postcss-prefix-wrap/)\n- [Maintainable Legacy CSS With PostCSS Prefix Wrap (tedman.dev)](https://tedman.dev/posts/maintainable-legacy-css-with-postcss-prefix-wrap/)\n\n## How to contribute?\n\nRead our [Contributing Guide](CONTRIBUTING.md) to learn more about how to contribute to this project.\n\n## Is this project secure?\n\nRead our [Security Guide](SECURITY.md) to learn how security is considered during the development and operation of this\nplugin.\n\n## License\n\nThe [MIT License](./LICENSE.md) is used by this project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbtedman%2Fpostcss-prefixwrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbtedman%2Fpostcss-prefixwrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbtedman%2Fpostcss-prefixwrap/lists"}