"Expected declaration to come before rule" for a scss shortcut

[crystalfp]

Linting my scss file stylelint complains for constructs like this one:

  .content-closed {
    padding-top: 2px;
    font: {
      size: $font-size-togglers;
      weight: normal;
    }
    color: $text-color;
  }

stylelint complains on the "color" line with:

181:5  ×  Expected declaration to come before rule               order/order

If I move the font shortcut after the color line, No error is reported. In my opinion this is a bug, because font: { ... } is not a declaration, it is a shortcut for the two lines font-size: ...; font-weight: ...;

I don't have explicitly installed the stylelint-order plugin. My stylelint related modules are:

+-- stylelint@13.2.1
+-- stylelint-config-recommended@3.0.0
+-- stylelint-config-sass-guidelines@7.0.0
+-- stylelint-find-rules@2.2.0
+-- stylelint-scss@3.15.0

So really don't know from where it cames.

Nothing critical, but mildly annoying. Thanks for looking! mario

[hudochenkov]

I'm afraid the only solution is to change nested properties to normal ones: font-size and font-weight. Nested properties are very rare, and adding support for them in this plugin doesn't make sense.

[crystalfp]

Understand. The workaround is to put these shortcut blocks as the last property. Thanks!

[npoliquin]

I have another issue. Our team use nested properties, because it's a feature that sass have.

If I used nested properties, stylelint-order put theses properties at the end. That means our code is perfectly reorder. The only exception is the nested properties.

Result

&::before {
  position: absolute;
  left: 0;

  margin-left: 0;rgin-left: 16px;
  }
}

font: {
  size: 16px;
  weight: 500;
}

Expected

font: {
  size: 16px;
  weight: 500;
}

&::before {
  position: absolute;
  left: 0;

  margin-left: 0;rgin-left: 16px;
  }
}

It's should be supported, because it's a sass feature.