csstoolsPostCSS Extend Rule 
PostCSS Extend Rule lets you use the @extend at-rule and
Functional Selectors in CSS, following the speculative
CSS Extend Rules Specification.
%thick-border {
border: thick dotted red;
}
.serious-modal {
font-style: normal;
font-weight: bold;
@media (max-width: 240px) {
@extend .modal:hover;
}
}
.modal {
@extend %thick-border;
color: red;
}
.modal:hover:not(:focus) {
outline: none;
}
/* becomes */
.serious-modal {
font-style: normal;
font-weight: bold;
}
@media (max-width: 240px) {
.serious-modal:not(:focus) {
outline: none;
}
}
.modal {
border: thick dotted red;
color: red;
}
.modal:hover:not(:focus) {
outline: none;
}Usage
Add PostCSS Extend Rule to your project:
npm install postcss postcss-extend-rule --save-devUse PostCSS Extend Rule to process your CSS:
const postcssExtendRule = require('postcss-extend-rule');
postcssExtendRule.process(YOUR_CSS /*, processOptions, pluginOptions */);Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssExtendRule = require('postcss-extend-rule');
postcss([
postcssExtendRule(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Extend Rule runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
Options
name
The name option determines the at-rule name being used to extend selectors.
By default, this name is extend, meaning @extend rules are parsed.
postcssExtend({ name: 'postcss-extend' })If the name option were changed to, say, postcss-extend, then only
@postcss-extend at-rules would be parsed.
main {
@postcss-extend .some-rule;
}onFunctionalSelector
The onFunctionalSelector option determines how functional selectors should be
handled. Its options are:
remove(default) removes any functional selectorignoreignores any functional selector and moves onwarnwarns the user whenever it encounters a functional selectorthrowthrows an error if ever it encounters a functional selector
postcssExtend({ onFunctionalSelector: 'remove' /* default */ })%this-will-be-removed {}onRecursiveExtend
The onRecursiveExtend option determines how recursive extend at-rules should
be handled. Its options are:
remove(default) removes any recursive extend at-rulesignoreignores any recursive extend at-rules and moves onwarnwarns the user whenever it encounters a recursive extend at-rulesthrowthrows an error if ever it encounters a recursive extend at-rules
postcssExtend({ onRecursiveExtend: 'remove' /* default */ }).this-will-not-extend-itself {
@extend .this-will-not-extend-itself;
}onUnusedExtend
The onUnusedExtend option determines how an unused extend at-rule should be
handled. Its options are:
remove(default) removes any unused extend at-ruleignoreignores any unused extend at-rule and moves onwarnwarns the user whenever it encounters an unused extend at-rulethrowthrows an error if ever it encounters an unused extend at-rule
postcssExtend({ onUnusedExtend: 'remove' /* default */ })main {
@extend .this-selector-does-not-exist-and-will-be-removed;
}