What is stylelint's default properties order within a block?

Question

I know the answer should be simple to find, however the only reference to "order" I found in the stylelint's official website was the stylelint-order plugin, which seems interesting enough but it's a bit too overkill for my needs (not planning to install and configure it for now).

Stylelint suggests (by sending warnings) a specific order of properties within a block, i.e. this block:

.my-class {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  overflow-x: hidden;
  background: #dadada;
}

Would send warnings with property-sort-order in all the inner lines. So what is the required order?

Answer 1

It is simply alphabetic (A-Z). Therefore, for avoiding the stylelint warnings, the properties in that block should be ordered like this:

.my-class {
  background: #dadada;
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

However with SASS interpolation, it is possible to do disregard this order enforcement like this:

$bg: background;

.my-class {
  height: 100%;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  top: 0;
  #{bg}: #dadada;
}