![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
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 0 weekly downloads. As such, css-declaration-sorter popularity was classified as not 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
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.