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.

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
• Ignored Selectors
• Prefix Root Tags
• File Whitelist
• File Blacklist

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"],
});

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.

Changelog

1.16.0

🔧 Maintenance

• Dependency updates