A PostCSS plugin that is used to wrap css styles with a css selector to constrain their affect on parent elements in a page.
Clone or download
Latest commit 0955d26 Oct 21, 2018


PostCSS Prefix Wrap

Build Status Known Vulnerabilities

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.


Using NPM

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


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")


Add the container to your markup.

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


View your CSS, now prefix-wrapped.


p {
  color: red;

body {
  font-size: 16px;


.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.