refactor: fix mixed declarations warnings on sass-embedded 1.77.7+ #15507
Conversation
Where possible, moves mixins that have nested declarations later in definitions or
re-orders declarations where the order doesn't matter.
Accordingly, disables the sass-lint rule. Without deterministically ordered mixins
it's not possible to cleanly avoid interleaved declarations and nested blocks without
using `& {}` everywhere.
|
|
@joeworkman Hi there - do you not review/accept PRs on this repo? it seems you have made similar changes on Spent quite a bit of time on this as well as raising the issue at #15506 so would be good to know if not worth bothering in future. |
|
Oh man, we were working on this at the same exact time! I am sorry. I was chatting about it a little on the Foundation discord channel. I will review your changes to see if there is anything that could have been different than what I did. I am working with the Sass team with some other enhancements. They would like to move away from |
|
Ahh ok, this was a few days ago now. You're certainly more of a sass expert than me so I'd defer to your judgment. In some cases I was looking for places where the declarations were overriding something in an include where reordering would change semantics (eg. some buttons). Probably similar to your approach I imagine although I did have to disable a lint rule as a result in some places. |
|
@joeworkman any chance of cutting a patch release with these fixes? 🙏 |
Description
Where possible, moves mixins or declarations around in definitions or re-orders declarations where the order doesn't matter to avoid sass-embedded warnings with
1.77.7+ as documented at https://sass-lang.com/documentation/breaking-changes/mixed-decls/There is also discussion about this at sass/dart-sass#2276 where a dart-sass developer refers to recommended approach being to re-order declarations where possible, and use
& {}within mixins for behaviour that will be forward and backward compatible.Accordingly also disables the sass-lint rule requiring mixins at the start. Without deterministically ordered mixins it's not possible to cleanly avoid interleaved declarations and nested blocks without using
& {}everywhere. However, if maintainers would rather, this could prefer the ugly& {}opt-ins that will maintain the deterministic ordering, but in some cases lead to less efficient CSS as there isn't the implicit "hoisting" of declarations going on.Methodology was to run
yarn run testand correct all the sass-embedded warnings that appeared there.Types of changes
Checklist
developordevelop-v...).