PostCSS Prefix Wrap

A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.

Where do I start?

These instructions are only for this plugin, see PostCSS website for framework information.

1. Install the plugin.

Yarn:

yarn add --dev postcss-prefixwrap

NPM:

npm install --save-dev postcss-prefixwrap

2. Add to your PostCSS configuration.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var prefixwrap = require("postcss-prefixwrap"); // The require for PostCSS Prefix Wrap.

gulp.task("css", function () {
    var processors = [
        prefixwrap(".my-custom-wrap")
    ];
    return gulp.src("./src/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./dest"));
});

The above example is using Gulp.js, and is based on https://github.com/postcss/gulp-postcss README.md.

3. Add the container to your markup.

<div class="my-custom-wrap">
<!-- Your existing markup. -->
</div>

4. 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 the sausage is made.

Who built it?

Created Down Under by Daniel Tedman and Jeff Teng with contributions from around the web.