A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.
npm install @worktile/planet-postcss-prefixwrapā Supports PostCSS v7 or v8



A PostCSS plugin which prepends a selector to CSS styles to constrain their effect on parent elements in a page.
- How to use this plugin?
- What options does it have?
- How to contribute?
- Is this project secure?
- How is the project structured?
- License
> These instructions are only for this plugin. See the PostCSS website for framework information.
Using Yarn
``bash`
yarn add postcss-prefixwrap --dev --exact
Using NPM
`bash`
npm install postcss-prefixwrap --save-dev --save-exact
Add to your PostCSS configuration.
#### With Gulp
`javascript
const Gulp = require("gulp");
const PostCSS = require("gulp-postcss");
const PrefixWrap = require("postcss-prefixwrap");
Gulp.task("css", () =>
Gulp.src("./src/*.css")
.pipe(PostCSS([PrefixWrap(".my-custom-wrap")]))
.pipe(Gulp.dest("./dest"))
);
`
#### With WebPack
`javascript
const PrefixWrap = require("postcss-prefixwrap");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{ loader: "css-loader", options: { importLoaders: 1 } },
{
loader: "postcss-loader",
options: {
plugins: [PrefixWrap(".my-custom-wrap")],
},
},
],
},
],
},
};
`
> Based on example from https://webpack.js.org/loaders/postcss-loader/.
Add the container to your markup.
`html`
View your CSS, now prefix-wrapped.
Before
`css
p {
color: red;
}
body {
font-size: 16px;
}
`
After
`css
.my-custom-wrap p {
color: red;
}
.my-custom-wrap {
font-size: 16px;
}
`
- Minimal
- Ignored Selectors
- Prefix Root Tags
- File Whitelist
- File Blacklist
The minimal required configuration is the prefix selector, as shown in the above example.
`javascript`
PrefixWrap(".my-custom-wrap");
You may want to exclude some selectors from being prefixed, this is enabled using the ignoredSelectors option.
`javascript`
PrefixWrap(".my-custom-wrap", {
ignoredSelectors: [":root", "#my-id", /^\.some-(.+)$/],
});
You may want root tags, like body and html to be converted to classes, then prefixed, this is enabled using the prefixRootTags option.
`javascript`
PrefixWrap(".my-container", {
prefixRootTags: true,
});
With this option, a selector like html will be converted to .my-container .html, rather than the default .my-container.
In certain scenarios, you may only want PrefixWrap() to wrap certain CSS files. This is done using the whitelist option.
`javascript`
PrefixWrap(".my-custom-wrap", {
whitelist: ["editor.css"],
});
In certain scenarios, you may want PrefixWrap() to exclude certain CSS files. This is done using the blacklist option.
> If whitelist option is also included, blacklist will be ignored.
`javascript``
PrefixWrap(".my-custom-wrap", {
blacklist: ["colours.css"],
});
Read our Contributing Guide to learn more about how to contribute to this project.
Read our Security Guide to learn how security is considered during the development and operation of this plugin.
Read our Architecture Document to learn how this project is structured.
The MIT License is used by this project.