1

We are migrating to dart-sass and have annoying issue with @extend, part from our source code:

.error {
    color: red;
}
.checkboxWrapper {
  &.error {
    .checkboxLabel::before {
      @extend .error;
    }
  }
}
.checkbox {
  &[aria-invalid='true'] {
    ~ .checkboxLabel::before {
      @extend .error;
    }
  }
}

with lib-sass it has output:

.error,
.checkboxWrapper.error .checkboxLabel::before,
.checkbox[aria-invalid='true'] ~ .checkboxLabel::before {
    color: red;
}

with dart-sass it has output:

.error,
.checkbox[aria-invalid=true] ~ .checkboxLabel::before,
.checkbox[aria-invalid=true] ~ .checkboxWrapper.checkboxLabel::before .checkboxLabel::before,
.checkboxWrapper.error .checkboxLabel::before {
    color: red;
}

In lib-sass we have expected result, but in dart-sass not.

Alexandr Vysotsky
  • 1,081
  • 13
  • 16

0 Answers0