tackle to mixed-decls

Author: aggre

packages/hashi/hs-badge/_badge-base.scss

@@ -31,29 +31,33 @@
     justify-content: center;
     align-items: center;
     @content;
-    
+
     .hs-badge__label {
       font-family: hs-core.key-get('badge-family');
       font-size: hs-core.key-get('badge-size');
       font-weight: hs-core.key-get('badge-weight');
       line-height: hs-core.key-get('badge-line-height');
     }
-    
+
     .hs-badge__icon {
       display: flex;
       align-items: center;
       @include hs-core.color-ink('badge-icon', currentColor);
       @include hs-core.typography-size('badge-icon', hs-core.to-rem(22px));
       /* @fallback */
-      width: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
-      height: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
-  
+      & {
+        width: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
+        height: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
+      }
+
       > * {
         @include hs-core.color-ink('badge-icon', currentColor);
         @include hs-core.typography-size('badge-icon', hs-core.to-rem(22px));
         /* @fallback */
-        width: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
-        height: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
+        & {
+          width: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
+          height: hs-core.key-create('badge-icon-size', hs-core.to-rem(22px));
+        }
       }
     }
   }

packages/hashi/hs-button/_button-base.scss

@@ -36,24 +36,29 @@
     ));
     @include hs-core.shape-height('button', max-content);
 
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
+    & {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+
+      user-select: none;
+      overflow: visible;
+      vertical-align: middle;
+      box-sizing: border-box;
+      cursor: pointer;
 
-    user-select: none;
-    overflow: visible;
-    vertical-align: middle;
-    box-sizing: border-box;
-    cursor: pointer;
+      -webkit-appearance: caret;
+    }
 
-    -webkit-appearance: caret;
     @include hs-core.prefix(transition, all var(--hs-transition-time) ease);
 
     @content;
 
-    ::-moz-focus-inner {
-      padding: 0;
-      border-style: none;
+    & {
+      ::-moz-focus-inner {
+        padding: 0;
+        border-style: none;
+      }
     }
 
     & > * + * {
@@ -66,15 +71,19 @@
       @include hs-core.color-ink('button-icon', $icon-ink);
       @include hs-core.typography-size('button-icon', hs-core.to-rem(20px));
       /* @fallback */
-      width: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
-      height: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
+      & {
+        width: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
+        height: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
+      }
 
       > * {
         @include hs-core.color-ink('button-icon', $icon-ink);
         @include hs-core.typography-size('button-icon', hs-core.to-rem(20px));
         /* @fallback */
-        width: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
-        height: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
+        & {
+          width: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
+          height: hs-core.key-create('button-icon-size', hs-core.to-rem(20px));
+        }
       }
     }
 
@@ -86,8 +95,10 @@
       @include hs-core.typography-size('button-label', inherit);
       @include hs-core.typography-weight('button-label', inherit);
       @include hs-core.typography-line-height('button-label', inherit);
-      text-align: center;
-      letter-spacing: 0.02rem;
+      & {
+        text-align: center;
+        letter-spacing: 0.02rem;
+      }
     }
   }
 

packages/hashi/hs-core/theme/_theme-properties.scss

@@ -33,14 +33,18 @@ $_valid-intents: (
 @mixin property($property, $values, $intent: 'create') {
   $key: list.nth($values, 1);
   $value: list.nth($values, 2);
-  
+
   @if not list.index($_valid-intents, $intent) {
     @error "Invalid intent: #{$intent}. Please use a valid intent: #{$_valid-intents}.";
   }
-  
+
   @if $intent == 'bind' {
-    @include key.bind($key, $value);
+    & {
+      @include key.bind($key, $value);
+    }
   } @else if $intent == 'create' {
-    #{$property}: key.create($key, $value);
+    & {
+      #{$property}: key.create($key, $value);
+    }
   }
 }

packages/hashi/hs-dialog/_dialog-base.scss

@@ -41,7 +41,9 @@
         radius: $radius,
         shadow: 'normal'
       ));
-      overflow: hidden;
+      & {
+        overflow: hidden;
+      }
 
       .hs-dialog__header {
         // width: 100%;