Consolidate multiple 'none' values in `box-shadow` Sass mixin (#41469)

diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
index 4172541f3fe5b539778a05ee99ec9e26616a7ca6..0bb6bf7e7d87e03fd2b82109c724ae01525a6015 100644 (file)
--- a/scss/mixins/_box-shadow.scss
+++ b/scss/mixins/_box-shadow.scss
@@ -1,17 +1,23 @@
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     $result: ();
+    $has-single-value: false;
+    $single-value: null;
 
     @each $value in $shadow {
       @if $value != null {
-        $result: append($result, $value, "comma");
-      }
-      @if $value == none and length($shadow) > 1 {
-        @warn "The keyword 'none' must be used as a single argument.";
+        @if $value == none or $value == initial or $value == inherit or $value == unset {
+          $has-single-value: true;
+          $single-value: $value;
+        } @else {
+          $result: append($result, $value, "comma");
+        }
       }
     }
 
-    @if (length($result) > 0) {
+    @if $has-single-value {
+      box-shadow: $single-value;
+    } @else if (length($result) > 0) {
       box-shadow: $result;
     }
   }

diff --git a/scss/tests/mixins/_box-shadow.test.scss b/scss/tests/mixins/_box-shadow.test.scss
new file mode 100644 (file)
index 0000000..f5a0748
--- /dev/null
+++ b/scss/tests/mixins/_box-shadow.test.scss
@@ -0,0 +1,188 @@
+@import "../../functions";
+@import "../../variables";
+@import "../../mixins";
+
+// Store original value
+$original-enable-shadows: $enable-shadows;
+
+// Enable shadows for all tests
+$enable-shadows: true !global;
+
+@include describe("box-shadow mixin") {
+  @include it("handles single none value") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(none);
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  @include it("handles multiple none values by consolidating them") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(none, none, none);
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  @include it("handles other single-value keywords (initial, inherit, unset)") {
+    @include assert() {
+      @include output() {
+        .test-initial {
+          @include box-shadow(initial);
+        }
+        .test-inherit {
+          @include box-shadow(inherit);
+        }
+        .test-unset {
+          @include box-shadow(unset);
+        }
+      }
+
+      @include expect() {
+        .test-initial {
+          box-shadow: initial;
+        }
+        .test-inherit {
+          box-shadow: inherit;
+        }
+        .test-unset {
+          box-shadow: unset;
+        }
+      }
+    }
+  }
+
+  @include it("handles multiple single-value keywords by using the last one") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(initial, inherit, unset);
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: unset;
+        }
+      }
+    }
+  }
+
+  @include it("handles regular box-shadow values") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(0 0 10px rgba(0, 0, 0, .5));
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+        }
+      }
+    }
+  }
+
+  @include it("handles multiple regular box-shadow values") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3));
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
+        }
+      }
+    }
+  }
+
+  @include it("handles null values by ignoring them") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(null, 0 0 10px rgba(0, 0, 0, .5), null);
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+        }
+      }
+    }
+  }
+
+  @include it("handles mixed values with keywords and regular shadows") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(none, 0 0 10px rgba(0, 0, 0, .5));
+        }
+      }
+
+      @include expect() {
+        .test {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  @include it("handles empty input") {
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow();
+        }
+      }
+
+      @include expect() {
+        .test { // stylelint-disable-line block-no-empty
+        }
+      }
+    }
+  }
+
+  @include it("respects $enable-shadows variable") {
+    $enable-shadows: false !global;
+
+    @include assert() {
+      @include output() {
+        .test {
+          @include box-shadow(0 0 10px rgba(0, 0, 0, .5));
+        }
+      }
+
+      @include expect() {
+        .test { // stylelint-disable-line block-no-empty
+        }
+      }
+    }
+
+    $enable-shadows: true !global;
+  }
+}
+
+// Restore original value
+$enable-shadows: $original-enable-shadows !global;