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 `v0.0.3`

A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page. It is for use when embedding an html interface inside an application container you do not control. Alternatively it can be used when there are multple deployments for your application and only a subset require embedding in an application you do not control.

Dependencies

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