Skip to content

Commit 45ffc6c

Browse files
juliovedovattojuliovedovatto
committed
more use-case tests added
1 parent 94eb0aa commit 45ffc6c

11 files changed

+108
-77
lines changed

‎test/fixtures/nested-inside-calc-func-with-fallback-var.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root {
2+
--some-width: 150px;
3+
--some-other-width: 50px;
4+
}
5+
6+
.box-foo {
7+
width: calc(58.3333333333% - var(--missing, var(--some-width, 100px)));
8+
}
9+
10+
.box-foo {
11+
width: calc(58.3333333333% - var(--missing, var(--missing2, 100px)));
12+
}
13+
14+
.box-foo {
15+
width: calc(58.3333333333% - var(--missing, var(--missing2, var(--some-other-width))));
16+
}

‎test/fixtures/nested-inside-calc-func-with-fallback-var.expected.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.box-foo {
2+
width: calc(58.3333333333% - 150px);
3+
}
4+
5+
.box-foo {
6+
width: calc(58.3333333333% - 100px);
7+
}
8+
9+
.box-foo {
10+
width: calc(58.3333333333% - 50px);
11+
}

‎test/fixtures/nested-inside-calc-func-with-fallback.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:root {
2+
--some-width: 150px;
3+
}
4+
5+
.box-foo {
6+
width: calc(58.3333333333% - var(--some-width, 100px));
7+
}
8+
9+
.box-foo {
10+
width: calc(58.3333333333% - var(--missing, 100px));
11+
}

‎test/fixtures/nested-inside-calc-func-with-fallback.expected.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.box-foo {
2+
width: calc(58.3333333333% - 150px);
3+
}
4+
5+
.box-foo {
6+
width: calc(58.3333333333% - 100px);
7+
}

‎test/fixtures/nested-inside-calc-func.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
:root {
2+
--some-width: 150px;
3+
--some-other-width: 50px;
4+
}
5+
6+
.box-foo {
7+
width: calc(1000% - var(--some-width));
8+
}
9+
10+
.box-foo {
11+
width: calc(1000% - var(--missing-width));
12+
}
13+
14+
.box-foo {
15+
width: calc(var(--some-width) - var(--some-other-width));
16+
}
17+
18+
.box-foo {
19+
--widthA: 100px;
20+
--widthB: calc(var(--widthA) / 2);
21+
--widthC: calc(var(--widthB) / 2);
22+
width: var(--widthC);
23+
}

‎test/fixtures/nested-inside-calc-func.expected.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.box-foo {
2+
width: calc(1000% - 150px);
3+
}
4+
5+
.box-foo {
6+
width: undefined;
7+
}
8+
9+
.box-foo {
10+
width: calc(150px - 50px);
11+
}
12+
13+
.box-foo {
14+
width: calc(calc(100px / 2) / 2);
15+
}

‎test/fixtures/nested-inside-other-func-with-fallback.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:root {
2+
--some-color: red;
3+
}
4+
.box-foo {
5+
background-color: color(var(--missing, white));
6+
}
7+
.box-foo {
8+
background-color: color(var(--some-color, white));
9+
}

‎test/fixtures/nested-inside-other-func-with-fallback.expected.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.box-foo {
2+
background-color: color(white);
3+
}
4+
.box-foo {
5+
background-color: color(red);
6+
}

‎test/fixtures/nested-inside-other-func.css

Lines changed: 3 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,16 @@
11
:root {
22
--some-color: red;
3-
--some-width: 150px;
4-
--some-other-width: 50px;
5-
--some-margin: 25px;
6-
--some-padding: 20px;
3+
--some-opacity: 0.3;
74
}
85

96
.box-foo {
107
background-color: color(var(--some-color));
118
}
129

1310
.box-foo {
14-
background-color: color(var(--missing, white));
11+
background-color: rgba(255, 0, 0, var(--some-opacity));
1512
}
1613

1714
.box-foo {
18-
width: calc(58.3333333333% - var(--some-width, 100px));
19-
}
20-
21-
.box-foo {
22-
width: calc(58.3333333333% - var(--missing, 100px));
23-
}
24-
25-
.box-foo {
26-
width: calc(80vw - var(--missing, var(--some-other-width)));
27-
}
28-
29-
.box-foo {
30-
width: calc(58.3333333333% - var(--missing, var(--some-width, 100px)));
31-
}
32-
33-
.box-foo {
34-
width: calc(100vw - var(--missing));
35-
}
36-
37-
.box-foo {
38-
width: calc(var(--some-width) - var(--some-other-width));
39-
}
40-
41-
.box-foo {
42-
--widthA: 100px;
43-
--widthB: calc(var(--widthA) / 2);
44-
--widthC: calc(var(--widthB) / 2);
45-
width: var(--widthC);
46-
}
47-
48-
.box-foo {
49-
margin: calc(var(--some-margin) - 2px) calc(1rem - var(--missing));
50-
}
51-
52-
.box-foo {
53-
padding: calc(var(--some-padding) - 2px) calc(100px - var(--some-padding)) calc(100px - calc(var(--missing, 20px) - 10px));
15+
background-color: hsla(120,100%,50%, var(--missing-opacity));
5416
}

‎test/fixtures/nested-inside-other-func.expected.css

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,9 @@
33
}
44

55
.box-foo {
6-
background-color: color(white);
6+
background-color: rgba(255, 0, 0, 0.3);
77
}
88

99
.box-foo {
10-
width: calc(58.3333333333% - 150px);
11-
}
12-
13-
.box-foo {
14-
width: calc(58.3333333333% - 100px);
15-
}
16-
17-
.box-foo {
18-
width: calc(80vw - 50px);
19-
}
20-
21-
.box-foo {
22-
width: calc(58.3333333333% - 150px);
23-
}
24-
25-
.box-foo {
26-
width: undefined;
27-
}
28-
29-
.box-foo {
30-
width: calc(150px - 50px);
31-
}
32-
33-
.box-foo {
34-
width: calc(calc(100px / 2) / 2);
35-
}
36-
37-
.box-foo {
38-
margin: undefined
39-
}
40-
41-
.box-foo {
42-
padding: calc(20px - 2px) calc(100px - 20px) calc(100px - calc(20px - 10px));
43-
}
44-
10+
background-color: undefined;
11+
}

‎test/test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,10 @@ describe('postcss-css-variables', function() {
255255
test('should use fallback variable if provided with missing variables calc', 'missing-variable-should-fallback-calc');
256256
test('should use fallback variable if provided with missing variables nested', 'missing-variable-should-fallback-nested');
257257
test('should not mangle outer function parentheses', 'nested-inside-other-func');
258+
test('should not mangle outer function parentheses - with fallback', 'nested-inside-other-func-with-fallback');
259+
test('should not mangle outer function parentheses - calc', 'nested-inside-calc-func');
260+
test('should not mangle outer function parentheses - calc with fallback', 'nested-inside-calc-func-with-fallback');
261+
test('should not mangle outer function parentheses - calc with fallback var()', 'nested-inside-calc-func-with-fallback-var');
258262
});
259263

260264
test('should accept whitespace in var() declarations', 'whitespace-in-var-declaration' )

0 commit comments

Comments
 (0)