hudochenkov / stylelint-order

A plugin pack of order related linting rules for Stylelint.
MIT License
916 stars 61 forks source link

Make a custom stylelint-order for property containing a string variable #143

Closed fraserredmond closed 2 years ago

fraserredmond commented 3 years ago

I have scss that looks like this:

.foo {
  position:  absolute;
  top:       0;
  #{$right}: 200; // Correct order.
  bottom:    0;
  #{$left}:  0;
  z-index:   5;
}

We set $rightType: right; for ltr languages like English, and $rightType: left; for rtl (right-to-left) languages like Arabic. So that foo's position would be mirrored in a rtl layout.

When I use stylelint auto-fix on the above it changes to the following because the variables aren't recognised.

.foo {
  position:  absolute;
  top:       0;
  bottom:    0;
  z-index:   5;
  #{$right}: 200; // Wrong order.
  #{$left}:  0;
}

Is it possible to add a custom rule that defines the property order even though their names contain variables?

(I'm using stylelint-config-rational-order, so an example of how to override that would be the most helpful to me, if it's even possible.)

hudochenkov commented 2 years ago

I'm afraid it's not possible without changing half of a plugin for this specific use case and breaking others.