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?

These instructions are only for this plugin. See the PostCSS website for framework information.

Install

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

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

💡 Features and Improvements

• [41] Added ignored selectors list.
• Experiment with better eslint / prettier integration.
• Package updates; some to fix audit errors, the rest to bring packages up to latest versions.