diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss index 4172541f3f..0bb6bf7e7d 100644 --- 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 index 0000000000..f5a0748498 --- /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;