Security News
Bun 1.2 Released with 90% Node.js Compatibility and Built-in S3 Object Support
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
css-declaration-sorter
Advanced tools
Sorts CSS declarations fast and automatically in a certain order.
The css-declaration-sorter npm package is a tool used to automatically sort the declarations within CSS rulesets in a consistent order. It can be integrated into build processes to ensure that CSS is organized according to a specific order, which can make the CSS easier to read and maintain. It can also potentially lead to better compression when minifying CSS files.
Sorting CSS declarations
This feature sorts the declarations within a CSS rule based on the specified order, such as 'smacss', 'concentric-css', or 'alphabetical'. The code sample shows how to use css-declaration-sorter with PostCSS to sort the declarations in a given CSS string.
const postcss = require('postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
postcss([cssDeclarationSorter({ order: 'smacss' })])
.process('a { color: yellow; z-index: 2; }')
.then(result => console.log(result.css));
Integration with build tools
css-declaration-sorter can be integrated with build tools like Gulp to automatically sort CSS files during the build process. The code sample demonstrates how to set up a Gulp task that processes CSS files with css-declaration-sorter using PostCSS.
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
gulp.task('css', function () {
return gulp.src('src/*.css')
.pipe(postcss([cssDeclarationSorter({ order: 'alphabetical' })]))
.pipe(gulp.dest('dist'));
});
postcss-sorting is similar to css-declaration-sorter in that it sorts CSS properties according to a specified order. However, it also allows for sorting at-rules and rules within CSS files, providing a more comprehensive sorting capability.
stylelint-order is a plugin for stylelint that checks the order of content within declaration blocks. While it does not automatically sort the CSS, it can enforce a specific order and is often used in conjunction with stylelint to maintain code quality.
perfectionist is a PostCSS plugin that not only sorts declarations but also beautifies CSS with consistent spacing and syntax. It offers a more stylistic approach to organizing CSS compared to css-declaration-sorter, which focuses solely on sorting declarations.
A Node.js module and PostCSS plugin to sort CSS, SCSS or Less declarations based on their property names. Ensuring styling is organized, more consistent and in order... The goal of this package is to sort the source code of a project in the build process or to decrease the distributed CSS gzipped size.
Check out the Prettier plugin for usage with a variety of file formats.
Input:
body {
display: block;
animation: none;
color: #C55;
border: 0;
}
Output:
body {
animation: none;
border: 0;
color: #C55;
display: block;
}
Alphabetical
alphabetical
Default, order in a simple alphabetical manner from a - z.
SMACSS
smacss
Order from most important, flow affecting properties, to least important properties.
Concentric CSS
concentric-css
Order properties applying outside the box model, moving inward to intrinsic changes.
Following the PostCSS plugin guidelines, this package depends on PostCSS as a peer dependency:
npm install postcss css-declaration-sorter --save-dev
This module does not include its own CLI but works with the official PostCSS CLI. To use the examples below, the postcss-cli
package is a required dependency.
Piping out result from file:
postcss input.css --use css-declaration-sorter | cat
Sorting multiple files by overwriting:
postcss *.css --use css-declaration-sorter --replace --no-map
Sorting all files in a directory with SCSS syntax using postcss-scss by overwriting:
postcss ./src/**/*.scss --syntax postcss-scss --use css-declaration-sorter --replace --no-map
Sorting all files in the directory with SCSS syntax and SMACSS order by overwriting, using package.json
configuration:
"postcss": {
"syntax": "postcss-scss",
"map": false,
"plugins": {
"css-declaration-sorter": { "order": "smacss" }
}
}
postcss ./src/**/*.scss --replace --config package.json
import postcss from 'postcss';
import { cssDeclarationSorter } from 'css-declaration-sorter';
postcss([cssDeclarationSorter({ order: 'smacss' })])
.process('a { color: hyperblue; display: block; }', { from: undefined })
.then(result => console.log(
result.css === 'a { display: block; color: hyperblue; }'
));
View more usage examples in combination with other tools.
Type: string
or function
Default: alphabetical
Options: alphabetical
, smacss
, concentric-css
Provide the name of one of the built-in sort orders or a comparison function that is passed to (Array.sort
). This function receives two declaration names and is expected to return -1
, 0
or 1
depending on the wanted order.
Type: Boolean
Default: false
To prevent breaking legacy CSS where shorthand declarations override longhand declarations (also taking into account vendor prefixes) this option can enabled. For example animation-name: some; animation: greeting;
will be kept in this order when keepOverrides
is true
.
[7.2.0] - 2024-03-25
column-gap
and row-gap
moving unsafely.FAQs
Sorts CSS declarations fast and automatically in a certain order.
The npm package css-declaration-sorter receives a total of 8,840,744 weekly downloads. As such, css-declaration-sorter popularity was classified as popular.
We found that css-declaration-sorter demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.