refactor: fix scss mixed declarations (#2947)

sbb-design-systems · Aug 7, 2024 · ca22eda · ca22eda
1 parent 2224fb6
commit ca22eda
Show file tree

Hide file tree

Showing 54 changed files with 359 additions and 314 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -48,6 +48,7 @@
       }
     ],
     "number-max-precision": 12,
-    "value-no-vendor-prefix": [true, { "ignoreValues": ["box"] }]
+    "value-no-vendor-prefix": [true, { "ignoreValues": ["box"] }],
+    "no-duplicate-selectors": null
   }
 }
diff --git a/package.json b/package.json
@@ -136,7 +136,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
-    "sass": "1.77.6",
+    "sass": "1.77.7",
     "sinon": "18.0.0",
     "storybook": "8.2.7",
     "stylelint": "16.8.1",

diff --git a/renovate.json b/renovate.json
@@ -25,7 +25,7 @@
       "enabled": false
     },
     {
-      "matchPackageNames": ["jackspeak", "@web/dev-server-core", "sass"],
+      "matchPackageNames": ["jackspeak", "@web/dev-server-core"],
       "enabled": false
     },
     {

diff --git a/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss b/src/elements-experimental/pearl-chain-time/pearl-chain-time.scss
@@ -4,6 +4,8 @@
 @include sbb.box-sizing;
 
 :host {
+  display: block;
+
   --sbb-pearl-chain-time-height: auto;
 
   @include sbb.mq($from: small) {
@@ -13,8 +15,6 @@
   @include sbb.mq($from: medium) {
     --sbb-pearl-chain-time-height: #{sbb.px-to-rem-build(28)};
   }
-
-  display: block;
 }
 
 .sbb-pearl-chain__time {

diff --git a/src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss b/src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss
@@ -102,32 +102,33 @@ slot[name='right']::slotted(*) {
 }
 
 .sbb-pearl-chain-vertical-item__line--default {
-  @include sbb.if-forced-colors {
-    --sbb-pearl-chain-vertical-item-color-default: CanvasText;
-  }
-
   background-color: var(--sbb-pearl-chain-vertical-item-color-default);
   border-color: var(--sbb-pearl-chain-vertical-item-color-default);
   color: var(--sbb-pearl-chain-vertical-item-color-default);
+
+  @include sbb.if-forced-colors {
+    --sbb-pearl-chain-vertical-item-color-default: CanvasText;
+  }
 }
 
 .sbb-pearl-chain-vertical-item__line--disruption {
   border-color: var(--sbb-pearl-chain-vertical-item-color-disruption);
   background-color: var(--sbb-pearl-chain-vertical-item-color-disruption);
   color: var(--sbb-pearl-chain-vertical-item-color-disruption);
+
   @include sbb.if-forced-colors {
     --sbb-pearl-chain-vertical-item-color-disruption: Highlight;
   }
 }
 
 .sbb-pearl-chain-vertical-item__line--past {
-  @include sbb.if-forced-colors {
-    --sbb-pearl-chain-vertical-item-color-past: GrayText;
-  }
-
   border-color: var(--sbb-pearl-chain-vertical-item-color-past);
   background-color: var(--sbb-pearl-chain-vertical-item-color-past);
   color: var(--sbb-pearl-chain-vertical-item-color-past);
+
+  @include sbb.if-forced-colors {
+    --sbb-pearl-chain-vertical-item-color-past: GrayText;
+  }
 }
 
 .sbb-pearl-chain-vertical-item__line--walk {
@@ -139,11 +140,11 @@ slot[name='right']::slotted(*) {
 // Bullet styles
 
 .sbb-pearl-chain-vertical-item__bullet {
-  @include sbb.pearl-chain-bullet;
-
   position: relative;
   inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start);
   transform: var(--sbb-pearl-chain-vertical-item-transform);
+
+  @include sbb.pearl-chain-bullet;
 }
 
 .sbb-pearl-chain-vertical-item__bullet--start-end {
@@ -176,11 +177,11 @@ slot[name='right']::slotted(*) {
 }
 
 .sbb-pearl-chain-vertical-item__bullet--position {
-  @include sbb.pearl-chain-bullet-position;
-  @include sbb.absolute-center-x;
-
   inset-block-start: var(--sbb-pearl-chain-vertical-item-position);
 
+  @include sbb.absolute-center-x;
+  @include sbb.pearl-chain-bullet-position;
+
   :host([disable-animation]) & {
     animation: unset !important;
   }

diff --git a/src/elements-experimental/pearl-chain/pearl-chain.scss b/src/elements-experimental/pearl-chain/pearl-chain.scss
@@ -25,9 +25,9 @@
   --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past);
   --sbb-pearl-chain-leg-width: 100%;
 
-  @include sbb.pearl-chain-bullet-variables;
-
   display: block;
+
+  @include sbb.pearl-chain-bullet-variables;
 }
 
 .sbb-pearl-chain {
@@ -45,14 +45,16 @@
 
 // first and last bullet
 .sbb-pearl-chain__bullet {
-  @include sbb.pearl-chain-bullet;
   @include sbb.pearl-chain-bullet-start-end;
+  @include sbb.pearl-chain-bullet;
 
-  content: '';
-  position: absolute;
-  background-color: currentcolor;
-  inset-block-start: 0;
-  z-index: 3;
+  & {
+    content: '';
+    position: absolute;
+    background-color: currentcolor;
+    inset-block-start: 0;
+    z-index: 3;
+  }
 }
 
 .sbb-pearl-chain__bullet:first-of-type {
@@ -89,11 +91,14 @@
 
 // dot on leg
 .sbb-pearl-chain__stop {
-  @include sbb.pearl-chain-bullet;
-  @include sbb.pearl-chain-bullet-stop;
-
   position: relative;
   z-index: 2;
+
+  @include sbb.pearl-chain-bullet;
+
+  & {
+    @include sbb.pearl-chain-bullet-stop;
+  }
 }
 
 .sbb-pearl-chain__bullet--future {
@@ -107,29 +112,29 @@
 .sbb-pearl-chain__leg--progress .sbb-pearl-chain__stop,
 .sbb-pearl-chain--progress,
 .sbb-pearl-chain__bullet--past {
-  @include sbb.pearl-chain-bullet-past;
-
   color: var(--sbb-pearl-chain-color-past);
 
+  @include sbb.pearl-chain-bullet-past;
+
   @include sbb.if-forced-colors {
     background-color: GrayText !important;
   }
 }
 
 .sbb-pearl-chain__bullet--progress {
-  @include sbb.pearl-chain-bullet-past;
-
   background: var(--sbb-pearl-chain-bullet-color);
+
+  @include sbb.pearl-chain-bullet-past;
 }
 
 .sbb-pearl-chain__bullet--departure-disruption,
 .sbb-pearl-chain--arrival-disruption,
 .sbb-pearl-chain--departure-disruption,
 .sbb-pearl-chain__leg--disruption {
-  @include sbb.pearl-chain-bullet-disruption;
-
   color: var(--sbb-pearl-chain-color-disruption);
 
+  @include sbb.pearl-chain-bullet-disruption;
+
   @include sbb.if-forced-colors {
     color: Highlight;
     background: Highlight;
@@ -157,8 +162,8 @@
 }
 
 .sbb-pearl-chain__stop--departure-skipped {
-  @include sbb.pearl-chain-bullet-skipped;
   @include sbb.pearl-chain-bullet-stop;
+  @include sbb.pearl-chain-bullet-skipped;
 }
 
 .sbb-pearl-chain--arrival-skipped,
@@ -200,12 +205,14 @@
 .sbb-pearl-chain__position {
   @include sbb.pearl-chain-bullet-position;
 
-  position: absolute;
-  inset-block-start: -200%;
-  z-index: 4;
+  & {
+    position: absolute;
+    inset-block-start: -200%;
+    z-index: 4;
 
-  // --sbb-pearl-chain-status-position: defined in .ts file
-  inset-inline-start: var(--sbb-pearl-chain-status-position);
+    // --sbb-pearl-chain-status-position: defined in .ts file
+    inset-inline-start: var(--sbb-pearl-chain-status-position);
+  }
 }
 
 .sbb-pearl-chain__position--no-animation {

diff --git a/src/elements-experimental/teaser-hero/teaser-hero.scss b/src/elements-experimental/teaser-hero/teaser-hero.scss
@@ -10,9 +10,9 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  @include sbb.panel-variables;
-
   --sbb-teaser-hero-brightness-hover: 1.075;
+
+  @include sbb.panel-variables;
 }
 
 @include sbb.hover-mq($hover: true) {
@@ -34,10 +34,13 @@
 }
 
 .sbb-teaser-hero__panel {
+  z-index: 1;
+
   @include sbb.panel;
-  @include sbb.absolute-center-y;
 
-  z-index: 1;
+  & {
+    @include sbb.absolute-center-y;
+  }
 }
 
 .sbb-teaser-hero__panel-text {

diff --git a/src/elements/alert/alert/alert.scss b/src/elements/alert/alert/alert.scss
@@ -10,6 +10,8 @@ $open-anim-opacity-to: 1;
 @include sbb.box-sizing;
 
 :host {
+  display: block;
+
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
   --sbb-alert-background-color: var(--sbb-color-midnight);
   --sbb-alert-border-radius: var(--sbb-border-radius-4x);
@@ -35,8 +37,6 @@ $open-anim-opacity-to: 1;
     outline: var(--sbb-border-width-1x) solid CanvasText;
     border-radius: var(--sbb-alert-border-radius);
   }
-
-  display: block;
 }
 
 // By default, the open animation is disabled

diff --git a/src/elements/autocomplete/autocomplete-base-element.scss b/src/elements/autocomplete/autocomplete-base-element.scss
@@ -128,10 +128,12 @@
 }
 
 .sbb-autocomplete__options {
-  @include sbb.scrollbar-rules;
   @include sbb.optionsOverlay;
+  @include sbb.scrollbar-rules;
 
-  pointer-events: var(--sbb-options-pointer-events);
+  & {
+    pointer-events: var(--sbb-options-pointer-events);
+  }
 
   @include sbb.if-forced-colors {
     border: var(--sbb-border-width-1x) solid CanvasText;

diff --git a/src/elements/breadcrumb/breadcrumb/breadcrumb.scss b/src/elements/breadcrumb/breadcrumb/breadcrumb.scss
@@ -25,13 +25,15 @@
   @include sbb.text-xs--regular;
   @include sbb.link-base;
 
-  display: flex;
-  cursor: pointer;
-  gap: var(--sbb-spacing-fixed-2x);
-  color: var(--sbb-breadcrumb-color);
-  align-items: center;
-  overflow: hidden;
-  outline: none;
+  & {
+    display: flex;
+    cursor: pointer;
+    gap: var(--sbb-spacing-fixed-2x);
+    color: var(--sbb-breadcrumb-color);
+    align-items: center;
+    overflow: hidden;
+    outline: none;
+  }
 
   @include sbb.if-forced-colors {
     --sbb-breadcrumb-color: ButtonText;

diff --git a/src/elements/calendar/calendar.scss b/src/elements/calendar/calendar.scss
@@ -4,6 +4,11 @@
 @include sbb.box-sizing;
 
 :host {
+  display: block;
+
+  // We add width definition to host, to make overwriting easy for consumers.
+  width: max-content;
+
   --sbb-calendar-cell-size: #{sbb.px-to-rem-build(40)};
   --sbb-calendar-hover-shift: #{sbb.px-to-rem-build(1)};
   --sbb-calendar-wide-cell-size: #{sbb.px-to-rem-build(70)};
@@ -34,11 +39,6 @@
     --sbb-calendar-wide-cell-size: #{sbb.px-to-rem-build(77)};
     --sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(48)};
   }
-
-  display: block;
-
-  // We add width definition to host, to make overwriting easy for consumers.
-  width: max-content;
 }
 
 .sbb-calendar__wrapper {
@@ -116,6 +116,7 @@
 .sbb-calendar__table-container {
   display: flex;
   gap: var(--sbb-calendar-tables-gap);
+  margin-inline: var(--sbb-calendar-margin);
 
   // The padding of the first and last column should not be visible if calendar is stretched.
   // Therefore we need a negative inline margin.
@@ -140,8 +141,6 @@
     );
     --sbb-calendar-margin: calc(0.5 * var(--sbb-calendar-start-offset));
   }
-
-  margin-inline: var(--sbb-calendar-margin);
 }
 
 .sbb-calendar__table {

diff --git a/src/elements/card/card/card.scss b/src/elements/card/card/card.scss
@@ -9,9 +9,9 @@
 // All focusable elements inside the main slot will receive `pointer-events: all` which makes them pointer accessible.
 
 :host {
-  @include sbb.card-variables;
-
   display: block;
+
+  @include sbb.card-variables;
 }
 
 :host([color='milk']) {
@@ -89,10 +89,10 @@
 }
 
 .sbb-card {
-  @include sbb.card;
-
   width: 100%;
   height: 100%;
+
+  @include sbb.card;
 }
 
 .sbb-card__wrapper {

diff --git a/src/elements/chip/chip.scss b/src/elements/chip/chip.scss
@@ -38,7 +38,9 @@
 .sbb-chip {
   @include sbb.chip-rules;
 
-  display: flex;
+  & {
+    display: flex;
+  }
 }
 
 .sbb-chip__text-wrapper {