Skip to content

Commit 2ea459f

Browse files
mrholekmrholek
committed
refactor: consolidate multiple none values in box-shadow Sass mixin
1 parent e578532 commit 2ea459f

File tree

2 files changed

+198
-5
lines changed

2 files changed

+198
-5
lines changed

‎scss/mixins/_box-shadow.scss

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,23 @@
44
@mixin box-shadow($shadow...) {
55
@if $enable-shadows {
66
$result: ();
7+
$has-single-value: false;
8+
$single-value: null;
79

810
@each $value in $shadow {
911
@if $value != null {
10-
$result: list.append($result, $value, "comma");
11-
}
12-
@if $value == none and list.length($shadow) > 1 {
13-
@warn "The keyword 'none' must be used as a single argument.";
12+
@if $value == none or $value == initial or $value == inherit or $value == unset {
13+
$has-single-value: true;
14+
$single-value: $value;
15+
} @else {
16+
$result: list.append($result, $value, "comma");
17+
}
1418
}
1519
}
1620

17-
@if (length($result) > 0) {
21+
@if $has-single-value {
22+
box-shadow: $single-value;
23+
} @else if (list.length($result) > 0) {
1824
box-shadow: $result;
1925
}
2026
}

‎scss/tests/mixins/_box-shadow.test.scss

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
@use "../../variables" as *;
2+
@use "../../mixins/box-shadow" as *;
3+
4+
// Store original value
5+
$original-enable-shadows: $enable-shadows;
6+
7+
// Enable shadows for all tests
8+
$enable-shadows: true !global;
9+
10+
@include describe("box-shadow mixin") {
11+
@include it("handles single none value") {
12+
@include assert() {
13+
@include output() {
14+
.test {
15+
@include box-shadow(none);
16+
}
17+
}
18+
19+
@include expect() {
20+
.test {
21+
box-shadow: none;
22+
}
23+
}
24+
}
25+
}
26+
27+
@include it("handles multiple none values by consolidating them") {
28+
@include assert() {
29+
@include output() {
30+
.test {
31+
@include box-shadow(none, none, none);
32+
}
33+
}
34+
35+
@include expect() {
36+
.test {
37+
box-shadow: none;
38+
}
39+
}
40+
}
41+
}
42+
43+
@include it("handles other single-value keywords (initial, inherit, unset)") {
44+
@include assert() {
45+
@include output() {
46+
.test-initial {
47+
@include box-shadow(initial);
48+
}
49+
.test-inherit {
50+
@include box-shadow(inherit);
51+
}
52+
.test-unset {
53+
@include box-shadow(unset);
54+
}
55+
}
56+
57+
@include expect() {
58+
.test-initial {
59+
box-shadow: initial;
60+
}
61+
.test-inherit {
62+
box-shadow: inherit;
63+
}
64+
.test-unset {
65+
box-shadow: unset;
66+
}
67+
}
68+
}
69+
}
70+
71+
@include it("handles multiple single-value keywords by using the last one") {
72+
@include assert() {
73+
@include output() {
74+
.test {
75+
@include box-shadow(initial, inherit, unset);
76+
}
77+
}
78+
79+
@include expect() {
80+
.test {
81+
box-shadow: unset;
82+
}
83+
}
84+
}
85+
}
86+
87+
@include it("handles regular box-shadow values") {
88+
@include assert() {
89+
@include output() {
90+
.test {
91+
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
92+
}
93+
}
94+
95+
@include expect() {
96+
.test {
97+
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
98+
}
99+
}
100+
}
101+
}
102+
103+
@include it("handles multiple regular box-shadow values") {
104+
@include assert() {
105+
@include output() {
106+
.test {
107+
@include box-shadow(0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3));
108+
}
109+
}
110+
111+
@include expect() {
112+
.test {
113+
box-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
114+
}
115+
}
116+
}
117+
}
118+
119+
@include it("handles null values by ignoring them") {
120+
@include assert() {
121+
@include output() {
122+
.test {
123+
@include box-shadow(null, 0 0 10px rgba(0, 0, 0, .5), null);
124+
}
125+
}
126+
127+
@include expect() {
128+
.test {
129+
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
130+
}
131+
}
132+
}
133+
}
134+
135+
@include it("handles mixed values with keywords and regular shadows") {
136+
@include assert() {
137+
@include output() {
138+
.test {
139+
@include box-shadow(none, 0 0 10px rgba(0, 0, 0, .5));
140+
}
141+
}
142+
143+
@include expect() {
144+
.test {
145+
box-shadow: none;
146+
}
147+
}
148+
}
149+
}
150+
151+
@include it("handles empty input") {
152+
@include assert() {
153+
@include output() {
154+
.test {
155+
@include box-shadow();
156+
}
157+
}
158+
159+
@include expect() {
160+
.test { // stylelint-disable-line block-no-empty
161+
}
162+
}
163+
}
164+
}
165+
166+
@include it("respects $enable-shadows variable") {
167+
$enable-shadows: false !global;
168+
169+
@include assert() {
170+
@include output() {
171+
.test {
172+
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
173+
}
174+
}
175+
176+
@include expect() {
177+
.test { // stylelint-disable-line block-no-empty
178+
}
179+
}
180+
}
181+
182+
$enable-shadows: true !global;
183+
}
184+
}
185+
186+
// Restore original value
187+
$enable-shadows: $original-enable-shadows !global;

0 commit comments

Comments
 (0)