box-shadow() mixin allow 'null' and drop support 'none' with multiple args (#30394)

* Support 'null' and drop `none` with multiple args

* Output a warning when use 'none' with multiple arguments

* Add migration note

* Update migration.md

Co-authored-by: Mark Otto <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

1 files changed, 7 insertions, 9 deletions

diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
index 0726d4359..4172541f3 100644
--- a/scss/mixins/_box-shadow.scss
+++ b/scss/mixins/_box-shadow.scss
@@ -2,17 +2,15 @@
   @if $enable-shadows {
     $result: ();
 
-    @if (length($shadow) == 1) {
-      // We can pass `@include box-shadow(none);`
-      $result: $shadow;
-    } @else {
-      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
-        }
+    @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 (length($result) > 0) {
       box-shadow: $result;
     }