$ npm install postcss-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;
}
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 |
---|
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;
}
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 selectorpostcssExtend({ onFunctionalSelector: 'remove' /* default */ })
%this-will-be-removed {}
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-rulespostcssExtend({ onRecursiveExtend: 'remove' /* default */ })
.this-will-not-extend-itself {
@extend .this-will-not-extend-itself;
}
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-rulepostcssExtend({ onUnusedExtend: 'remove' /* default */ })
main {
@extend .this-selector-does-not-exist-and-will-be-removed;
}
© 2010 - cnpmjs.org x YWFE | Home | YWFE