postcss-ordered-values
Advanced tools
Package description
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.
Readme
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,038,979 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
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.