Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
postcss-custom-selectors
Advanced tools
Readme
npm install postcss-custom-selectors --save-dev
PostCSS Custom Selectors lets you define @custom-selector
in CSS following the Custom Selectors Specification.
@custom-selector :--heading h1, h2, h3;
article :--heading + p {
margin-top: 0;
}
/* becomes */
article :is(h1, h2, h3) + p {
margin-top: 0;
}
Add PostCSS Custom Selectors to your project:
npm install postcss postcss-custom-selectors --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssCustomSelectors = require('postcss-custom-selectors');
postcss([
postcssCustomSelectors(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Custom Selectors runs in all Node environments, with special instructions for:
The preserve
option determines whether the original notation
is preserved. By default, it is not preserved.
postcssCustomSelectors({ preserve: true })
@custom-selector :--heading h1, h2, h3;
article :--heading + p {
margin-top: 0;
}
/* becomes */
@custom-selector :--heading h1, h2, h3;
article :is(h1, h2, h3) + p {
margin-top: 0;
}
article :--heading + p {
margin-top: 0;
}
If you're using Modular CSS such as, CSS Modules, postcss-loader
or vanilla-extract
to name a few, you'll probably
notice that custom selectors are not being resolved. This happens because each file is processed separately so
unless you import the custom selector definitions in each file, they won't be resolved.
To overcome this, we recommend using the PostCSS Global Data plugin which allows you to pass a list of files that will be globally available. The plugin won't inject any extra code in the output but will provide the context needed to resolve custom selectors.
For it to run it needs to be placed before the PostCSS Custom Selectors plugin.
const postcss = require('postcss');
const postcssCustomSelectors = require('postcss-custom-selectors');
const postcssGlobalData = require('@csstools/postcss-global-data');
postcss([
postcssGlobalData({
files: [
'path/to/your/custom-selectors.css'
]
}),
postcssCustomSelectors(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
FAQs
Use Custom Selectors in CSS
The npm package postcss-custom-selectors receives a total of 5,747,766 weekly downloads. As such, postcss-custom-selectors popularity was classified as popular.
We found that postcss-custom-selectors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.