PostCSS Inherit

Inherit plugin for PostCSS. Allows you to inherit all the rules associated with a given selector. Modeled after rework-inherit.

API

var postcss = require('postcss');
var inherit = require('postcss-inherit')

postcss([ inherit ])
  .process(css, { from: 'src/app.css', to: 'app.css' })
  .then(function (result) {
    fs.writeFileSync('app.css', result.css);
    if ( result.map ) fs.writeFileSync('app.css.map', result.map);
  });

Inherit(options{})

Option parameters:

• propertyRegExp - Regular expression to match the "inherit" at-rule. By default, it is /^(inherit|extend)s?:?$/i, so it matches "inherit", "inherits", "extend", and "extends". For example, if you only want to allow the extend keyword, set the regular expression to /^extend$/.

Examples

Regular inherit

.gray {
  color: gray;
}

.text {
  @inherit: .gray;
}

yields:

.gray,
.text {
  color: gray;
}

Multiple inherit

Inherit multiple selectors at the same time.

.gray {
  color: gray;
}

.black {
  color: black;
}

.button {
  @inherit: .gray, .black;
}

yields:

.gray,
.button {
  color: gray;
}

.black,
.button {
  color: black;
}

Placeholders

Any selector that includes a % is considered a placeholder. Placeholders will not be output in the final CSS.

%gray {
  color: gray;
}

.text {
  @inherit: %gray;
}

yields:

.text {
  color: gray;
}

Partial selectors

If you inherit a selector, all rules that include that selector will be included as well.

div button span {
  color: red;
}

div button {
  color: green;
}

button span {
  color: pink;
}

.button {
  @inherit: button;
}

.link {
  @inherit: div button;
}

yields:

div button span,
div .button span,
.link span {
  color: red;
}

div button,
div .button,
.link {
  color: green;
}

button span,
.button span {
  color: pink;
}

Chained inheritance

.button {
  background-color: gray;
}

.button-large {
  @inherit: .button;
  padding: 10px;
}

.button-large-red {
  @inherit: .button-large;
  color: red;
}

yields:

.button,
.button-large,
.button-large-red {
  background-color: gray;
}

.button-large,
.button-large-red {
  padding: 10px;
}

.button-large-red {
  color: red;
}

Media Queries

Inheriting from inside a media query will create a copy of the declarations. It will act like a "mixin". Thus, with %placeholders, you won't have to use mixins at all. Each type of media query will need its own declaration, so there will be some inevitable repetition.

.gray {
  color: gray
}

@media (min-width: 320px) {
  .button {
    @inherit: .gray;
  }
}

@media (min-width: 320px) {
  .link {
    @inherit: .gray;
  }
}

yields:

.gray {
  color: gray;
}

@media (min-width: 320px) {
  .button,
  .link {
    color: gray;
  }
}

Limitations

• When in a media query, you can only inherit rules from root, or rules contained in a media query with the same parameters.