A PostCSS plugin which prepends a selector to CSS styles to constrain their effect on parent elements in a page.
These instructions are only for this plugin. See the PostCSS website for framework information.
Using Yarn
yarn add postcss-prefixwrap --dev --exact
Using NPM
npm install postcss-prefixwrap --save-dev --save-exact
Add to your PostCSS configuration.
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"))
);
Add the container to your markup.
<div class="my-custom-wrap"><!-- Your existing markup. --></div>
View your CSS, now prefix-wrapped.
Before
p {
color: red;
}
body {
font-size: 16px;
}
After
.my-custom-wrap p {
color: red;
}
.my-custom-wrap {
font-size: 16px;
}
The minimal required configuration is the prefix selector, as shown in the above example.
PrefixWrap(".my-custom-wrap");
You may want to exclude some selectors from being prefixed, this is enabled using the ignoredSelectors
option.
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.
PrefixWrap(".my-container", {
prefixRootTags: true,
});
In certain scenarios, you may only want PrefixWrap()
to wrap certain CSS files. This is done using the whitelist
option.
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.
PrefixWrap(".my-custom-wrap", {
blacklist: ["colours.css"],
});
- See our Contributing Guide for details on how this repository is developed.
- See our Changelog for details on which features, improvements, and bug fixes have been implemented
- See our License for details on how you can use the code in this repository.
- See our Security Guide for details on how security is considered.