Consolidate multiple 'none' values in `box-shadow` Sass mixin (#41469)
BrowserStack / browserstack (push) Waiting to run Details
Bundlewatch / bundlewatch (push) Waiting to run Details
CodeQL / Analyze (push) Waiting to run Details
cspell / cspell (push) Waiting to run Details
CSS / css (push) Waiting to run Details
Docs / docs (push) Waiting to run Details
JS Tests / JS Tests (push) Waiting to run Details
Lint / lint (push) Waiting to run Details
CSS (node-sass) / css (push) Waiting to run Details
Release notes / update_release_draft (push) Waiting to run Details

This commit is contained in:
Julien Déramond 2025-05-20 05:53:18 +02:00 committed by GitHub
parent e5b9f37149
commit 7f946d4241
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 199 additions and 5 deletions

View File

@ -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 {
@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 $value == none and length($shadow) > 1 {
@warn "The keyword 'none' must be used as a single argument.";
}
}
@if (length($result) > 0) {
@if $has-single-value {
box-shadow: $single-value;
} @else if (length($result) > 0) {
box-shadow: $result;
}
}

View File

@ -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;