Awesome
PostCSS Extend Rule <img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">
<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">
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-dev
Use 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 selectorignore
ignores any functional selector and moves onwarn
warns the user whenever it encounters a functional selectorthrow
throws 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-rulesignore
ignores any recursive extend at-rules and moves onwarn
warns the user whenever it encounters a recursive extend at-rulesthrow
throws 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-ruleignore
ignores any unused extend at-rule and moves onwarn
warns the user whenever it encounters an unused extend at-rulethrow
throws 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;
}