PostCSS Inherit

      

---

title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo.svg">

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

API

``js
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);
});
`

$3

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

$3

`css
.gray {
color: gray;
}

.text {
@inherit: .gray;
}
`

yields:

`css
.gray,
.text {
color: gray;
}
`

$3

Inherit multiple selectors at the same time.

`css
.gray {
color: gray;
}

.black {
color: black;
}

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

yields:

`css
.gray,
.button {
color: gray;
}

.black,
.button {
color: black;
}
`

$3

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

`css
%gray {
color: gray;
}

.text {
@inherit: %gray;
}
`

yields:

`css
.text {
color: gray;
}
`

$3

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

`css
div button span {
color: red;
}

div button {
color: green;
}

button span {
color: pink;
}

.button {
@inherit: button;
}

.link {
@inherit: div button;
}
`

yields:

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

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

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

$3

`css
.button {
background-color: gray;
}

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

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

yields:

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

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

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

$3

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.

`css
.gray {
color: gray
}

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

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

yields:

`css
.gray {
color: gray;
}

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

$3

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