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.

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.