Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
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 keep rules and at-rules content in order.
Also available as Sublime Text plugin, Atom plugin, and VS Code plugin.
Lint style sheets order with stylelint-order.
$ npm install postcss-sorting
The plugin has no default options. Everything is disabled by default.
order
: Specify the order of content within declaration blocks.properties-order
: Specify the order of properties within declaration blocks. Can specify empty line before property groups.unspecified-properties-position
: Specify position for properties not specified in properties-order
.clean-empty-lines
: Remove all empty lines. Runs before all other rules.rule-nested-empty-line-before
: Specify an empty line before nested rules.at-rule-nested-empty-line-before
: Specify an empty line before nested at-rules.declaration-empty-line-before
: Specify an empty line before declarations.custom-property-empty-line-before
: Specify an empty line before custom properties.dollar-variable-empty-line-before
: Specify an empty line before $
-variable declarations.comment-empty-line-before
: Specify an empty line before comments.Shared-line comments are comments which are located after a node and on the same line as a node.
a {
/* regular comment */
color: pink; /* shared-line comment */
}
Shared-line comments are always ignored in all “empty lines before” options. The plugin always looks “through” these comments. For example:
{
"declaration-empty-line-before": [true, {
except: "after-declaration"
}]
}
Technically there is a comment before bottom
. But it's a shared line comment, so plugin looks before this comment and sees top
:
a {
--prop: pink;
top: 5px; /* shared-line comment */
bottom: 15px;
}
For “order” options comments that are before node and on a separate line linked to that node. Shared-line comments are also linked to that node.
a {
top: 5px; /* shared-line comment belongs to `top` */
/* comment belongs to `bottom` */
/* comment belongs to `bottom` */
bottom: 15px; /* shared-line comment belongs to `bottom` */
}
1.x
If you have been using predefined configs, you can look at migrated predefined configs.
sort-order
was split into order
and properties-order
.
properties-order
now uses an array of objects for grouping.
sort-order
keywords to new config conversion:
1.x | 2.x |
---|---|
@atrule | { order: ["at-rules"] } or { order: [{ type: "at-rule" }] } |
@atrulename | { order: [{ type: "at-rule", name: "atrulename" }] } |
@atrulename parameter | { order: [{ type: "at-rule", name: "atrulename", parameter: "parameter" }] } |
>child | { order: ["rules"] } |
$variable | { order: ["custom-properties", "dollar-variables"] } |
“leftovers” token ... | { "unspecified-properties-position": "bottom" } |
Config for 1.x
:
{
"sort-order": [
[
"$variable"
],
[
"margin",
"padding"
],
[
"border",
"background"
],
[
'...',
"at-rule",
"@include",
"@include media",
">child"
]
]
}
Config for 2.x
:
{
"order": [
"custom-properties",
"dollar-variables",
"declarations",
"at-rules",
{
"type": "at-rule",
"name": "include"
},
{
"type": "at-rule",
"name": "include",
"parameter": "icon"
},
"rules"
],
"properties-order": [
{
"emptyLineBefore": true,
"properties": [
"margin",
"padding"
]
},
{
"emptyLineBefore": true,
"properties": [
"border",
"background"
]
}
],
"unspecified-properties-position": "bottom"
}
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/src')
);
});
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'
}
}
});
stylelint and stylelint-order help lint style sheets and let know if style sheet order is correct.
If you want format style sheets, use perfectionist or stylefmt, also a PostCSS-based tools.
This plugin is heavily inspired by stylelint. Some code logic, tests, and documentation parts are taken from this tool.
2.0.0
This release completely incompatible with the previous API. There is a lot new options. Please read the documentation.
A migration guide is available.
sort-order
split into order
and properties-order
.@include icon;
has no block.rule-nested-empty-line-before
at-rule-nested-empty-line-before
declaration-empty-line-before
custom-property-empty-line-before
dollar-variable-empty-line-before
comment-empty-line-before
clean-empty-lines
: Remove all empty lines./* postcss-sorting: on/off */
preserve-empty-lines-between-children-rules
empty-lines-between-children-rules
empty-lines-between-media-rules
empty-lines-before-comment
empty-lines-after-comment
FAQs
PostCSS plugin to keep rules and at-rules content in order.
The npm package postcss-sorting receives a total of 1,293,970 weekly downloads. As such, postcss-sorting popularity was classified as popular.
We found that postcss-sorting demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.