Fix deletion of code with --fix option

I tried the minimum configuration.

package.json

{
  "dependencies": {
    "stylelint": "^9.4.0"
  }
}

.stylelintrc

{
  "rules": {
  }
}

ex1

app.sass

.ToggleSwitch
  @extend .hoge

CLI with yarn run stylelint app.sass --fix yarn run stylelint app.sass

Unexpected changes will be made

ex2

app.sass

.ToggleSwitch
  @extend .hoge
  @include .fuga
  padding: 0 $width
  border: 1px solid $border-color

CLI with yarn run stylelint app.sass --fix yarn run stylelint app.sass

Unexpected changes will be made

.ToggleSwitch
  
    padding: 0 $width
  border: 1px solid border-color

thx

[jeddy3]

This issue is likely due to to a problem in postcss-sass, which stylelint uses:

We lean on PostCSS syntaxes to help us with this task [of supporting non-standard syntaxes] . We use them to transform these languages into something that resembles CSS

Please consider contributing a fix upstream to resolve this issue.

I’ll add an “upstream” label to indicate this.

Any workaround?

We added a feature in 13.2.0 to workaround these types of upstream parser issues:

Fixing bugs in syntaxes can take time. stylelint can work around these bug by turning off autofix for incompatible sources. Autofix can then remain safe to use while contributors try to fix the underlying issue.

If you’re unable to contribute to the upstream parser, please consider contributing a workaround to stylelint itself so that autofix becomes safer to use with sass syntax.

[renanpvaz]

I’m having the same issue when using sass + fix option.

Here are some more examples that might be helpful:

- @import '../settings/variables'

- background: url("https://s3.amazonaws.com/cool-url/icon.svg")
+ background: "https://s3.amazonaws.com/cool-url/icon.svg"

this won’t even break because navy is a preset color lol

- color: $navy
+ color: navy 

- @font-face
-  font-family: 'Gotham'
-  src: ...
-  font-style: italic
-  font-weight: 300