Less variables order in declaration block

DarkPreacher commented 6 years ago

Code example:

.block {
    @c: #fff;
    color : @c;

    &--var {
        background-color: @c;
    }

    @media (min-width: 480px) {
        &-var {
            color: @c;
        }
    }
}

Config from VS Code:

"order": [
  "custom-properties",
  "dollar-variables",
  "declarations",
  "rules",
  "at-rules"
]

Expected output — like in example, got:

.block {
    color : @c;

    &--var {
        background-color: @c;
    }

    @media (min-width: 480px) {
        &-var {
            color: @c;
        }
    }
    @c: #fff;
}

Less is able to produce valid css out of this, but it looks awkward I think. Maybe there is some config to fix it?

hudochenkov commented 6 years ago

Less variables are not supported currently. I think they could be supported. The keyword for them will be at-variables. Same as stylelint-order keyword for them.

I won't be working on it, but PR is welcome.

DarkPreacher commented 6 years ago

I didn't know implementation already exists, made a PR https://github.com/hudochenkov/postcss-sorting/pull/80

hudochenkov commented 6 years ago

Done in https://github.com/hudochenkov/postcss-sorting/pull/80

hudochenkov / postcss-sorting

Less variables order in declaration block #79