postcss-reduce-initial

postcss-reduce-initial

Reduce initial definitions to the actual initial value, where possible.

Install

With npm do:

npm install postcss-reduce-initial --save

Examples

See the data for more conversions. This data is courtesy of Mozilla.

Convert initial values

When the initial keyword is longer than the property value, it will be converted:

Input

h1 {
  min-width: initial;
}

Output

h1 {
  min-width: auto;
}

Convert values back to initial

When the initial value is smaller than the property value, it will be converted:

Input

h1 {
  transform-box: border-box;
}

Output

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.

API

reduceInitial([options])

options

ignore

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"] }

Usage

See the PostCSS documentation for examples for your environment.

Contributors

See CONTRIBUTORS.md.

License

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

Similar packages

Other packages similar to postcss-reduce-initial

cssnano

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

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

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.