Socket
Socket
Sign inDemoInstall

css-declaration-sorter

Package Overview
Dependencies
4
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    css-declaration-sorter

Sorts CSS declarations fast and automatically in a certain order.


Version published
Weekly downloads
8.4M
decreased by-18%
Maintainers
1
Install size
94.0 kB
Created
Weekly downloads
 

Package description

What is css-declaration-sorter?

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.

What are css-declaration-sorter's main functionalities?

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'));
});

Other packages similar to css-declaration-sorter

Changelog

Source

[7.2.0] - 2024-03-25

Added

  • New properties related to: offset, transition and text wrapping.

Fixed

  • Gap properties column-gap and row-gap moving unsafely.

Readme

Source
CSS declaration sorter logo

CSS Declaration Sorter

npm

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.

Niceness

  • Up-to-date CSS properties fetched from the MDN Compatibility Data project.
  • Choose your wanted order or provide your own.
  • Nested rules sorting support.
  • SCSS and Less support when combined with either postcss-scss or postcss-less.
  • Thought-out sorting orders out of the box, approved by their authors.

Alphabetical example

Input:

body {
    display: block;
    animation: none;
    color: #C55;
    border: 0;
}

Output:

body {
    animation: none;
    border: 0;
    color: #C55;
    display: block;
}

Built-in sorting orders

  • 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.

    1. Box
    2. Border
    3. Background
    4. Text
    5. Other
  • Concentric CSS
    concentric-css
    Order properties applying outside the box model, moving inward to intrinsic changes.

    1. Positioning
    2. Visibility
    3. Box model
    4. Dimensions
    5. Text

Usage

Following the PostCSS plugin guidelines, this package depends on PostCSS as a peer dependency:
npm install postcss css-declaration-sorter --save-dev

CLI

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

Vanilla JS

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.


API

cssDeclarationSorter({ order, keepOverrides })

order

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.

keepOverrides

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.

Keywords

FAQs

Last updated on 25 Mar 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc