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 which prepends a selector to CSS styles to constrain their effect on parent elements in a page.

Where do I start?

These instructions are only for this plugin. See the PostCSS website for framework information.

Install

Using NPM

npm install postcss-prefixwrap --save-dev --save-exact

Configure

Add to your PostCSS configuration.

const Gulp = require("gulp");
const PostCSS = require("gulp-postcss");
const PrefixWrap = require("postcss-prefixwrap");

Gulp.task("css", () =>
    Gulp.src("./src/*.css")
        .pipe(PostCSS([PrefixWrap(".my-custom-wrap")]))
        .pipe(Gulp.dest("./dest"))
);

Container

Add the container to your markup.

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

View

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 this repository is developed.
See our Changelog for details on which features, improvements, and bug fixes have been implemented
See our License for details on how you can use the code in this repository.
See our Security Guide for details on how security is considered.