CSS sort order rule does not report expected order

[bitspook]

The sort order for scss rules has perhaps changed in pragmatic than what we had earlier? I am seeing many scss lint errors for sort-order which were fine with our old scss-lint configuration.

[bitspook]

Also the error message for sorting with scss-lint used to tell the entire sort-order, i.e it should be sorted prop1, prop2, prop3. Pragmatic says expected prop1 found prop3 and on fixing this and rerunning it would say expecting prop1 found prop2. Given that it has to work on entire project every time, it's sort of time consuming.

[gajus]

The sort order for scss rules has perhaps changed in pragmatic than what we had earlier? I am seeing many scss lint errors for sort-order which were fine with our old scss-lint configuration.

This shouldn't be the case. Please provide specific examples. I will investigate it.

Don't rush to amend the CSS.

[gajus]

Also the error message for sorting with scss-lint used to tell the entire sort-order, i.e it should be sorted prop1, prop2, prop3. Pragmatic says expected prop1 found prop3 and on fixing this and rerunning it would say expecting prop1 found prop2. Given that it has to work on entire project every time, it's sort of time consuming.

Please raise this issue as a suggestion with https://github.com/sasstools/sass-lint/issues (and CC me and this issue).

[bitspook]

Please raise this issue as a suggestion with https://github.com/sasstools/sass-lint/issues (and CC me and this issue).

Here: sasstools/sass-lint#416

I don't know how to cc someone in an issue, so I just dropped a "cc: gajus" there :P

This shouldn't be the case. Please provide specific examples. I will investigate it

Here's an example code snippet which is perfectly sorted according to our old rules. Most of the (showtimes) scss was perfectly formatted according to our old rules, but almost every file is full of lint warnings now.

.pin {
    $pin-height: 40;
    $pin-width: 40;

    position: absolute;
    top: - $pin-height / 2 + px;
    left: - $pin-width / 2 + px;

    width: $pin-width + px;
    height: $pin-height + px;

    cursor: pointer;
    transform: rotate(45deg);

    border-radius: $pin-width / 2 + px;
    border-bottom-right-radius: 0;

    background: $color-tertiary;

    &:hover {
        background: $color-tertiary-active;
    }
}