Skip to content

Commit 610cb27

Browse files
romainmenkeromainmenke
authored
extend progressive-custom-properties to the var() function (#979)
* extend progressive-custom-properties to the var function * Update plugin-packs/postcss-preset-env/.tape.mjs * change the plugin order
1 parent e92a4f9 commit 610cb27

File tree

82 files changed

+753
-157
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+753
-157
lines changed

‎package-lock.json

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugin-packs/postcss-preset-env/dist/index.cjs

+1-1
Large diffs are not rendered by default.

‎plugin-packs/postcss-preset-env/dist/index.mjs

+1-1
Large diffs are not rendered by default.

‎plugin-packs/postcss-preset-env/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
"postcss": "^8.4"
111111
},
112112
"devDependencies": {
113+
"@csstools/postcss-debug-logger": "1.0.0",
113114
"@csstools/postcss-tape": "*",
114115
"@webref/css": "^6.5.1",
115116
"postcss-simple-vars": "^7.0.1"

‎plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// ids ordered by required execution, then alphabetically
22
export default [
33
'custom-media-queries',
4-
'custom-properties',
54
'environment-variables', // run environment-variables here to access transpiled custom media params and properties
65
'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media
76
'media-query-ranges', // run media-query-range
@@ -56,5 +55,8 @@ export default [
5655
'nested-calc',
5756
// Math functions.
5857

58+
// must be after all value related rules
59+
'custom-properties',
60+
5961
'cascade-layers',
6062
];

‎plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@
457457
text-indent: 2em;
458458
content: var(--value-2ic);
459459
left: 2em;
460-
left: var(--non-existing, 2ic);
460+
left: var(--non-existing, 2em);
461461
width: calc(8em + 20px);
462462
height: 10px;
463463
margin: 0.5em 1em .2em;
@@ -593,7 +593,7 @@
593593

594594
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
595595
.gradients-interpolation-method {
596-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
596+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
597597
}
598598
}
599599

@@ -610,3 +610,9 @@
610610
color-9: rgb(130, 31, 0);
611611
color-9: color(display-p3 0.48896 0.1211 0);
612612
}
613+
614+
.test-property-with-var {
615+
--opacity: 1;
616+
color: rgba(87, 107, 149, 1);
617+
color: rgba(87, 107, 149, var(--opacity));
618+
}

‎plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -457,7 +457,7 @@
457457
text-indent: 2em;
458458
content: var(--value-2ic);
459459
left: 2em;
460-
left: var(--non-existing, 2ic);
460+
left: var(--non-existing, 2em);
461461
width: calc(8em + 20px);
462462
height: 10px;
463463
margin: 0.5em 1em .2em;
@@ -593,7 +593,7 @@
593593

594594
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
595595
.gradients-interpolation-method {
596-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
596+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
597597
}
598598
}
599599

@@ -610,3 +610,9 @@
610610
color-9: rgb(130, 31, 0);
611611
color-9: color(display-p3 0.48896 0.1211 0);
612612
}
613+
614+
.test-property-with-var {
615+
--opacity: 1;
616+
color: rgba(87, 107, 149, 1);
617+
color: rgba(87, 107, 149, var(--opacity));
618+
}

‎plugin-packs/postcss-preset-env/test/basic.ch38.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@
368368
text-indent: 2em;
369369
content: var(--value-2ic);
370370
left: 2em;
371-
left: var(--non-existing, 2ic);
371+
left: var(--non-existing, 2em);
372372
width: calc(8em + 20px);
373373
height: 10px;
374374
margin: 0.5em 1em .2em;
@@ -503,7 +503,7 @@
503503

504504
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
505505
.gradients-interpolation-method {
506-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
506+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
507507
}
508508
}
509509

@@ -520,3 +520,9 @@
520520
color-9: rgb(130, 31, 0);
521521
color-9: color(display-p3 0.48896 0.1211 0);
522522
}
523+
524+
.test-property-with-var {
525+
--opacity: 1;
526+
color: rgba(87, 107, 149, 1);
527+
color: rgba(87, 107, 149, var(--opacity));
528+
}

‎plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -501,7 +501,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
501501

502502
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
503503
.gradients-interpolation-method {
504-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
504+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
505505
}
506506
}
507507

@@ -518,3 +518,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
518518
color-9: rgb(130, 31, 0);
519519
color-9: color(display-p3 0.48896 0.1211 0);
520520
}
521+
522+
.test-property-with-var {
523+
--opacity: 1;
524+
color: rgba(87, 107, 149, var(--opacity));
525+
}

‎plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css

+5
Original file line numberDiff line numberDiff line change
@@ -512,3 +512,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
512512
color-9: rgb(130, 31, 0);
513513
color-9: color(display-p3 0.48896 0.1211 0);
514514
}
515+
516+
.test-property-with-var {
517+
--opacity: 1;
518+
color: rgba(87 107 149 / var(--opacity));
519+
}

‎plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css

+5
Original file line numberDiff line numberDiff line change
@@ -512,3 +512,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
512512
color-9: rgb(130, 31, 0);
513513
color-9: color(display-p3 0.48896 0.1211 0);
514514
}
515+
516+
.test-property-with-var {
517+
--opacity: 1;
518+
color: rgba(87 107 149 / var(--opacity));
519+
}

‎plugin-packs/postcss-preset-env/test/basic.css

+5
Original file line numberDiff line numberDiff line change
@@ -465,3 +465,8 @@
465465
color-8: oklab(from oklab(40% 0.566 0.39) l a b);
466466
color-9: oklch(from oklch(40% 0.566 39deg) l c h);
467467
}
468+
469+
.test-property-with-var {
470+
--opacity: 1;
471+
color: rgba(87 107 149 / var(--opacity));
472+
}

‎plugin-packs/postcss-preset-env/test/basic.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@
474474
text-indent: 2em;
475475
content: var(--value-2ic);
476476
left: 2em;
477-
left: var(--non-existing, 2ic);
477+
left: var(--non-existing, 2em);
478478
width: calc(8em + 20px);
479479
height: 10px;
480480
margin: 0.5em 1em .2em;
@@ -612,7 +612,7 @@
612612

613613
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
614614
.gradients-interpolation-method {
615-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
615+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
616616
}
617617
}
618618

@@ -629,3 +629,9 @@
629629
color-9: rgb(130, 31, 0);
630630
color-9: color(display-p3 0.48896 0.1211 0);
631631
}
632+
633+
.test-property-with-var {
634+
--opacity: 1;
635+
color: rgba(87, 107, 149, 1);
636+
color: rgba(87, 107, 149, var(--opacity));
637+
}

‎plugin-packs/postcss-preset-env/test/basic.ff49.expect.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -504,7 +504,7 @@
504504

505505
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
506506
.gradients-interpolation-method {
507-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
507+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
508508
}
509509
}
510510

@@ -521,3 +521,8 @@
521521
color-9: rgb(130, 31, 0);
522522
color-9: color(display-p3 0.48896 0.1211 0);
523523
}
524+
525+
.test-property-with-var {
526+
--opacity: 1;
527+
color: rgba(87, 107, 149, var(--opacity));
528+
}

‎plugin-packs/postcss-preset-env/test/basic.ff66.expect.css

+5
Original file line numberDiff line numberDiff line change
@@ -516,3 +516,8 @@
516516
color-9: rgb(130, 31, 0);
517517
color-9: color(display-p3 0.48896 0.1211 0);
518518
}
519+
520+
.test-property-with-var {
521+
--opacity: 1;
522+
color: rgba(87 107 149 / var(--opacity));
523+
}

‎plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
472472
text-indent: 2em;
473473
content: var(--value-2ic);
474474
left: 2em;
475-
left: var(--non-existing, 2ic);
475+
left: var(--non-existing, 2em);
476476
width: calc(8em + 20px);
477477
height: 10px;
478478
margin: 0.5em 1em .2em;
@@ -608,7 +608,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
608608

609609
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
610610
.gradients-interpolation-method {
611-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
611+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
612612
}
613613
}
614614

@@ -625,3 +625,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
625625
color-9: rgb(130, 31, 0);
626626
color-9: color(display-p3 0.48896 0.1211 0);
627627
}
628+
629+
.test-property-with-var {
630+
--opacity: 1;
631+
color: rgba(87, 107, 149, 1);
632+
color: rgba(87, 107, 149, var(--opacity));
633+
}

‎plugin-packs/postcss-preset-env/test/basic.ie10.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,7 @@
491491
text-indent: 2em;
492492
content: var(--value-2ic);
493493
left: 2em;
494-
left: var(--non-existing, 2ic);
494+
left: var(--non-existing, 2em);
495495
width: calc(8em + 20px);
496496
height: 10px;
497497
margin: 0.5em 1em .2em;
@@ -629,7 +629,7 @@
629629

630630
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
631631
.gradients-interpolation-method {
632-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
632+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
633633
}
634634
}
635635

@@ -646,3 +646,9 @@
646646
color-9: rgb(130, 31, 0);
647647
color-9: color(display-p3 0.48896 0.1211 0);
648648
}
649+
650+
.test-property-with-var {
651+
--opacity: 1;
652+
color: rgba(87, 107, 149, 1);
653+
color: rgba(87, 107, 149, var(--opacity));
654+
}

‎plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
472472
text-indent: 2em;
473473
content: var(--value-2ic);
474474
left: 2em;
475-
left: var(--non-existing, 2ic);
475+
left: var(--non-existing, 2em);
476476
width: calc(8em + 20px);
477477
height: 10px;
478478
margin: 0.5em 1em .2em;
@@ -610,7 +610,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
610610

611611
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
612612
.gradients-interpolation-method {
613-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
613+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
614614
}
615615
}
616616

@@ -627,3 +627,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
627627
color-9: rgb(130, 31, 0);
628628
color-9: color(display-p3 0.48896 0.1211 0);
629629
}
630+
631+
.test-property-with-var {
632+
--opacity: 1;
633+
color: rgba(87, 107, 149, 1);
634+
color: rgba(87, 107, 149, var(--opacity));
635+
}

‎plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css

+5
Original file line numberDiff line numberDiff line change
@@ -471,3 +471,8 @@
471471
color-8: oklab(from oklab(40% 0.566 0.39) l a b);
472472
color-9: oklch(from oklch(40% 0.566 39deg) l c h);
473473
}
474+
475+
.test-property-with-var {
476+
--opacity: 1;
477+
color: rgba(87 107 149 / var(--opacity));
478+
}

‎plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css

+8-2
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
456456
text-indent: 2em;
457457
content: var(--value-2ic);
458458
left: 2em;
459-
left: var(--non-existing, 2ic);
459+
left: var(--non-existing, 2em);
460460
width: calc(8em + 20px);
461461
height: 10px;
462462
margin: 0.5em 1em .2em;
@@ -590,7 +590,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
590590

591591
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
592592
.gradients-interpolation-method {
593-
--background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%);
593+
--background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
594594
}
595595
}
596596

@@ -607,3 +607,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
607607
color-9: rgb(130, 31, 0);
608608
color-9: color(display-p3 0.48896 0.1211 0);
609609
}
610+
611+
.test-property-with-var {
612+
--opacity: 1;
613+
color: rgba(87, 107, 149, 1);
614+
color: rgba(87, 107, 149, var(--opacity));
615+
}

‎plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css

+5
Original file line numberDiff line numberDiff line change
@@ -788,3 +788,8 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe
788788
color-9: rgb(130, 31, 0);
789789
color-9: color(display-p3 0.48896 0.1211 0);
790790
}
791+
792+
.test-property-with-var {
793+
--opacity: 1;
794+
color: rgba(87, 107, 149, var(--opacity));
795+
}

0 commit comments

Comments
 (0)