Prettier-grundy-scss-order

npm GitHub Actions Workflow Status

A Prettier plugin to sort CSS or SCSS properties. Using postcss-scss for parse source.

Usage

Following the Prettier plugin guidelines, this package depends on Prettier as a peer dependency:

npm install prettier-grundy-scss-order --save-dev

To enable the plugin use the Prettier API, CLI or configuration file. For example using the JS configuration:

{
    "plugins": ["prettier-grundy-scss-order"]
}

Configuration

This plugin adds next configurable keys to Prettier:

Option Name Description Default value
grundyScssSorterGroupsOrderarray of groups in needed order 
["@use", "--variable", "$variable", "@if", "decl", "@include", "@mixin", "rule"]
grundyScssSorterWithRootflag if need sort on root level true
grundyScssSorterSplitGroupflag if need split groups in result with empty line false
grundyScssSorterGroups define custom groups to sort, extend default groups
grundyScssSorterPreset predefined properties, for example: csscomb

Presets

Available presets for migrate from other plugins

Preset Description

csscomb

 preset for migrate from csscomb sorter with default preset
csscomb-yandex preset for migrate from csscomb sorter with yandex preset
csscomb-zen preset for migrate from csscomb sorter with zen preset

Predefined groups

Custom groups

With option grundyScssSorterGroups possibly add custom groups satisfying the criterias

example, add group @font - in this group select all properties started with font: font, font-size, etc.

"{\"@font\": { \"startsWith\": \"font\" }}";

Then possibly use this group in grundyScssSorterGroupsOrder:

["--variable", "$variable", "@font", "decl"];

Custom groups criterias

To define custom group available next criterias

  • startsWith - check name starts with parameter

  • oneOf - check name one of array string

  • type - check node type one of predefined type

    • "use"
    • "mixin"
    • "include"
    • "if"
    • "extend"
    • "atrule"
    • "rule"
    • "decl"
    • "$variable"
    • "variable"
    • "media"
    • "supports"

Samples

Criteria Sample Description Applied to
type 
{
    "type": "use"
}
 select "@use" statements 
@use "colors";
@use "colors" as c;
startsWith 
{
    "startsWith": "font"
}
 select statements starts with "font" 
font: "Courier New";
font-size: 10px;
@include fonts;
oneOf 
{
    "oneOf": ["position", "left"]
}
 select statements with name that exactly matches one of the array elements 
position: relative;
left: 10px;

Try it

Open playground