react-molecule-notification: icon left is hidden on desktop with Sass >= 1.92.0 (declaration order)

[Alisa-InWonderland]

Description

With Sass >= 1.92.0, .sui-MoleculeNotification-iconLeft is hidden on desktop, so the notification icon never shows. It works with older Sass versions.

Cause

In components/molecule/notification/src/styles/index.scss, the plain declarations come after the @include media-breakpoint-up(xs):

&Left {
  svg { ... }
  @include media-breakpoint-up(xs) {
    display: block;
  }
  display: none;
  margin-right: $m-m;
  ...
}

Older Sass hoisted plain declarations above nested rules, which hid the problem. Since Sass 1.92.0 the source order is preserved (deprecated with a warning since 1.77.7, see
mixed-decls). The compiled CSS becomes:

@media (min-width: 480px) { .sui-MoleculeNotification-iconLeft { display: block; } }
.sui-MoleculeNotification-iconLeft { display: none; margin-right: 8px; }

Both rules have the same specificity, so display: none comes last and wins on desktop.

&Close has the same pattern: the margin-left: $m-l after the media query always overrides the $m-m from the breakpoint.

Fix

Declarations first, then the media query that overrides them, then the other nested rules:

&Left {
  display: none;
  margin-right: $m-m;
  @include media-breakpoint-up(xs) {
    display: block;
  }

  svg {
    height: $sz-notification-icon;
    width: $sz-notification-icon;
  }

  &--show {
    display: block;
  }
}

&Close {
  cursor: pointer;
  margin-left: $m-l;
  @include media-breakpoint-up(xs) {
    margin-left: $m-m;
  }

  svg {
    height: $sz-icon-m;
    width: $sz-icon-m;
  }
}

This gives the same output on old and new Sass versions.

How to reproduce

Compile @s-ui/react-molecule-notification/lib/index with sass@1.104.1 and with sass@1.54.5, and compare the order of the .sui-MoleculeNotification-iconLeft rules.

• 🪲 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 🧾 Documentation
• 📷 Demo
• 🧪 Test
• 🧠 Refactor
• 💄 Styles
• 🛠️ Tool

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0＝	≍ 0＝	≍ 0＝
%	76.47	63.44	68.11	78.06
ABS	3517 / 4599	2135 / 3365	690 / 1013	3335 / 4272