Fix SASS deprecations

EasyPost · Aug 27, 2024 · 9450b40 · 9450b40
1 parent 1909d81
commit 9450b40
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 57 deletions.
diff --git a/easy-ui-react/src/Button/Button.module.scss b/easy-ui-react/src/Button/Button.module.scss
@@ -35,7 +35,10 @@
 
 .variantFilled {
   @include Button.variantFilled;
-  padding: design-token("space.1.5") design-token("space.2");
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    padding: design-token("space.1.5") design-token("space.2");
+  }
 }
 
 .variantOutlined {

diff --git a/easy-ui-react/src/Card/Card.module.scss b/easy-ui-react/src/Card/Card.module.scss
@@ -14,10 +14,13 @@ 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%;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    background: component-token("card-area", "background");
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
   > * {
     flex: 1 0 auto;
   }

diff --git a/easy-ui-react/src/DataGrid/Cell.module.scss b/easy-ui-react/src/DataGrid/Cell.module.scss
@@ -16,7 +16,11 @@
 
 .focused {
   @include native-focus-ring;
-  outline-offset: -1px;
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    outline-offset: -1px;
+  }
 }
 
 .expanded {

diff --git a/easy-ui-react/src/DataGrid/ColumnHeader.module.scss b/easy-ui-react/src/DataGrid/ColumnHeader.module.scss
@@ -24,7 +24,10 @@
 
 .focused {
   @include native-focus-ring;
-  outline-offset: -1px;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    outline-offset: -1px;
+  }
 }
 
 .first {

diff --git a/easy-ui-react/src/DropdownButton/DropdownButton.module.scss b/easy-ui-react/src/DropdownButton/DropdownButton.module.scss
@@ -3,8 +3,11 @@
 
 .DropdownButton {
   @include Button.base;
-  @include font-style("button");
-  gap: design-token("space.1.5");
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    @include font-style("button");
+    gap: design-token("space.1.5");
+  }
 }
 
 .colorPrimary {
@@ -37,15 +40,21 @@
 
 .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")});
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    padding: calc(
+        #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
+      )
+      calc(#{design-token("space.2")} - #{design-token("shape.border_width.1")});
+  }
 }
 
 .variantFilled {
   @include Button.variantFilled;
-  padding: design-token("space.1.5") design-token("space.2");
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    padding: design-token("space.1.5") design-token("space.2");
+  }
 }
 
 .pipeSeparator {

diff --git a/easy-ui-react/src/HorizontalGrid/HorizontalGrid.module.scss b/easy-ui-react/src/HorizontalGrid/HorizontalGrid.module.scss
@@ -8,6 +8,9 @@
   );
   @include responsive-prop("horizontal-grid", "gap", "gap");
 
-  display: component-token("horizontal-grid", "display");
-  align-items: component-token("horizontal-grid", "align-items");
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    display: component-token("horizontal-grid", "display");
+    align-items: component-token("horizontal-grid", "align-items");
+  }
 }
diff --git a/easy-ui-react/src/HorizontalStack/HorizontalStack.module.scss b/easy-ui-react/src/HorizontalStack/HorizontalStack.module.scss
@@ -3,13 +3,16 @@
 .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");
-  justify-content: component-token("horizontal-stack", "align");
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    display: component-token("horizontal-stack", "display");
+    flex-wrap: component-token("horizontal-stack", "wrap");
+    align-items: component-token("horizontal-stack", "block-align");
+    justify-content: component-token("horizontal-stack", "align");
 
-  // fixes cases where text needs to be truncated inside a horizontal stack
-  // due to the way flexbox behaves with text truncation
-  // https://css-tricks.com/flexbox-truncated-text
-  min-width: 0;
+    // fixes cases where text needs to be truncated inside a horizontal stack
+    // due to the way flexbox behaves with text truncation
+    // https://css-tricks.com/flexbox-truncated-text
+    min-width: 0;
+  }
 }
diff --git a/easy-ui-react/src/Icon/Icon.module.scss b/easy-ui-react/src/Icon/Icon.module.scss
@@ -3,16 +3,21 @@
 .Icon {
   @include component-token("icon", "color", currentColor);
   @include responsive-props("icon", "size") using ($var) {
-    width: $var;
-    height: $var;
+    & {
+      width: $var;
+      height: $var;
+    }
   }
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  max-height: 100%;
-  max-width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+  }
 
   svg {
     fill: component-token("icon", "color");

diff --git a/easy-ui-react/src/IconButton/IconButton.module.scss b/easy-ui-react/src/IconButton/IconButton.module.scss
@@ -35,12 +35,18 @@
 
 .variantOutlined {
   @include Button.variantOutlined;
-  padding: calc(
-    #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
-  );
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    padding: calc(
+      #{design-token("space.1.5")} - #{design-token("shape.border_width.1")}
+    );
+  }
 }
 
 .variantFilled {
   @include Button.variantFilled;
-  padding: design-token("space.1.5");
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    padding: design-token("space.1.5");
+  }
 }
diff --git a/easy-ui-react/src/Menu/_mixins.scss b/easy-ui-react/src/Menu/_mixins.scss
@@ -36,14 +36,16 @@
 
   @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");
-  border-radius: component-token("menu", "border_radius");
-  box-shadow: component-token("menu", "shadow");
-  display: flex;
-  flex-direction: column;
-  min-width: component-token("menu", "min-width");
+  & {
+    background: component-token("menu", "color.background");
+    border: design-token("shape.border_width.1") solid
+      component-token("menu", "color.border");
+    border-radius: component-token("menu", "border_radius");
+    box-shadow: component-token("menu", "shadow");
+    display: flex;
+    flex-direction: column;
+    min-width: component-token("menu", "min-width");
+  }
 }
 
 @mixin menu {

diff --git a/easy-ui-react/src/RadioGroup/RadioGroupItem.module.scss b/easy-ui-react/src/RadioGroup/RadioGroupItem.module.scss
@@ -12,7 +12,10 @@
 
 .label {
   @include overlay-input;
-  display: inline-flex;
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    display: inline-flex;
+  }
 }
 
 .radioOuter,
@@ -33,8 +36,11 @@
 
   .focusVisible & {
     @include native-focus-ring;
-    // without an offset the outline conflicts with the radio outline
-    outline-offset: 1px;
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    & {
+      // without an offset the outline conflicts with the radio outline
+      outline-offset: 1px;
+    }
   }
 }
 

diff --git a/easy-ui-react/src/Select/Select.module.scss b/easy-ui-react/src/Select/Select.module.scss
@@ -59,8 +59,12 @@
 
 .selectField {
   @include Input.input;
-  display: flex;
-  align-items: center;
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    display: flex;
+    align-items: center;
+  }
 
   &:hover {
     @include Input.hovered;

diff --git a/easy-ui-react/src/Toggle/Toggle.module.scss b/easy-ui-react/src/Toggle/Toggle.module.scss
@@ -2,9 +2,13 @@
 
 .Toggle {
   @include overlay-input;
-  display: inline-flex;
-  align-items: center;
-  gap: design-token("space.1.5");
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    display: inline-flex;
+    align-items: center;
+    gap: design-token("space.1.5");
+  }
 }
 
 .text,

diff --git a/easy-ui-react/src/VerticalStack/VerticalStack.module.scss b/easy-ui-react/src/VerticalStack/VerticalStack.module.scss
@@ -2,10 +2,14 @@
 
 .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");
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  & {
+    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");
+  }
 }
 
 .listReset {

diff --git a/easy-ui-react/src/styles/_responsive-props.scss b/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;
+    }
   }
 }