postcss-prefixwrap

PostCSS Prefix Wrap v0.1.0

A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.

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 --save-dev 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

Changelog

0.1.0

💡 Features and Improvements

• Add support for top level combined selectors containing our container class