Incorrectly rearranges the variables

[markelog]

With .stylelintrc like this –

{
  "extends": "stylelint-config-standard"
}

for the code like this:

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

It arranges code like this:

@function str-replace($string, $search, $replace: "") {

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
  $index: str-index($string, $search);
}

Moving $index variable after return and breaking the function, same story with similar code. Whereas stylelint do not show any errors for such code.

stylefmt is not used directly but through gulp plugin – "gulp-stylefmt": "^1.1.0"

[burner03]

Any workaround for this issue? I'm running into this now, I'm using stylefmt directly with stylelint and have this issue.

Also note that i'm using .Less with this. .test { @color: red; color: @color; }

becomes

.test { color: @color; @color: red; }

[burner03]

Okay I think i've got a temporary fix for you as a POC so someone more knowledgeable can make a PR on it.

Inside your .stylelintrc.json or whereever your "declaration-block-properties-order" is held set the first value to "$variable"

This triggers the 'postcss-sorting' regex found on line 176 of https://github.com/hudochenkov/postcss-sorting/blob/1.7.0/index.js to sort the variables at the top of the block.

For .Less, in my case, I had to modify the postcss-sorting regex to include the @ symbol.

return (/^(\$|--|@)[\w-]+/).test(node.prop) ? '$variable' : node.prop;