postcss-minify-font-values
Advanced tools
The postcss-minify-font-values npm package is designed to optimize font declarations in CSS to ensure they are as short and efficient as possible. It works by minimizing font-weight values, removing duplicate font-family names, and condensing font shorthand declarations where possible.
Minifying font-weight values
Converts named font-weight values to their numeric equivalents, reducing the size of the CSS file.
"font-weight: normal;" // Before minification
"font-weight: 400;" // After minificationRemoving duplicate font-family names
Eliminates redundant font-family names from the font-family list, making the declaration shorter.
"font-family: Arial, Arial, sans-serif;" // Before minification
"font-family: Arial, sans-serif;" // After minificationCondensing font shorthand declarations
Simplifies font shorthand declarations by removing unnecessary or default values, further reducing CSS size.
"font: italic normal bold 12px/30px Arial, sans-serif;" // Before minification
"font: italic bold 12px/30px Arial, sans-serif;" // After minificationcssnano is a modular CSS minifier that includes functionalities similar to postcss-minify-font-values as part of its optimizations. It can minify font values along with other CSS optimizations, making it a more comprehensive solution for CSS minification.
clean-css is another CSS minifier that provides optimizations for CSS files, including but not limited to font value minification. While it does not rely on PostCSS, it offers a wide range of features for reducing CSS size and improving load times.
Minify font declarations with PostCSS.
This module will try to minimise the font-family, font-weight and font shorthand
properties; it can unquote font families where necessary, detect & remove
duplicates, and cut short a declaration after it finds a keyword. For more
examples, see the tests.
h1 {
font:bold 2.2rem/.9 "Open Sans Condensed", sans-serif;
}
p {
font-family: "Helvetica Neue", Arial, sans-serif, Helvetica;
font-weight: normal;
}
h1 {
font:700 2.2rem/.9 Open Sans Condensed,sans-serif
}
p {
font-family: Helvetica Neue,Arial,sans-serif;
font-weight: 400;
}
Type: boolean
Default: false
Pass true to remove font families after the module encounters a font keyword,
for example sans-serif.
Type: boolean
Default: true
Pass false to disable the module from removing duplicated font families.
Type: boolean | (prop: string) => '' | 'font' | 'font-family' | 'font-weight'
Default: true
Pass false to disable the module from removing quotes from font families.
Note that oftentimes, this is a safe optimisation & is done safely. For more
details, see Mathias Bynens' article.
Pass a function to determine whether a css variable is one of font, font-family, and font-weight to determine whether the variable needs to remove quotes.
postcss([ require('postcss-minify-font-values') ])
See PostCSS docs for examples for your environment.
See CONTRIBUTORS.md.
MIT © Bogdan Chadkin
FAQs
Minify font declarations with PostCSS
The npm package postcss-minify-font-values receives a total of 9,090,159 weekly downloads. As such, postcss-minify-font-values popularity was classified as popular.
We found that postcss-minify-font-values 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.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
Security News
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.