What is postcss-discard-empty?
The postcss-discard-empty npm package is a PostCSS plugin that is used to remove empty rules, selectors, and at-rules from your CSS. This helps in reducing the size of the CSS file and cleaning up any unused or empty CSS declarations that may be left over after development or refactoring.
What are postcss-discard-empty's main functionalities?
Discard empty rules
This feature removes CSS rules that have no declarations inside them. For example, 'a{}' would be removed from the CSS because it's an empty rule.
postcss([ require('postcss-discard-empty') ]).process('a{}').css
Discard empty at-rules
This feature removes at-rules that have no content. For example, '@media screen {}' would be removed because it contains no rules or declarations.
postcss([ require('postcss-discard-empty') ]).process('@media screen {}').css
Discard empty selectors
This feature removes selectors that have no declarations. In the given code, 'b{}' would be removed, leaving only the selector 'a' with its declaration.
postcss([ require('postcss-discard-empty') ]).process('a{ color: red; } b{}').css
Other packages similar to postcss-discard-empty
cssnano
cssnano is a modular minifier that includes functionalities to discard empty rules among other optimizations. It is more comprehensive than postcss-discard-empty as it performs a wide range of optimizations to reduce CSS size.
purgecss
purgecss is a tool to remove unused CSS, which can also result in the removal of empty rules if they become empty after purging unused styles. It differs from postcss-discard-empty by focusing on removing unused selectors rather than just empty ones.
Discard empty rules and values with PostCSS.
Install
With npm do:
npm install postcss-discard-empty --save
Example
For more examples see the tests.
Input
@font-face;
h1 {}
{color:blue}
h2 {color:}
h3 {color:red}
Output
h3 {color:red}
Usage
See the PostCSS documentation for
examples for your environment.
Contributors
See CONTRIBUTORS.md.
License
MIT © Ben Briggs