postcss-minify-font-values

What is postcss-minify-font-values?

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.

What are postcss-minify-font-values's main functionalities?

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 minification

Removing 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 minification

Condensing 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 minification

Other packages similar to postcss-minify-font-values

cssnano

cssnano 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

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.

README

postcss-minify-font-values

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;
}

API

minifyFontValues([options])

options

removeAfterKeyword

Type: boolean Default: false

Pass true to remove font families after the module encounters a font keyword, for example sans-serif.

removeDuplicates

Type: boolean Default: true

Pass false to disable the module from removing duplicated font families.

removeQuotes

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.

Usage

postcss([ require('postcss-minify-font-values') ])

See PostCSS docs for examples for your environment.

Contributors

See CONTRIBUTORS.md.

License

MIT © Bogdan Chadkin