A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.
Clone or download
Latest commit 0955d26 Oct 21, 2018

README.md

PostCSS Prefix Wrap

Build Status Known Vulnerabilities

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.