Package Exports

postcss-prefixwrap

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-prefixwrap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.