postcss-prefixwrap

PostCSS Prefix Wrap v0.2.2

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

Is it open?

Yes, it is released under the MIT License, See LICENSE.md.

Where do I start?

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

1. Install the plugin.

npm install --save-dev postcss-prefixwrap

2. Add to your PostCSS configuration.

// Example using Gulp.js, based on https://github.com/postcss/gulp-postcss README.md.

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

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 learn more?

See our CONTRIBUTING.md guide for information regarding:

• project contributors
• dependencies
• testing
• releasing