postcss-prefixwrap

PostCSS Prefix Wrap v0.0.2

A PostCSS plugin used to wrap css styles with a css selector used to constrain their affect on parent elements in a page for use when embedding an html interface inside an application container you do not control.

Dependencies

• Node (v6)
• NPM (v3)

Contributors

• Daniel Tedman
• Jeff Teng

Getting Started

0. Ensure all Dependencies have been resolved.

1. Install the Node module:

npm install postcss-prefixwrap

2. Load the module in your build configuration:

var prefixwrap = require("postcss-prefixwrap");

3. Instantiate the PostCSS plugin:

// This will be a class on the container div.
var wrapSelector = ".my-custom-wrap";

// Postcss config for some workflow such as webpack.
{
  postcss: [
    prefixwrap(wrapSelector)
  ]
}

4. Add the container to your markup:

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

5. Your css will now be contained:

/* 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

Code is linted using ESLint:

npm run test:lint