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

💡 Features and Improvements

• [28] PostCSS Should be a Peer Dependency not Dependency
• [29] Use Modern JS (ES6+)
• [30] Include Current Node Versions in Testing
• Prettier
• Project cleanup.