Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
postcss-sorting
Advanced tools
The postcss-sorting npm package is a tool for sorting CSS properties in a specific order. It can be used to enforce a consistent order in CSS files, which can make them more readable and maintainable. It is built as a PostCSS plugin and can be integrated into build processes to automatically sort properties according to a predefined set of rules.
Sorting CSS properties
This feature allows developers to automatically sort CSS properties within a stylesheet. The sorting can be customized through options to fit the team's or project's coding standards.
postcss([ require('postcss-sorting')({ /* options */ }) ]).process(css, { from: undefined }).then(result => { console.log(result.css); });
Sorting at-rules
With postcss-sorting, developers can also sort at-rules in a specific order. This can include sorting of media queries, font-face declarations, and other at-rules to improve the structure of the CSS.
postcss([ require('postcss-sorting')({ order: ['custom-properties', 'dollar-variables', 'declarations', 'at-rules', 'rules'] }) ]).process(css, { from: undefined }).then(result => { console.log(result.css); });
Sorting based on custom order
Developers can define a custom order for properties to be sorted. This allows for a highly personalized sorting order that can adhere to specific coding guidelines or preferences.
postcss([ require('postcss-sorting')({ 'properties-order': ['position', 'top', 'right', 'bottom', 'left'] }) ]).process(css, { from: undefined }).then(result => { console.log(result.css); });
stylelint-order is a plugin for stylelint that checks the order of content within declaration blocks. While it does not automatically sort properties, it can enforce a specific order and report when the order is incorrect.
csscomb is a coding style formatter for CSS. Similar to postcss-sorting, it can sort properties according to a specific order. However, csscomb is not a PostCSS plugin and works as a standalone tool or integrated with other code editors.
perfectionist is another PostCSS plugin that beautifies CSS by formatting it according to a consistent standard. It includes sorting capabilities but also focuses on other aspects of beautification, such as indentation and whitespace.
PostCSS plugin to sort rules content with specified order. Heavily inspired by CSSComb.
Also available as Sublime Text plugin, Atom plugin, and VS Code plugin.
$ npm install postcss-sorting
{
"sort-order": "default",
"empty-lines-between-children-rules": 0,
"empty-lines-between-media-rules": 0
}
sort-order
Set sort order. If no order is set, the plugin uses default config.
Note: Use one of predefined configs as an example.
Acceptable values:
{Array}
of rules;{Array}
of arrays of rules for groups separation;{String}
with the name of predefined config.Example: { "sort-order": [ "margin", "padding" ] }
/* before */
p {
padding: 0;
margin: 0;
}
/* after */
p {
margin: 0;
padding: 0;
}
Prefixed properties may not be in sort order. Plugin will look for unprefixed property and if it find one it will use that property order for the prefixed property. It would be better not to write prefixed properties in CSS at all and delegate this job to Autoprefixer.
Example: { "sort-order": [ "position", "-webkit-box-sizing", "box-sizing", "width" ] }
/* before */
div {
-moz-box-sizing: border-box;
width: 100%;
box-sizing: border-box;
position: absolute;
-webkit-box-sizing: border-box;
}
/* after */
div {
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
Using an array of arrays for sort-order
separate content into groups by an empty line.
Example: { "sort-order": [ [ "margin", "padding" ], [ "border", "background" ] ] }
/* before */
p {
background: none;
border: 0;
margin: 0;
padding: 0;
}
/* after */
p {
margin: 0;
padding: 0;
border: 0;
background: none;
}
Any @at-rule inside another rule can be sorted. There is some keywords:
@atrule
— any at-rule.@atrulename
— any at-rule with a specific name. Ex., @media
or @mixin
.@atrulename parameter
— any at-rule with specific name and parameter. Ex., @mixin clearfix
.Example: { "sort-order": ["@atrule", "@mixin", "border", "@some-rule hello", "@mixin clearfix"] }
/* before */
.block {
@some-rule hello;
border: none;
@mixin clearfix;
@media (min-width: 100px) {
display: none;
}
@mixin island;
}
/* after */
.block {
@media (min-width: 100px) {
display: none;
}
@mixin island;
border: none;
@some-rule hello;
@mixin clearfix;
}
>child
keyword for nested rules.
Example: { "sort-order": [ ["position", "top", "width"], ['>child'] ] }
/* before */
.block {
position: absolute;
span {
display: inline-block;
}
width: 50%;
&__element {
display: none;
}
top: 0;
}
/* after */
.block {
position: absolute;
top: 0;
width: 50%;
span {
display: inline-block;
}
&__element {
display: none;
}
}
$variable
keyword is using to sort variables like $size
.
Example: { "sort-order": [ ["$variable"], ["position", "top", "width", "height"] ] }
/* before */
.block {
position: absolute;
$width: 10px;
top: 0;
$height: 20px;
height: $height;
width: $width;
}
/* after */
.block {
$width: 10px;
$height: 20px;
position: absolute;
top: 0;
width: $width;
height: $height;
}
When there are properties that are not mentioned in the sort-order
option, they are inserted after all the sorted properties in the new group in the same order they were in the source stylesheet.
You can override this by using a “leftovers” token: ...
— just place it either in its own group or near other properties in any other group and CSSComb would place all the properties that were not sorted where the ...
was in sort-order
.
So, with this value:
{
"sort-order": [
["$variable"],
["position"],
["...", "border"],
["@mixin"],
["font"]
]
}
everything would go into five groups: variables, then group with position
, then group containing all the leftovers plus the border
, then group with all mixins and then the font
.
PostCSS Sorting have predefined configs:
default
zen
csscomb
yandex
Example: { "sort-order": "zen" }
empty-lines-between-children-rules
Set a number of empty lines between nested children rules. By default there is no empty lines between >child
rules.
Acceptable value: {Number}
of empty lines
Example: { "empty-lines-between-children-rules": 1, "sort-order": [ ["..."], [">child"] ] }
/* before */
.block {
position: absolute;
span {
display: inline-block;
}
&__element {
display: none;
}
&:hover {
top: 0;
}
}
/* after */
.block {
position: absolute;
span {
display: inline-block;
}
&__element {
display: none;
}
&:hover {
top: 0;
}
}
empty-lines-between-media-rules
Set a number of empty lines between nested media rules. By default there is no empty lines between @media
rules.
Acceptable value: {Number}
of empty lines
Example: { "empty-lines-between-media-rules": 1, "sort-order": ["@media"] }
/* before */
.block {
@media (min-width: 1px) {}
@media (min-width: 2px) {}
@media (min-width: 3px) {}
}
/* after */
.block {
@media (min-width: 1px) {}
@media (min-width: 2px) {}
@media (min-width: 3px) {}
}
If you used to use custom sorting order in CSSComb you can easily use this sorting order in PostCSS Sorting. sort-order
option in this plugin is compatible with sort-order
in CSSComb. Just copy sort-order
value from CSSComb config to PostCSS Sorting config.
See PostCSS docs for examples for your environment.
This plugin available as Sublime Text plugin, Atom plugin, and VS Code plugin.
Add Gulp PostCSS and PostCSS Sorting to your build tool:
npm install gulp-postcss postcss-sorting --save-dev
Enable PostCSS Sorting within your Gulpfile:
var postcss = require('gulp-postcss');
var sorting = require('postcss-sorting');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
sorting({ /* options */ })
])
).pipe(
gulp.dest('./css')
);
});
Add Grunt PostCSS and PostCSS Sorting to your build tool:
npm install grunt-postcss postcss-sorting --save-dev
Enable PostCSS Sorting within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-sorting')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});
If you want format stylesheets, use perfectionist or stylefmt, also a PostCSS-based tool.
Don't forget to lint stylesheets with stylelint!
This plugin is heavily inspired by CSSComb. Some code logic, tests, and documentation parts are taken from this tool.
FAQs
PostCSS plugin to keep rules and at-rules content in order.
The npm package postcss-sorting receives a total of 1,280,407 weekly downloads. As such, postcss-sorting popularity was classified as popular.
We found that postcss-sorting demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.