postcss-reduce-initial
Advanced tools
Package description
The postcss-reduce-initial npm package is a PostCSS plugin that optimizes CSS by replacing properties set to their initial values with the 'initial' keyword, thus reducing the size of the CSS file. It can be particularly useful for minimizing the output of CSS preprocessors that tend to output properties with their initial values.
Replace properties with 'initial'
This feature takes CSS properties that are set to their initial values and replaces them with the 'initial' keyword. For example, 'min-width: auto;' would be replaced with 'min-width: initial;', and 'transition-duration: 0s;' would be replaced with 'transition-duration: initial;'.
".element {\n min-width: auto;\n transition-duration: 0s;\n}"cssnano is a modular minifier for CSS that includes various optimizations, including reducing initial values to the 'initial' keyword, similar to postcss-reduce-initial. However, cssnano offers a broader range of optimizations such as merging rules, minifying font values, discarding comments, and more.
postcss-normalize-whitespace is a PostCSS plugin that normalizes whitespace by removing it where possible in CSS files. While it doesn't specifically target initial values, it contributes to the overall reduction of CSS file size, which is a similar goal to postcss-reduce-initial.
postcss-merge-longhand is a plugin that merges multiple CSS properties into shorthand properties, which can reduce the size of CSS files. This is different from postcss-reduce-initial's approach of replacing properties with the 'initial' keyword but achieves a similar end of optimizing CSS output.
Readme
Reduce
initialdefinitions to the actual initial value, where possible.
With npm do:
npm install postcss-reduce-initial --save
See the data for more conversions. This data is courtesy of Mozilla.
initial valuesWhen the initial keyword is longer than the property value, it will
be converted:
h1 {
min-width: initial;
}
h1 {
min-width: 0;
}
initialWhen the initial value is smaller than the property value, it will
be converted:
h1 {
transform-box: border-box;
}
h1 {
transform-box: initial;
}
This conversion is only applied when you supply a browsers list that all support
the initial keyword; it's worth noting that Internet Explorer has no support.
Type: Array<String>
Default: undefined
It contains the Array of properties that will be ignored while reducing its value to initial.
Example : { ignore : ["min-height"] }
See the PostCSS documentation for examples for your environment.
See CONTRIBUTORS.md.
This program uses a list of CSS properties derived from data maintained my the MDN team at Mozilla and licensed under the CC0 1.0 Universal Public Domain Dedication.
MIT © Ben Briggs
FAQs
Reduce initial definitions to the actual initial value, where possible.
The npm package postcss-reduce-initial receives a total of 6,736,291 weekly downloads. As such, postcss-reduce-initial popularity was classified as popular.
We found that postcss-reduce-initial demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 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
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.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.