SASS changes in mixed declarations

[stefanv]

When compiling the style files from PDST using dart-sass, it emits warnings related to changes is how SASS will deal in the future with mixed declarations.

Short story, before a declaration like:

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

Would pull font-weight to the top of .example, and define a font-weight after. Now, they leave the ordering alone.

At least the following cases are present in PDST:

_color.scss:349
_breadcrumbs.scss:30
_admonitions.scss:49
_admonitions.scss:52
_quotes.scss:24
_tables.scss:46

The workaround? As Dart Sass reports:

To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.

[drammock]

are they expected to behave differently at runtime, or only going to matter for things like readability of the compiled CSS file and/or webpack's ability to minimize file size?

Looking at the page you linked, I can see that the compiled CSS looks a bit different, but I'd expect them to behave the same way. I know later declarations can override earlier ones, but in this case .example a has greater specificity than .example so I'm not clear what difference it would make. Or is my understanding of CSS cascades simply wrong/incomplete?

[stefanv]

I agree, their example doesn't illustrate any particular problem, as far as I can tell. Let me investigate a bit more; I presume they wouldn't publish it as a deprecation if it didn't have an impact.

[stefanv]

I can't come up with an example right now, so I asked on the original dart-sass issue: https://github.com/sass/dart-sass/pull/2267#issuecomment-2290073546

[trallard]

Thanks @stefanv - per their docs and warning this seems like a breaking change but like @drammock mentioned I do not see a clear difference if overrides hierarchy remain the same. Will note this issue as needing more information since you already pinged folks in dart-sass

[stefanv]

They provided an example today:

.example {
  color: red;

  @media screen {
    font-weight: bold;
  }

  font-weight: normal;
}