Skip to content

Commit 6444070

Browse files
nex3nex3
committed
Add tests for CSS-style if() 
1 parent 6439fb0 commit 6444070

36 files changed

+3233
-12
lines changed

‎spec/css/functions/special_variable.hrx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<===> README.md
2+
There are numerous places in Sass where special variable strings are handled
3+
specially or allowed to take the place of multiple arguments. We don't
4+
explicitly test all types of special variable strings in all those locations
5+
because doing so would cause a combinatorial explosion; instead, we generally
6+
test `var()` everywhere and validate here that at least `rgb()` accepts all
7+
special variable strings.
8+
9+
Implementations are still expected to support all special variable strings
10+
everywhere that `var()` is accepted, as indicated by the Sass spec.
11+
12+
<===>
13+
================================================================================
14+
<===> var/input.scss
15+
a {b: rgb(var(--c))}
16+
17+
<===> var/output.css
18+
a {
19+
b: rgb(var(--c));
20+
}
21+
22+
<===>
23+
================================================================================
24+
<===> attr/input.scss
25+
a {b: rgb(attr(c))}
26+
27+
<===> attr/output.css
28+
a {
29+
b: rgb(attr(c));
30+
}
31+
32+
<===>
33+
================================================================================
34+
<===> if/input.scss
35+
a {b: rgb(if(css(): c))}
36+
37+
<===> if/output.css
38+
a {
39+
b: rgb(if(css(): c));
40+
}

‎spec/css/media/range/with_expressions.hrx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,64 +25,66 @@ $width: width;
2525
dynamic: left;
2626
}
2727
}
28-
2928
@media (width < 600px) {
3029
a {
3130
dynamic: right;
3231
}
3332
}
34-
3533
@media (width < 600px) {
3634
a {
3735
dynamic: both;
3836
}
3937
}
40-
4138
@media (width = 600px) {
4239
a {
4340
separator: equals;
4441
}
4542
}
46-
4743
@media (100px < width < 600px) {
4844
a {
4945
dynamic: left;
5046
}
5147
}
52-
5348
@media (100px < width < 600px) {
5449
a {
5550
dynamic: middle;
5651
}
5752
}
58-
5953
@media (100px < width < 600px) {
6054
a {
6155
dynamic: right;
6256
}
6357
}
64-
6558
@media (100px < width < 600px) {
6659
a {
6760
dynamic: all;
6861
}
6962
}
70-
7163
@media (width < true) {
7264
a {
7365
comparison: in-operator;
7466
}
7567
}
76-
7768
@media (width < 500px) {
7869
a {
7970
comparison: in-function;
8071
}
8172
}
82-
8373
@media (width < [true]) {
8474
a {
8575
comparison: in-square-brackets;
8676
}
8777
}
8878

79+
<===> warning
80+
DEPRECATION WARNING [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.
81+
82+
Suggestion: if(sass(1 < 2): 500px; else: 600px)
83+
84+
More info: https://sass-lang.com/d/if-function
85+
86+
,
87+
18 | @media (width < if(1 < 2, 500px, 600px)) {a {comparison: in-function}}
88+
| ^^^^^^^^^^^^^^^^^^^^^^^
89+
'
90+
input.scss 18:17 root stylesheet

‎spec/css/plain/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
These specs are for CSS files that are imported by Sass, using `@import "foo"`
2-
to import `foo.css`. These files should be parsed as plain CSS, and should not
1+
These specs are for CSS files that are imported by Sass, using `@use "foo"` to
2+
import `foo.css`. These files should be parsed as plain CSS, and should not
33
allow any Sass-specific features.
44

55
As a rule, anything in the plain CSS files that would be interpreted differently

‎spec/css/plain/error/expression/if.hrx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<===> sass/direct/input.scss
2+
@use "plain";
3+
4+
<===> sass/direct/plain.css
5+
a {b: if(sass(true): c)}
6+
7+
<===> sass/direct/error
8+
Error: sass() conditions aren't allowed in plain CSS
9+
,
10+
1 | a {b: if(sass(true): c)}
11+
| ^^^^^^^^^^
12+
'
13+
plain.css 1:10 @use
14+
input.scss 1:1 root stylesheet
15+
16+
<===>
17+
================================================================================
18+
<===> sass/not/input.scss
19+
@use "plain";
20+
21+
<===> sass/not/plain.css
22+
a {b: if(not sass(true): c)}
23+
24+
<===> sass/not/error
25+
Error: sass() conditions aren't allowed in plain CSS
26+
,
27+
1 | a {b: if(not sass(true): c)}
28+
| ^^^^^^^^^^
29+
'
30+
plain.css 1:14 @use
31+
input.scss 1:1 root stylesheet
32+
33+
<===>
34+
================================================================================
35+
<===> sass/and/input.scss
36+
@use "plain";
37+
38+
<===> sass/and/plain.css
39+
a {b: if(sass(true) and css(): c)}
40+
41+
<===> sass/and/error
42+
Error: sass() conditions aren't allowed in plain CSS
43+
,
44+
1 | a {b: if(sass(true) and css(): c)}
45+
| ^^^^^^^^^^
46+
'
47+
plain.css 1:10 @use
48+
input.scss 1:1 root stylesheet
49+
50+
<===>
51+
================================================================================
52+
<===> sass/or/input.scss
53+
@use "plain";
54+
55+
<===> sass/or/plain.css
56+
a {b: if(sass(true) or css(): c)}
57+
58+
<===> sass/or/error
59+
Error: sass() conditions aren't allowed in plain CSS
60+
,
61+
1 | a {b: if(sass(true) or css(): c)}
62+
| ^^^^^^^^^^
63+
'
64+
plain.css 1:10 @use
65+
input.scss 1:1 root stylesheet
66+
67+
<===>
68+
================================================================================
69+
<===> sass/paren/input.scss
70+
@use "plain";
71+
72+
<===> sass/paren/plain.css
73+
a {b: if((sass(true)): c)}
74+
75+
<===> sass/paren/error
76+
Error: sass() conditions aren't allowed in plain CSS
77+
,
78+
1 | a {b: if((sass(true)): c)}
79+
| ^^^^^^^^^^
80+
'
81+
plain.css 1:11 @use
82+
input.scss 1:1 root stylesheet
83+
84+
<===>
85+
================================================================================
86+
<===> interp/direct/input.scss
87+
@use "plain";
88+
89+
<===> interp/direct/plain.css
90+
a {b: if(#{css()}: c)}
91+
92+
<===> interp/direct/error
93+
Error: Interpolation isn't allowed in plain CSS.
94+
,
95+
1 | a {b: if(#{css()}: c)}
96+
| ^^^^^^^^
97+
'
98+
plain.css 1:10 @use
99+
input.scss 1:1 root stylesheet
100+
101+
<===>
102+
================================================================================
103+
<===> interp/not/input.scss
104+
@use "plain";
105+
106+
<===> interp/not/plain.css
107+
a {b: if(not #{css()}: c)}
108+
109+
<===> interp/not/error
110+
Error: Interpolation isn't allowed in plain CSS.
111+
,
112+
1 | a {b: if(not #{css()}: c)}
113+
| ^^^^^^^^
114+
'
115+
plain.css 1:14 @use
116+
input.scss 1:1 root stylesheet
117+
118+
<===>
119+
================================================================================
120+
<===> interp/and/input.scss
121+
@use "plain";
122+
123+
<===> interp/and/plain.css
124+
a {b: if(#{css(1)} and css(2): c)}
125+
126+
<===> interp/and/error
127+
Error: Interpolation isn't allowed in plain CSS.
128+
,
129+
1 | a {b: if(#{css(1)} and css(2): c)}
130+
| ^^^^^^^^^
131+
'
132+
plain.css 1:10 @use
133+
input.scss 1:1 root stylesheet
134+
135+
<===>
136+
================================================================================
137+
<===> interp/or/input.scss
138+
@use "plain";
139+
140+
<===> interp/or/plain.css
141+
a {b: if(#{css(1)} or css(2): c)}
142+
143+
<===> interp/or/error
144+
Error: Interpolation isn't allowed in plain CSS.
145+
,
146+
1 | a {b: if(#{css(1)} or css(2): c)}
147+
| ^^^^^^^^^
148+
'
149+
plain.css 1:10 @use
150+
input.scss 1:1 root stylesheet
151+
152+
<===>
153+
================================================================================
154+
<===> interp/paren/input.scss
155+
@use "plain";
156+
157+
<===> interp/paren/plain.css
158+
a {b: if((#{css()}): c)}
159+
160+
<===> interp/paren/error
161+
Error: Interpolation isn't allowed in plain CSS.
162+
,
163+
1 | a {b: if((#{css()}): c)}
164+
| ^^^^^^^^
165+
'
166+
plain.css 1:11 @use
167+
input.scss 1:1 root stylesheet

‎spec/css/plain/if.hrx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<===> input.scss
2+
@use "plain";
3+
4+
<===> plain.css
5+
a {b: if(css(1): c; css(2): d; else: e)}
6+
7+
<===> output.css
8+
a {
9+
b: if(css(1): c; css(2): d; else: e);
10+
}

0 commit comments

Comments
 (0)