postcss-minify-selectors
Advanced tools
The postcss-minify-selectors package is a PostCSS plugin that minifies CSS selectors. It helps in reducing the size of CSS files by removing unnecessary spaces and characters from selectors, which can improve the performance of web pages.
Minify Selectors
This feature minifies CSS selectors by removing unnecessary spaces and characters. In the example, the selectors '.foo, .bar' are minified to '.foo,.bar'.
const postcss = require('postcss');
const minifySelectors = require('postcss-minify-selectors');
const css = '.foo, .bar { color: red; }';
postcss([minifySelectors])
.process(css)
.then(result => {
console.log(result.css); // Output: '.foo,.bar{color:red;}'
});Remove Redundant Selectors
This feature removes redundant selectors. In the example, the redundant '.foo' selector is removed, resulting in a cleaner and smaller CSS file.
const postcss = require('postcss');
const minifySelectors = require('postcss-minify-selectors');
const css = '.foo, .foo { color: red; }';
postcss([minifySelectors])
.process(css)
.then(result => {
console.log(result.css); // Output: '.foo{color:red;}'
});cssnano is a modular minifier based on the PostCSS ecosystem. It includes a variety of optimizations, including selector minification, which makes it a more comprehensive tool compared to postcss-minify-selectors.
clean-css is a fast and efficient CSS optimizer for Node.js. It provides a wide range of optimizations, including selector minification, similar to postcss-minify-selectors, but also offers additional features like advanced optimizations and compatibility options.
csso (CSS Optimizer) is a CSS minifier that performs structural optimizations to make CSS files smaller. It includes selector minification as one of its features, making it comparable to postcss-minify-selectors, but it also focuses on other types of optimizations.
Minify selectors with PostCSS.
Install via npm:
npm install postcss-minify-selectors --save
var postcss = require('postcss')
var selectors = require('postcss-minify-selectors');
var css = 'h1 + p, h2, h3, h2{color:blue}';
console.log(postcss(selectors()).process(css).css);
// => 'h1+p,h2,h3{color:blue}'
For more examples see the tests.
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
MIT © Ben Briggs
FAQs
Minify selectors with PostCSS.
The npm package postcss-minify-selectors receives a total of 10,255,644 weekly downloads. As such, postcss-minify-selectors popularity was classified as popular.
We found that postcss-minify-selectors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 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
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.