prettier-grundy-scss-order weekly downloads statistics

prettier-grundy-scss-order Русский

[![npm][npm-badge]][npm] [![GitHub Actions Workflow Status][npm-build]][github-actions]

Keep SCSS readable as it grows. prettier-grundy-scss-order is a Prettier plugin that puts declarations, variables, Sass directives, and nested rules in a predictable order every time you format a file.

It is designed for real SCSS codebases: keep variables together, place layout properties consistently, separate logical sections with blank lines, and migrate from established property orders without rewriting your styles by hand.

Why use it?

• One format command, one team-wide style. No more review comments about property order.
• SCSS-aware sorting. Sort $variables, CSS custom properties, @use, @extend, @include, @mixin, conditions, and nested rules — not only declarations.
• Adopt an existing convention. Choose csscomb, csscomb-yandex, csscomb-zen, or pepelsbey.
• Make the order yours. Create groups by node type, property prefix, or an explicit list of properties.

Before and after

.card {
    padding: 16px;
    color: white;
    --card-color: #222;
    display: flex;
}

.card {
    --card-color: #222;
    color: white;
    display: flex;
    padding: 16px;
}

Quick start

Install Prettier and the plugin:

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

Add it to prettier.config.mjs:

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

Then format your SCSS as usual:

npx prettier --write "src/**/*.scss"

The default order is:

@use → @extend → CSS custom properties → Sass variables → @if → declarations → @include → @mixin → nested rules

Declarations inside the decl group are sorted alphabetically. Sorting applies at the root level and inside nested rules.

Configuration

Set options in your Prettier configuration:

export default {
    plugins: ["prettier-grundy-scss-order"],
    grundyScssSorterSplitGroup: true,
    grundyScssSorterGroupsOrder: ["--variable", "$variable", "layout", "typography", "decl", "@include", "rule"],
    grundyScssSorterGroups: JSON.stringify({
        layout: {
            oneOf: ["display", "position", "inset", "width", "height", "margin", "padding"],
            order: "exact"
        },
        typography: {
            startsWith: "font",
            type: "decl"
        }
    })
};

Option	Description	Default
grundyScssSorterGroupsOrder	Group names in the desired order. Nodes not matching a listed group are placed after them.	[@use, @extend, --variable, $variable, @if, decl, @include, @mixin, rule]
grundyScssSorterWithRoot	Sort root-level nodes as well as declarations inside rules.	true
grundyScssSorterSplitGroup	Add a blank line between groups. Groups marked as split also separate their individual items.	false
grundyScssSorterGroups	JSON string with custom groups. Custom definitions extend the built-in groups.	—
grundyScssSorterPreset	A bundled property-order preset.	—

Presets

Start with a familiar convention, then override it only where your project differs:

export default {
    plugins: ["prettier-grundy-scss-order"],
    grundyScssSorterPreset: "pepelsbey"
};

Preset	Best for
csscomb	Migrating from CSScomb’s default configuration.
csscomb-yandex	Migrating from CSScomb’s Yandex configuration.
csscomb-zen	Migrating from CSScomb’s Zen configuration.
pepelsbey	A comprehensive exact CSS-property order based on stylelint-config-pepelsbey.

Built-in groups…