What is postcss-ordered-values?
The postcss-ordered-values npm package is a PostCSS plugin designed to optimize CSS by consistently ordering values within declarations. This can help in minimizing CSS size and improving readability and maintainability by ensuring a standardized order of values.
What are postcss-ordered-values's main functionalities?
Optimization of margin and padding values
This feature optimizes shorthand for margin and padding by collapsing redundant values. For example, if all four values of margin are the same, it simplifies it to a single value.
const postcss = require('postcss');
const orderedValues = require('postcss-ordered-values');
postcss([orderedValues()])
.process('a { margin: 1px 1px 1px 1px; }', { from: undefined })
.then(result => {
console.log(result.css);
// Output: 'a { margin: 1px; }'
});
Ordering of border values
This feature ensures the properties of borders are ordered consistently, typically width, style, and then color. This helps in maintaining a standard across your CSS files.
const postcss = require('postcss');
const orderedValues = require('postcss-ordered-values');
postcss([orderedValues()])
.process('a { border: solid 1px red; }', { from: undefined })
.then(result => {
console.log(result.css);
// Output: 'a { border: 1px solid red; }'
});
Other packages similar to postcss-ordered-values
cssnano
cssnano is a modular minifier that includes functionalities similar to postcss-ordered-values as part of its optimizations. It integrates well with other PostCSS plugins and provides a broader range of CSS optimizations beyond just ordering values.
postcss-sorting
postcss-sorting is another PostCSS plugin that focuses on sorting CSS properties in a specific order. It is similar to postcss-ordered-values but extends its functionality to include sorting of entire CSS rules in addition to just values within declarations.
postcss-ordered-values
Ensure values are ordered consistently in your CSS.
Install
With npm do:
npm install postcss-ordered-values --save
Example
Some CSS properties accept their values in an arbitrary order; for this reason,
it is entirely possible that different developers will write their values in
different orders. This module normalizes the order, making it easier for other
modules to understand which declarations are duplicates.
Input
h1 {
border: solid 1px red;
border: red solid .5em;
border: rgba(0, 30, 105, 0.8) solid 1px;
border: 1px solid red;
}
Output
h1 {
border: 1px solid red;
border: .5em solid red;
border: 1px solid rgba(0, 30, 105, 0.8);
border: 1px solid red;
}
Support List
For more examples, see the tests.
border(border-left|right|top|bottom)
box-shadow
outline
flex-flow
Usage
See the PostCSS documentation for
examples for your environment.
Contributing
Pull requests are welcome. If you add functionality, then please add unit tests
to cover it.
License
MIT © Ben Briggs