postcss-prefixwrap

PostCSS Prefix Wrap

A PostCSS plugin which prepends a selector to CSS styles to constrain their effect on parent elements in a page.

• Where do I start?
• What options does it have?
• Want to lean more?

Where do I start?

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.

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"))
);

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
});

File Whitelist

In certain scenarios, you may only want PrefixWrap() to wrap certain CSS file(s). This is done using the whitelist option.

PrefixWrap(".my-custom-wrap", {
    whitelist: ["editor.css"]
});

Want to lean more?

• 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.