postcss-ordered-values
Advanced tools
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.
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; }'
});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 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.
Ensure values are ordered consistently in your CSS.
With npm do:
npm install postcss-ordered-values --save
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.
h1 {
border: solid 1px red;
border: red solid .5em;
border: rgba(0, 30, 105, 0.8) solid 1px;
border: 1px solid red;
}
h1 {
border: 1px solid red;
border: .5em solid red;
border: 1px solid rgba(0, 30, 105, 0.8);
border: 1px solid red;
}
For more examples, see the tests.
animation, -webkit-animationborder(border-left|right|top|bottom)box-shadowoutlineflex-flowtransition, -webkit-transitionSee the PostCSS documentation for examples for your environment.
See CONTRIBUTORS.md.
MIT © Ben Briggs
FAQs
Ensure values are ordered consistently in your CSS.
The npm package postcss-ordered-values receives a total of 9,704,530 weekly downloads. As such, postcss-ordered-values popularity was classified as popular.
We found that postcss-ordered-values demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 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.