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