postcss-prefixwrap

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.

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

Testing

See https://travis-ci.org/dbtedman/postcss-prefixwrap for CI results, run on each commit.

Static Analysis

Linting support provided by ESLint based on rules defined in .eslintrc.yml.

npm run test:lint

Unit Tests

Code is unit tested using MochaJS.

npm run test:unit

Releasing

Based on the NPM Publishing Guide, after updating the current version, run the following command:

npm publish

---

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

Changelog

1.1.3

🐛 Bug Fixes

• [6] Selectors containing the word "body" or "html" treated as root