PostCSS Decrease Specificity

PostCSS plugin that decreases the specificity of given selector.

Example

.foo1 .bar1 .foo2 .bar2 {
    /* Input example */
}

.bar1 .foo2 .bar2 {
  /* Output example */
}

Complex example

tag .class1 .class2 #id .class3 a.class4:pseudo {
    /* Input example */
}

tag .class2 #id .class3 a.class4:pseudo {
  /* Output example */
}

Options

depth: Number (default: 3)

Usage

const plugin = require('postcss-decrease-specificity');
postcss([ plugin(options) ])
  .then((result) => {
     result.css // modified css
  });

Tests

$ npm test

Notes

1. ⚠️ Use this plugin with caution, it may break your design.
2. This plugin takes into consideration as depth only class selectors with descendant combinator, therefore, .a .b .c > .d tag .f{ decl:1 } will become .b .c > .d tag .f{ decl:1 }

See PostCSS docs for examples for your environment.