postcss-custom-selectors
Advanced tools
Package description
The postcss-custom-selectors npm package is a plugin for PostCSS, a tool for transforming CSS with JavaScript. This package allows developers to define custom selectors in their CSS, which can be reused throughout the stylesheet. This helps in writing more maintainable and readable CSS by reducing repetition and promoting clearer structure.
Defining Custom Selectors
This feature allows you to define a custom selector, :--heading, which targets h1, h2, and h3 tags. Any style rules applied to :--heading will be applied to these elements, making it easier to manage styles for all headings in one place.
@custom-selector :--heading h1, h2, h3;
:--heading {
font-weight: bold;
}Reusing Custom Selectors in Media Queries
Custom selectors can also be reused within media queries. This example shows a custom selector :--button used within a media query to apply specific styles to all elements with the class .btn on screens wider than 768 pixels.
@custom-selector :--button .btn;
@media (min-width: 768px) {
:--button {
padding: 10px 15px;
}
}This package allows you to use a placeholder selector that can be extended within rulesets, similar to how Sass functions. It differs from postcss-custom-selectors by focusing on extending existing selectors rather than defining reusable custom selectors.
PostCSS Mixins supports defining reusable chunks of code, which can be included in other rulesets. It is similar to postcss-custom-selectors in promoting DRY (Don't Repeat Yourself) principles but uses mixins instead of custom selectors for reusability.
Readme
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:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
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;
}
FAQs
Unknown package
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
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.