@luxiaobei1/planet-postcss-prefixwrap
v1.19.14
Published
A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.
Downloads
5
Maintainers
Readme
PostCSS Prefix Wrap
✅ 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
How to use this plugin?
These instructions are only for this plugin. See the PostCSS website for framework information.
Install
Using Yarn
yarn add postcss-prefixwrap --dev --exact
Using NPM
npm install postcss-prefixwrap --save-dev --save-exact
Configure
Add to your PostCSS configuration.
With Gulp
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
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/.
Container
Add the container to your markup.
<div class="my-custom-wrap"><!-- Your existing markup. --></div>
View
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;
}
What options does it have?
Minimal
The minimal required configuration is the prefix selector, as shown in the above example.
PrefixWrap(".my-custom-wrap");
Ignored Selectors
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-(.+)$/],
});
Prefix Root Tags
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,
});
With this option, a selector like html
will be converted to .my-container .html
, rather than the default .my-container
.
File Whitelist
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"],
});
File Blacklist
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"],
});
How to contribute?
Read our Contributing Guide to learn more about how to contribute to this project.
Is this project secure?
Read our Security Guide to learn how security is considered during the development and operation of this plugin.
How is the project structured?
Read our Architecture Document to learn how this project is structured.
License
The MIT License is used by this project.