Sort CSS on save

[janosh]

Description

I occasionally write repeated CSS rules by accident

:where(aside.some-class.desktop) {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5pt;
    border: none;
    bottom: 0;
    color: black;
    cursor: pointer;
    font-size: 2em;
    line-height: 0;
    padding: 2pt 4pt;
    position: absolute;
    right: 0;
    z-index: 2;
    border-radius: 4pt;
}

In this block border-radius appears twice but isn't easy to spot. Rules are faster to search by eye when sorted alphabetically.

Proposed solution

Sort CSS rules within each block.

Alternatives

Just a suggestion, feel free to close as not planned.

Additional Information, eg. Screenshots

There appear to be unmaintained VS Code extensions that do this:

1. https://github.com/mrmlnc/vscode-postcss-sorting (marketplace)
2. https://github.com/mattkenefick/vscode-css-alphabetize (marketplace)

[cooolbros]

What if the language-tools warned of duplicate CSS properties?

[janosh]

@cooolbros There's already css.lint.duplicateProperties (VS Code docs) which helps with that but would be nice to also sort alphabetically for faster screening of blocks.

[janosh]

Afaict, neither extension supports sorting on save.

[jasonlyu123]

I don't think it can be reliably achieved because the CSS property order matters in how they're applied.

For example:

if we sort this by property name

    h1 {
        background-color: green;
        background: red;
    }

it would become:

    h1 {
        background: red;
        background-color: green;
    }

That will change which CSS got applied. The other alternative is that VSCode can provide a quick fix to remove duplicated properties.

[dummdidumm]

That's a good point - we should instead point out duplicate properties (or rather, the VSCode CSS language service ideally would do that)