Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
postcss-extend-rule
Advanced tools
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;
}
4.0.0 (February 10, 2022)
postcss-nesting
to 7.0.1
(major)babel-core
, @babel/preset-env
to 7.5.5
(major)eslint
to 6.1.0
(major)rollup
to 1.17.0
(major)rollup-plugin-babel
to 4.3.3
(major)FAQs
Use the @extend at-rule and functional selectors in CSS
The npm package postcss-extend-rule receives a total of 67,451 weekly downloads. As such, postcss-extend-rule popularity was classified as popular.
We found that postcss-extend-rule demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.