From f0f080a428c655c232003d40caf6da7c313f4801 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Fri, 13 Dec 2024 19:20:54 -0500
Subject: [PATCH] Refactor: [select, input] Use CSS Nesting

---
 src/components/input/input.css   | 118 +++++++++++++-------------
 src/components/select/select.css | 138 +++++++++++++++++--------------
 2 files changed, 132 insertions(+), 124 deletions(-)

diff --git a/src/components/input/input.css b/src/components/input/input.css
index 1b293db89..26e0c360f 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -126,74 +126,73 @@
 /*
    * Size modifiers
    */
-
 .input--small {
   font-size: var(--wa-font-size-s);
   height: var(--wa-form-control-height-s);
-}
 
-.input--small .input__control {
-  height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
-  padding: 0 var(--wa-space-s);
-}
+  .input__control {
+    height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
+    padding: 0 var(--wa-space-s);
+  }
 
-.input--small .input__clear,
-.input--small .input__password-toggle {
-  width: calc(1em + var(--wa-space-s) * 2);
-}
+  .input__clear,
+  .input__password-toggle {
+    width: calc(1em + var(--wa-space-s) * 2);
+  }
 
-.input--small .input__prefix ::slotted(*) {
-  margin-inline-start: var(--wa-space-s);
-}
+  .input__prefix ::slotted(*) {
+    margin-inline-start: var(--wa-space-s);
+  }
 
-.input--small .input__suffix ::slotted(*) {
-  margin-inline-end: var(--wa-space-s);
+  .input__suffix ::slotted(*) {
+    margin-inline-end: var(--wa-space-s);
+  }
 }
 
 .input--medium {
   font-size: var(--wa-font-size-m);
   height: var(--wa-form-control-height-m);
-}
 
-.input--medium .input__control {
-  height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
-  padding: 0 var(--wa-space-m);
-}
+  .input__control {
+    height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
+    padding: 0 var(--wa-space-m);
+  }
 
-.input--medium .input__clear,
-.input--medium .input__password-toggle {
-  width: calc(1em + var(--wa-space-m) * 2);
-}
+  .input__clear,
+  .input__password-toggle {
+    width: calc(1em + var(--wa-space-m) * 2);
+  }
 
-.input--medium .input__prefix ::slotted(*) {
-  margin-inline-start: var(--wa-space-m);
-}
+  .input__prefix ::slotted(*) {
+    margin-inline-start: var(--wa-space-m);
+  }
 
-.input--medium .input__suffix ::slotted(*) {
-  margin-inline-end: var(--wa-space-m);
+  .input__suffix ::slotted(*) {
+    margin-inline-end: var(--wa-space-m);
+  }
 }
 
 .input--large {
   font-size: var(--wa-font-size-l);
   height: var(--wa-form-control-height-l);
-}
 
-.input--large .input__control {
-  height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
-  padding: 0 var(--wa-space-l);
-}
+  .input__control {
+    height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
+    padding: 0 var(--wa-space-l);
+  }
 
-.input--large .input__clear,
-.input--large .input__password-toggle {
-  width: calc(1em + var(--wa-space-l) * 2);
-}
+  .input__clear,
+  .input__password-toggle {
+    width: calc(1em + var(--wa-space-l) * 2);
+  }
 
-.input--large .input__prefix ::slotted(*) {
-  margin-inline-start: var(--wa-space-l);
-}
+  .input__prefix ::slotted(*) {
+    margin-inline-start: var(--wa-space-l);
+  }
 
-.input--large .input__suffix ::slotted(*) {
-  margin-inline-end: var(--wa-space-l);
+  .input__suffix ::slotted(*) {
+    margin-inline-end: var(--wa-space-l);
+  }
 }
 
 /*
@@ -220,21 +219,18 @@
   padding: 0;
   transition: var(--wa-transition-normal) color;
   cursor: pointer;
-}
 
-.input__clear:hover,
-.input__password-toggle:hover {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
-}
+  &:hover {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
+  }
 
-.input__clear:active,
-.input__password-toggle:active {
-  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
-}
+  &:active {
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
+  }
 
-.input__clear:focus,
-.input__password-toggle:focus {
-  outline: none;
+  &:focus {
+    outline: none;
+  }
 }
 
 /* Don't show the browser's password toggle in Edge */
@@ -243,12 +239,12 @@
 }
 
 /* Hide the built-in number spinner */
-.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
-.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  display: none;
-}
-
 .input--no-spin-buttons input[type='number'] {
   -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
 }
diff --git a/src/components/select/select.css b/src/components/select/select.css
index ffb455d51..aae66f35e 100644
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -146,60 +146,70 @@
 }
 
 /* Sizes */
-.select--small .select__combobox {
-  font-size: var(--wa-font-size-s);
-  min-height: var(--wa-form-control-height-s);
-  padding-block: 0;
-  padding-inline: var(--wa-space-s);
+.select--small {
+  .select__combobox {
+    font-size: var(--wa-font-size-s);
+    min-height: var(--wa-form-control-height-s);
+    padding-block: 0;
+    padding-inline: var(--wa-space-s);
+  }
+
+  .select__clear {
+    margin-inline-start: var(--wa-space-s);
+  }
+
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--wa-space-s);
+  }
+
+  &.select--multiple {
+    &:not(.select--placeholder-visible) .select__prefix::slotted(*) {
+      margin-inline-start: var(--wa-space-s);
+    }
+
+    &:not(.select--placeholder-visible) .select__combobox {
+      padding-block: 2px;
+      padding-inline-start: 0;
+    }
+  }
+
+  .select__tags {
+    gap: 2px;
+  }
 }
 
-.select--small .select__clear {
-  margin-inline-start: var(--wa-space-s);
-}
+.select--medium {
+  .select__combobox {
+    font-size: var(--wa-font-size-m);
+    min-height: var(--wa-form-control-height-m);
+    padding-block: 0;
+    padding-inline: var(--wa-space-m);
+  }
 
-.select--small .select__prefix::slotted(*) {
-  margin-inline-end: var(--wa-space-s);
-}
+  .select__clear {
+    margin-inline-start: var(--wa-space-m);
+  }
 
-.select--small.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
-  margin-inline-start: var(--wa-space-s);
-}
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--wa-space-m);
+  }
 
-.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
-  padding-block: 2px;
-  padding-inline-start: 0;
-}
+  &.select--multiple {
+    &:not(.select--placeholder-visible) {
+      .select__prefix::slotted(*) {
+        margin-inline-start: var(--wa-space-m);
+      }
 
-.select--small .select__tags {
-  gap: 2px;
-}
+      .select__combobox {
+        padding-inline-start: 0;
+        padding-block: 3px;
+      }
+    }
+  }
 
-.select--medium .select__combobox {
-  font-size: var(--wa-font-size-m);
-  min-height: var(--wa-form-control-height-m);
-  padding-block: 0;
-  padding-inline: var(--wa-space-m);
-}
-
-.select--medium .select__clear {
-  margin-inline-start: var(--wa-space-m);
-}
-
-.select--medium .select__prefix::slotted(*) {
-  margin-inline-end: var(--wa-space-m);
-}
-
-.select--medium.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
-  margin-inline-start: var(--wa-space-m);
-}
-
-.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
-  padding-inline-start: 0;
-  padding-block: 3px;
-}
-
-.select--medium .select__tags {
-  gap: 3px;
+  .select__tags {
+    gap: 3px;
+  }
 }
 
 .select--large .select__combobox {
@@ -207,27 +217,29 @@
   min-height: var(--wa-form-control-height-l);
   padding-block: 0;
   padding-inline: var(--wa-space-l);
-}
 
-.select--large .select__clear {
-  margin-inline-start: var(--wa-space-l);
-}
+  .select__clear {
+    margin-inline-start: var(--wa-space-l);
+  }
 
-.select--large .select__prefix::slotted(*) {
-  margin-inline-end: var(--wa-space-l);
-}
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--wa-space-l);
+  }
 
-.select--large.select--multiple:not(.select--placeholder-visible) .select__prefix::slotted(*) {
-  margin-inline-start: var(--wa-space-l);
-}
+  &.select--multiple {
+    &:not(.select--placeholder-visible) .select__prefix::slotted(*) {
+      margin-inline-start: var(--wa-space-l);
+    }
 
-.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
-  padding-inline-start: 0;
-  padding-block: 4px;
-}
+    &:not(.select--placeholder-visible) .select__combobox {
+      padding-inline-start: 0;
+      padding-block: 4px;
+    }
+  }
 
-.select--large .select__tags {
-  gap: 4px;
+  .select__tags {
+    gap: 4px;
+  }
 }
 
 /* Pills */