postcss-convert-values

What is postcss-convert-values?

The postcss-convert-values npm package is designed to optimize CSS size by converting values to use shorter forms where possible. It can reduce CSS file size by converting colors to their shorter hexadecimal or named format, transforming units, and simplifying values without changing their meaning.

What are postcss-convert-values's main functionalities?

Converting Length Units

Converts length values to use the shortest unit representation, removing units from zero values.

"body { margin: 0px; }" -> "body { margin: 0; }"

Converting Colors

Optimizes color values by converting them to shorter named colors or hexadecimal values where possible.

".example { color: #ffffff; }" -> ".example { color: #fff; }"

Simplifying Values

Removes unnecessary decimal places from numerical values to simplify and shorten them.

".container { padding: 50.0px 20.0px; }" -> ".container { padding: 50px 20px; }"

Other packages similar to postcss-convert-values

cssnano

cssnano is a modular CSS minifier that includes functionalities similar to postcss-convert-values as part of its optimizations. It can compress colors, remove comments, and deduplicate rules among other features, making it more comprehensive than postcss-convert-values.

clean-css

clean-css is another CSS minifier and optimizer that can perform optimizations similar to postcss-convert-values, such as shortening color values and removing unnecessary characters. It offers a wide range of optimizations and is known for its balance between speed and efficiency.

README

postcss-convert-values

Convert values with PostCSS (e.g. ms -> s)

Install

With npm do:

npm install postcss-convert-values --save

Example

This plugin reduces CSS size by converting values to use different units where possible; for example, 500ms can be represented as .5s. You can read more about these units in this article.

Input

h1 {
    font-size: 16px;
    width: 0em
}

Output

h1 {
    font-size: 1pc;
    width: 0
}

Note that this plugin only covers conversions for duration and absolute length values. For color conversions, use postcss-colormin.

API

convertValues([options])

options

length

Type: boolean Default: true

Pass false to disable conversion from px to other absolute length units, such as pc & pt & vice versa.

time

Type: boolean Default: true

Pass false to disable conversion from ms to s & vice versa.

angle

Type: boolean Default: true

Pass false to disable conversion from deg to turn & vice versa.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs