Vendor Prefix Ordering

[webdevnerdstuff]

Not really an issue, but more of a question and/or feature request.

Is it possibly to allow the alpha sorting to allow vendor prefixed properties before the regular properties? I couldn't find it anywhere in the documentation.

Ex.

.foo {
    -webkit-margin-start: 0;
    color: #333;
    font-size: 1em;
    font-weight: bold;
    margin-left: 2px;
    position: relative;
}

[hudochenkov]

No, it's not possible. Prefixes are ignored for sorting.

You'll get this, because -webkit-margin-start sorted as margin-start:

.foo {
    color: #333;
    font-size: 1em;
    font-weight: bold;
    margin-left: 2px;
    -webkit-margin-start: 0;
    position: relative;
}

However, of there is a property both prefixed and unprefixed, prefixed one will be in the beginning:

.foo {
    margin-left: 2px;
    -webkit-margin-start: 0;
    margin-start: 0;
    position: relative;
}

[webdevnerdstuff]

There are VS Code extensions that do sort it in this manner. I would say it's more of a matter of adding the functionality or making it an added feature/option. By no means am I saying that's easy, as I'm not sure I could even figure it out. I looked at your source code for a minute before my head exploded thinking maybe I could give it a shot. :)

This VS Code Extension does sort a list in this way (for example). https://github.com/Tyriar/vscode-sort-lines

That plugins sorts the following example:

.foo {
    display: block;
    -webkit-padding-start: initial;
    color: #fff;
    -webkit-animation: alternate;
}

To:

.foo {
    -webkit-animation: alternate;
    -webkit-padding-start: initial;
    color: #fff;
    display: block;
}

[hudochenkov]

That plugin doesn't know anything about CSS. In general special symbols like - go before letter in sort functions in JavaScript and everywhere else. That's why you see this behavior.

With behavior like this in CSS you'll get:

.foo {
    -webkit-transform: none;
    color: #fff;
    display: block;
    transform: none;
}

transform in two different places rather be together.

I'm afraid such behavior will not be added to stylelint-order.

[webdevnerdstuff]

That is the wanted result, to have all vendor prefixes at the top, and other properties grouped below. Not to have the vendor prefix grouped with its corresponding property.

It would just be a nice to have, as that's how I have done it for many years, as well as everybody on my team, and other devs I have worked with. Different strokes for different folks I guess. So it would be a nice feature to add, but if you don't want to, we can deal with it.

In general we never use vendor prefixes and just let PostCSS and autoprefixer deal with that. It's not very common to use them in our code unless it's one of those random browser specific ones that pop up, which is rare anyway.

[mattaningram]

Not sure why this issue was closed, the way it currently works is confusing and doesn't align with the way some vendor prefixes are needed to be used.

For example it says this is the correct sort order of these properties:

html {
  background-color: $lightestGray;
  font-family: $fontFamily;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

Since when does L come after M and W? Sure it's looking at the F in font-smoothing but this is not at all obvious to most users.

It's not always appropriate for - prefixed properties to go next to their unprefixed versions because sometimes there isn't an unprefixed version (font-smoothing does nothing without prefixes).

There really should be an option to ignore vendor prefix items or any item starting with a hyphen.