Skip to content

Commit 75c4426

Browse files
reme3d2yromainmenke
reme3d2y
authored and
romainmenke
committed
1 parent ecaf822 commit 75c4426

13 files changed

+224
-24
lines changed

‎plugins/postcss-custom-properties/.tape.js

+18
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,24 @@ module.exports = {
133133
expect: 'basic.import.expect.css',
134134
result: 'basic.import.result.css'
135135
},
136+
'basic:import-override': {
137+
message: 'importFrom with { preserve: false } should override root properties',
138+
options: {
139+
preserve: false,
140+
importFrom: {
141+
customProperties: {
142+
'--color': 'rgb(0, 0, 0)',
143+
'--color-2': 'yellow',
144+
'--ref-color': 'var(--color)',
145+
'--margin': '0 10px 20px 30px',
146+
'--shadow-color': 'rgb(0,0,0)',
147+
'--z-index': 10
148+
}
149+
}
150+
},
151+
expect: 'basic.import-override.expect.css',
152+
result: 'basic.import-override.result.css'
153+
},
136154
'basic:export': {
137155
message: 'supports { exportTo: { customProperties: { ... } } } usage',
138156
options: {

‎plugins/postcss-custom-properties/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export default postcss.plugin('postcss-custom-properties', opts => {
2828
const asyncTransform = async root => {
2929
const customProperties = Object.assign(
3030
{},
31+
getCustomPropertiesFromRoot(root, { preserve }),
3132
await customPropertiesPromise,
32-
getCustomPropertiesFromRoot(root, { preserve })
3333
);
3434

3535
await writeCustomPropertiesToExports(customProperties, exportTo);

‎plugins/postcss-custom-properties/src/lib/transform-value-ast.js

+12
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,20 @@ export default function transformValueAST(root, customProperties) {
1010
// conditionally replace a known custom property
1111
const nodes = asClonedArrayWithBeforeSpacing(customProperties[name], child.raws.before);
1212

13+
/**
14+
* https://github.com/postcss/postcss-custom-properties/issues/221
15+
* https://github.com/postcss/postcss-custom-properties/issues/218
16+
*
17+
* replaceWith loses node.raws values, so we need to save it and restore
18+
*/
19+
const raws = nodes.map(node => ({...node.raws}));
20+
1321
child.replaceWith(...nodes);
1422

23+
nodes.forEach((node, index) => {
24+
node.raws = raws[index];
25+
});
26+
1527
retransformValueAST({ nodes }, customProperties, name);
1628
} else if (fallbacks.length) {
1729
// conditionally replace a custom property with a fallback

‎plugins/postcss-custom-properties/test/basic.css

+19-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ html {
1212
--circular: var(--circular-2);
1313
--circular-2: var(--circular);
1414
--margin: 0 10px 20px 30px;
15+
--shadow-color: rgb(255,0,0);
16+
--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
17+
--font-family: "Open Sans", sans-serif;
1518
color: var(--color);
1619
}
1720

@@ -38,6 +41,22 @@ html {
3841
color: var(--color);
3942
}
4043

44+
.test--color_spacing {
45+
box-shadow: inset 0 -3px 0 var(--color);
46+
}
47+
48+
.test--preserve_whitespaces {
49+
margin: var(--margin);
50+
}
51+
52+
.test--complex_values {
53+
box-shadow: var(--shadow);
54+
}
55+
56+
.test--comma_separated_values {
57+
font-family: var(--font-family);
58+
}
59+
4160
.test--fallback {
4261
color: var(--color-2, blue);
4362
}
@@ -54,10 +73,6 @@ html {
5473
color: var(--circular);
5574
}
5675

57-
.test--color_spacing {
58-
box-shadow: inset 0 -3px 0 var(--color);
59-
}
60-
6176
.test--z-index {
6277
z-index: var(--z-index);
6378
}

‎plugins/postcss-custom-properties/test/basic.expect.css

+23-5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ html {
1212
--circular: var(--circular-2);
1313
--circular-2: var(--circular);
1414
--margin: 0 10px 20px 30px;
15+
--shadow-color: rgb(255,0,0);
16+
--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
17+
--font-family: "Open Sans", sans-serif;
1518
color: rgb(255, 0, 0);
1619
color: var(--color);
1720
}
@@ -41,6 +44,26 @@ html {
4144
color: var(--color);
4245
}
4346

47+
.test--color_spacing {
48+
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
49+
box-shadow: inset 0 -3px 0 var(--color);
50+
}
51+
52+
.test--preserve_whitespaces {
53+
margin: 0 10px 20px 30px;
54+
margin: var(--margin);
55+
}
56+
57+
.test--complex_values {
58+
box-shadow: 0 6px 14px 0 color(rgb(255,0,0) a(.15));
59+
box-shadow: var(--shadow);
60+
}
61+
62+
.test--comma_separated_values {
63+
font-family: "Open Sans", sans-serif;
64+
font-family: var(--font-family);
65+
}
66+
4467
.test--fallback {
4568
color: blue;
4669
color: var(--color-2, blue);
@@ -60,11 +83,6 @@ html {
6083
color: var(--circular);
6184
}
6285

63-
.test--color_spacing {
64-
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
65-
box-shadow: inset 0 -3px 0 var(--color);
66-
}
67-
6886
.test--z-index {
6987
z-index: var(--z-index);
7088
}

‎plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css

+23-5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ html {
1212
--circular: var(--circular-2);
1313
--circular-2: var(--circular);
1414
--margin: 0 10px 20px 30px;
15+
--shadow-color: rgb(255,0,0);
16+
--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
17+
--font-family: "Open Sans", sans-serif;
1518
color: rgb(255, 0, 0);
1619
color: var(--color);
1720
}
@@ -41,6 +44,26 @@ html {
4144
color: var(--color);
4245
}
4346

47+
.test--color_spacing {
48+
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
49+
box-shadow: inset 0 -3px 0 var(--color);
50+
}
51+
52+
.test--preserve_whitespaces {
53+
margin: 0 10px 20px 30px;
54+
margin: var(--margin);
55+
}
56+
57+
.test--complex_values {
58+
box-shadow: 0 6px 14px 0 color(rgb(255,0,0) a(.15));
59+
box-shadow: var(--shadow);
60+
}
61+
62+
.test--comma_separated_values {
63+
font-family: "Open Sans", sans-serif;
64+
font-family: var(--font-family);
65+
}
66+
4467
.test--fallback {
4568
color: blue;
4669
color: var(--color-2, blue);
@@ -60,11 +83,6 @@ html {
6083
color: var(--circular);
6184
}
6285

63-
.test--color_spacing {
64-
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
65-
box-shadow: inset 0 -3px 0 var(--color);
66-
}
67-
6886
.test--z-index {
6987
z-index: var(--z-index);
7088
}

‎plugins/postcss-custom-properties/test/basic.import-override.expect.css

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
:root {
2+
color: rgb(0, 0, 0);
3+
}
4+
5+
.ignore-line {
6+
/* postcss-custom-properties: ignore next */
7+
color: var(--color);
8+
background-color: yellow;
9+
}
10+
11+
.ignore-block {
12+
/* postcss-custom-properties: off */
13+
color: var(--color-2, blue);
14+
box-shadow: inset 0 -3px 0 var(--color);
15+
background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
16+
}
17+
18+
.test {
19+
--skip: gray;
20+
color: rgb(0, 0, 0);
21+
}
22+
23+
.test--color_spacing {
24+
box-shadow: inset 0 -3px 0 rgb(0, 0, 0);
25+
}
26+
27+
.test--preserve_whitespaces {
28+
margin: 0 10px 20px 30px;
29+
}
30+
31+
.test--complex_values {
32+
box-shadow: 0 6px 14px 0 color(rgb(0,0,0) a(.15));
33+
}
34+
35+
.test--comma_separated_values {
36+
font-family: "Open Sans", sans-serif;
37+
}
38+
39+
.test--fallback {
40+
color: yellow;
41+
}
42+
43+
.test--color_w_var {
44+
color: rgb(0, 0, 0);
45+
}
46+
47+
.test--color_w_vars {
48+
color: hsl(0, 100%, 50%);
49+
}
50+
51+
.test--circular_var {
52+
color: var(--circular);
53+
}
54+
55+
.test--z-index {
56+
z-index: 10;
57+
}
58+
59+
.test--nested-fallback {
60+
z-index: 1;
61+
}
62+
63+
.text--calc {
64+
width: calc((100% - 1px) + 10px);
65+
}
66+
67+
.test--linear-gradient {
68+
background-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%);
69+
}
70+
71+
.test--loose-formatting {
72+
color: rgb(0, 0, 0)/*rtl:red*/;
73+
}
74+
75+
.test--combined-selector {
76+
color: #053;
77+
}

‎plugins/postcss-custom-properties/test/basic.import.expect.css

+23-5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ html {
1212
--circular: var(--circular-2);
1313
--circular-2: var(--circular);
1414
--margin: 0 10px 20px 30px;
15+
--shadow-color: rgb(255,0,0);
16+
--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
17+
--font-family: "Open Sans", sans-serif;
1518
color: rgb(255, 0, 0);
1619
color: var(--color);
1720
}
@@ -41,6 +44,26 @@ html {
4144
color: var(--color);
4245
}
4346

47+
.test--color_spacing {
48+
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
49+
box-shadow: inset 0 -3px 0 var(--color);
50+
}
51+
52+
.test--preserve_whitespaces {
53+
margin: 0 10px 20px 30px;
54+
margin: var(--margin);
55+
}
56+
57+
.test--complex_values {
58+
box-shadow: 0 6px 14px 0 color(rgb(255,0,0) a(.15));
59+
box-shadow: var(--shadow);
60+
}
61+
62+
.test--comma_separated_values {
63+
font-family: "Open Sans", sans-serif;
64+
font-family: var(--font-family);
65+
}
66+
4467
.test--fallback {
4568
color: yellow;
4669
color: var(--color-2, blue);
@@ -60,11 +83,6 @@ html {
6083
color: var(--circular);
6184
}
6285

63-
.test--color_spacing {
64-
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
65-
box-shadow: inset 0 -3px 0 var(--color);
66-
}
67-
6886
.test--z-index {
6987
z-index: 10;
7088
z-index: var(--z-index);

‎plugins/postcss-custom-properties/test/basic.preserve.expect.css

+16-4
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,22 @@
2020
color: rgb(255, 0, 0);
2121
}
2222

23+
.test--color_spacing {
24+
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
25+
}
26+
27+
.test--preserve_whitespaces {
28+
margin: 0 10px 20px 30px;
29+
}
30+
31+
.test--complex_values {
32+
box-shadow: 0 6px 14px 0 color(rgb(255,0,0) a(.15));
33+
}
34+
35+
.test--comma_separated_values {
36+
font-family: "Open Sans", sans-serif;
37+
}
38+
2339
.test--fallback {
2440
color: blue;
2541
}
@@ -36,10 +52,6 @@
3652
color: var(--circular);
3753
}
3854

39-
.test--color_spacing {
40-
box-shadow: inset 0 -3px 0 rgb(255, 0, 0);
41-
}
42-
4355
.test--z-index {
4456
z-index: var(--z-index);
4557
}

‎plugins/postcss-custom-properties/test/export-properties.css

+3
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,8 @@
88
--circular: var(--circular-2);
99
--circular-2: var(--circular);
1010
--margin: 0 10px 20px 30px;
11+
--shadow-color: rgb(255,0,0);
12+
--shadow: 0 6px 14px 0 color(var(--shadow-color) a(.15));
13+
--font-family: "Open Sans" , sans-serif;
1114
--theme-color: #053;
1215
}

‎plugins/postcss-custom-properties/test/export-properties.js

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ module.exports = {
99
'--circular': 'var(--circular-2)',
1010
'--circular-2': 'var(--circular)',
1111
'--margin': '0 10px 20px 30px',
12+
'--shadow-color': 'rgb(255,0,0)',
13+
'--shadow': '0 6px 14px 0 color(var(--shadow-color) a(.15))',
14+
'--font-family': '"Open Sans" , sans-serif',
1215
'--theme-color': '#053'
1316
}
1417
};

‎plugins/postcss-custom-properties/test/export-properties.json

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
"--circular": "var(--circular-2)",
1010
"--circular-2": "var(--circular)",
1111
"--margin": "0 10px 20px 30px",
12+
"--shadow-color": "rgb(255,0,0)",
13+
"--shadow": "0 6px 14px 0 color(var(--shadow-color) a(.15))",
14+
"--font-family": "\"Open Sans\" , sans-serif",
1215
"--theme-color": "#053"
1316
}
1417
}

‎plugins/postcss-custom-properties/test/export-properties.mjs

+3
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,8 @@ export const customProperties = {
88
'--circular': 'var(--circular-2)',
99
'--circular-2': 'var(--circular)',
1010
'--margin': '0 10px 20px 30px',
11+
'--shadow-color': 'rgb(255,0,0)',
12+
'--shadow': '0 6px 14px 0 color(var(--shadow-color) a(.15))',
13+
'--font-family': '"Open Sans" , sans-serif',
1114
'--theme-color': '#053'
1215
};

0 commit comments

Comments
 (0)