Fix SASS deprecations (#1337)

## 📝 Changes

SASS introduced a [breaking
change](https://sass-lang.com/documentation/breaking-changes/mixed-decls/)
with nested selectors to be more in line with native CSS. This was
causing a lot of noise in our scripts.

This PR updates our SASS to remove the problematic code. Most of the
time the declartions in SCSS could simply be moved to the top of the
block. With complicated nesting (i.e. `_responsive-props.scss`) we have
to utilize `& { }`.

We'll need to be mindful of this SCSS change in new work—it may warrant
a Stylelint rule if it becomes problematic.

## ✅ Checklist

- [x] Code is complete and in accordance with our style guide
- [x] Changeset is added

.changeset/little-rocks-nail.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": patch
+---
+
+fix: SASS deprecations

easy-ui-react/src/Button/Button.module.scss

@@ -34,8 +34,8 @@
 }
 
 .variantFilled {
-  @include Button.variantFilled;
   padding: design-token("space.1.5") design-token("space.2");
+  @include Button.variantFilled;
 }
 
 .variantOutlined {

easy-ui-react/src/Card/Card.module.scss

@@ -13,11 +13,11 @@ button.container:not([disabled]) {
 }
 
 .area {
-  @include responsive-prop("card-area", "padding", padding);
   background: component-token("card-area", "background");
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  @include responsive-prop("card-area", "padding", padding);
   > * {
     flex: 1 0 auto;
   }

easy-ui-react/src/DataGrid/Cell.module.scss

@@ -15,8 +15,8 @@
 }
 
 .focused {
-  @include native-focus-ring;
   outline-offset: -1px;
+  @include native-focus-ring;
 }
 
 .expanded {

easy-ui-react/src/DataGrid/ColumnHeader.module.scss

@@ -23,8 +23,8 @@
 }
 
 .focused {
-  @include native-focus-ring;
   outline-offset: -1px;
+  @include native-focus-ring;
 }
 
 .first {

easy-ui-react/src/DropdownButton/DropdownButton.module.scss

@@ -2,9 +2,9 @@
 @use "../Button/mixins" as Button;
 
 .DropdownButton {
-  @include Button.base;
   @include font-style("button");
   gap: design-token("space.1.5");
+  @include Button.base;
 }
 
 .colorPrimary {
@@ -36,16 +36,16 @@
 }
 
 .variantOutlined {
-  @include Button.variantOutlined;
   padding: calc(
       #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
     )
     calc(#{design-token("space.2")} - #{design-token("shape.border_width.1")});
+  @include Button.variantOutlined;
 }
 
 .variantFilled {
-  @include Button.variantFilled;
   padding: design-token("space.1.5") design-token("space.2");
+  @include Button.variantFilled;
 }
 
 .pipeSeparator {

easy-ui-react/src/HorizontalGrid/HorizontalGrid.module.scss

@@ -1,13 +1,12 @@
 @use "../styles/common" as *;
 
 .HorizontalGrid {
+  display: component-token("horizontal-grid", "display");
+  align-items: component-token("horizontal-grid", "align-items");
   @include responsive-prop(
     "horizontal-grid",
     "grid-template-columns",
     grid-template-columns
   );
   @include responsive-prop("horizontal-grid", "gap", "gap");
-
-  display: component-token("horizontal-grid", "display");
-  align-items: component-token("horizontal-grid", "align-items");
 }

easy-ui-react/src/HorizontalStack/HorizontalStack.module.scss

@@ -1,8 +1,6 @@
 @use "../styles/common" as *;
 
 .HorizontalStack {
-  @include responsive-prop("horizontal-stack", "gap", gap);
-
   display: component-token("horizontal-stack", "display");
   flex-wrap: component-token("horizontal-stack", "wrap");
   align-items: component-token("horizontal-stack", "block-align");
@@ -12,4 +10,5 @@
   // due to the way flexbox behaves with text truncation
   // https://css-tricks.com/flexbox-truncated-text
   min-width: 0;
+  @include responsive-prop("horizontal-stack", "gap", gap);
 }

easy-ui-react/src/Icon/Icon.module.scss

@@ -1,19 +1,21 @@
 @use "../styles/common" as *;
 
 .Icon {
-  @include component-token("icon", "color", currentColor);
-  @include responsive-props("icon", "size") using ($var) {
-    width: $var;
-    height: $var;
-  }
-
   display: flex;
   align-items: center;
   justify-content: center;
 
   max-height: 100%;
   max-width: 100%;
 
+  @include component-token("icon", "color", currentColor);
+  @include responsive-props("icon", "size") using ($var) {
+    & {
+      width: $var;
+      height: $var;
+    }
+  }
+
   svg {
     fill: component-token("icon", "color");
   }

easy-ui-react/src/IconButton/IconButton.module.scss

@@ -34,13 +34,13 @@
 }
 
 .variantOutlined {
-  @include Button.variantOutlined;
   padding: calc(
     #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
   );
+  @include Button.variantOutlined;
 }
 
 .variantFilled {
-  @include Button.variantFilled;
   padding: design-token("space.1.5");
+  @include Button.variantFilled;
 }

easy-ui-react/src/Menu/_mixins.scss

@@ -34,8 +34,6 @@
     theme-token("color.neutral.300")
   );
 
-  @include responsive-prop("menu", "width", width);
-
   background: component-token("menu", "color.background");
   border: design-token("shape.border_width.1") solid
     component-token("menu", "color.border");
@@ -44,6 +42,8 @@
   display: flex;
   flex-direction: column;
   min-width: component-token("menu", "min-width");
+
+  @include responsive-prop("menu", "width", width);
 }
 
 @mixin menu {

easy-ui-react/src/RadioGroup/RadioGroupItem.module.scss

@@ -11,8 +11,8 @@
 }
 
 .label {
-  @include overlay-input;
   display: inline-flex;
+  @include overlay-input;
 }
 
 .radioOuter,
@@ -32,9 +32,9 @@
     component-token("radio-group-item", "color");
 
   .focusVisible & {
-    @include native-focus-ring;
     // without an offset the outline conflicts with the radio outline
     outline-offset: 1px;
+    @include native-focus-ring;
   }
 }
 

easy-ui-react/src/Select/Select.module.scss

@@ -58,9 +58,9 @@
 }
 
 .selectField {
-  @include Input.input;
   display: flex;
   align-items: center;
+  @include Input.input;
 
   &:hover {
     @include Input.hovered;

easy-ui-react/src/Toggle/Toggle.module.scss

@@ -1,10 +1,10 @@
 @use "../styles/common" as *;
 
 .Toggle {
-  @include overlay-input;
   display: inline-flex;
   align-items: center;
   gap: design-token("space.1.5");
+  @include overlay-input;
 }
 
 .text,

easy-ui-react/src/VerticalStack/VerticalStack.module.scss

@@ -1,11 +1,11 @@
 @use "../styles/common" as *;
 
 .VerticalStack {
-  @include responsive-prop("vertical-stack", "gap", "gap");
   display: component-token("vertical-stack", "display");
   flex-direction: component-token("vertical-stack", "order");
   align-items: component-token("vertical-stack", "inline-align");
   justify-content: component-token("vertical-stack", "align");
+  @include responsive-prop("vertical-stack", "gap", "gap");
 }
 
 .listReset {

easy-ui-react/src/styles/_responsive-props.scss

@@ -31,7 +31,9 @@
 
   // For each of our breakpoints, initialize an initial value (literally)
   @each $bp-alias in $bp-aliases {
-    --ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp}-#{$bp-alias}: initial;
+    & {
+      --ezui-c-#{$cleanedComponentName}-#{$cleanedComponentProp}-#{$bp-alias}: initial;
+    }
   }
 
   // For each of our breakpoints, create a media query block and assign a
@@ -81,6 +83,8 @@
 // Shorthand for applying a CSS variable template to a single CSS prop
 @mixin responsive-prop($componentName, $componentProp, $declarationProp) {
   @include responsive-props($componentName, $componentProp) using ($var) {
-    #{$declarationProp}: $var;
+    & {
+      #{$declarationProp}: $var;
+    }
   }
 }