Skip to content

Commit b14cc06

Browse files
romainmenkeromainmenke
authored
Allow relative color syntax in rgba() and hsla() color notations (#1321)
1 parent 164204e commit b14cc06

File tree

20 files changed

+262
-55
lines changed

20 files changed

+262
-55
lines changed

‎packages/css-color-parser/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to CSS Color Parser
22

3+
### Unreleased (patch)
4+
5+
- Allow relative color syntax in `rgba` and `hsla` color notations.
6+
37
### 1.5.2
48

59
_February 19, 2024_

‎packages/css-color-parser/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/css-color-parser/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/css-color-parser/src/functions/three-channel-space-separated.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { SyntaxFlag } from '../color-data';
66
import { calcFromComponentValues } from '@csstools/css-calc';
77
import { isCommentNode, isFunctionNode, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms';
88
import { normalizeChannelValuesFn } from './normalize-channel-values';
9-
import { toLowerCaseAZ } from '../util/to-lower-case-a-z';
109
import { mathFunctionNames } from '@csstools/css-calc';
1110
import { ColorParser } from '../color-parser';
1211
import { colorDataTo } from '../color-data';
@@ -19,8 +18,6 @@ export function threeChannelSpaceSeparated(
1918
syntaxFlags: Array<SyntaxFlag>,
2019
colorParser: ColorParser,
2120
): ColorData | false {
22-
const functionName = toLowerCaseAZ(colorFunctionNode.getName());
23-
2421
const channel1: Array<ComponentValue> = [];
2522
const channel2: Array<ComponentValue> = [];
2623
const channel3: Array<ComponentValue> = [];
@@ -100,9 +97,7 @@ export function threeChannelSpaceSeparated(
10097
channel1.length === 0 &&
10198
isTokenNode(node) &&
10299
node.value[0] === TokenType.Ident &&
103-
node.value[4].value.toLowerCase() === 'from' &&
104-
functionName !== 'hsla' &&
105-
functionName !== 'rgba'
100+
node.value[4].value.toLowerCase() === 'from'
106101
) {
107102
if (relativeToColor) {
108103
return false;

‎packages/css-color-parser/test/basic/relative-color.mjs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ assert.deepStrictEqual(
99
'rgb(255, 92, 92)',
1010
);
1111

12+
assert.deepStrictEqual(
13+
serialize_sRGB_data(color(parse('rgba(from indianred 255 G b)'))),
14+
'rgb(255, 92, 92)',
15+
);
16+
1217
assert.deepStrictEqual(
1318
serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 0.5) 30 30 30)'))),
1419
'rgba(30, 30, 30, 0.5)',

‎packages/css-color-parser/test/wpt/color-invalid-relative-color.mjs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ const tests = [
1717
['rgb(from rebeccapurple l g b)'],
1818
['rgb(from rebeccapurple h g b)'],
1919

20-
// Testing invalid function name variation (only rgb() is valid, rgba() is invalid)
21-
['rgba(from rebeccapurple r g b)'],
22-
['rgba(from rgb(10%, 20%, 30%, 40%) r g b / alpha)'],
20+
// Testing invalid separator
21+
['rgb(from rebeccapurple, r, g, b)'],
22+
['rgba(from rgb(10%, 20%, 30%, 40%), r, g, b, alpha)'],
2323

2424

2525
// hsl(from ...)
@@ -33,9 +33,9 @@ const tests = [
3333
['hsl(from rebeccapurple x s l)'],
3434
['hsl(from rebeccapurple h g b)'],
3535

36-
// Testing invalid function name variation (only hsl() is valid, hsla() is invalid)
37-
['hsla(from rebeccapurple h s l)'],
38-
['hsla(from rgb(10%, 20%, 30%, 40%) h s l / alpha)'],
36+
// Testing invalid separator
37+
['hsl(from rebeccapurple, h, s, l)'],
38+
['hsla(from rgb(10%, 20%, 30%, 40%), h, s, l, alpha)'],
3939

4040
// hwb(from ...)
4141

‎plugins/postcss-progressive-custom-properties/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
### Unreleased (patch)
44

55
- Test for mixed component types in color values (e.g. `lab(100 50% 50)`)
6+
- Allow relative color syntax in `rgba` and `hsla` color notations.
67

78
### 3.1.0
89

‎plugins/postcss-progressive-custom-properties/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugins/postcss-progressive-custom-properties/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugins/postcss-progressive-custom-properties/scripts/relative-color-syntax.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@ export const relativeColorSyntaxMatches = [
88
'matchers': [
99
matcherForValue('rgb(from $a $1 $2 $3)'),
1010
matcherForValue('rgb(from $a $1 $2 $3 / $4)'),
11+
matcherForValue('rgba(from $a $1 $2 $3)'),
12+
matcherForValue('rgba(from $a $1 $2 $3 / $4)'),
1113
matcherForValue('hsl(from $a $1 $2 $3)'),
1214
matcherForValue('hsl(from $a $1 $2 $3 / $4)'),
15+
matcherForValue('hsla(from $a $1 $2 $3)'),
16+
matcherForValue('hsla(from $a $1 $2 $3 / $4)'),
1317
matcherForValue('hwb(from $a $1 $2 $3)'),
1418
matcherForValue('hwb(from $a $1 $2 $3 / $4)'),
1519
matcherForValue('lch(from $a $1 $2 $3)'),

‎plugins/postcss-progressive-custom-properties/src/matchers.ts

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,90 @@ export const matchers = [
443443
},
444444
],
445445
},
446+
{
447+
'type': 'function',
448+
'value': 'rgba',
449+
'nodes': [
450+
{
451+
'type': 'word',
452+
'value': 'from',
453+
},
454+
{
455+
'type': 'space',
456+
},
457+
{
458+
'type': 'word',
459+
'isVariable': true,
460+
},
461+
{
462+
'type': 'space',
463+
},
464+
{
465+
'type': 'word',
466+
'isVariable': true,
467+
},
468+
{
469+
'type': 'space',
470+
},
471+
{
472+
'type': 'word',
473+
'isVariable': true,
474+
},
475+
{
476+
'type': 'space',
477+
},
478+
{
479+
'type': 'word',
480+
'isVariable': true,
481+
},
482+
],
483+
},
484+
{
485+
'type': 'function',
486+
'value': 'rgba',
487+
'nodes': [
488+
{
489+
'type': 'word',
490+
'value': 'from',
491+
},
492+
{
493+
'type': 'space',
494+
},
495+
{
496+
'type': 'word',
497+
'isVariable': true,
498+
},
499+
{
500+
'type': 'space',
501+
},
502+
{
503+
'type': 'word',
504+
'isVariable': true,
505+
},
506+
{
507+
'type': 'space',
508+
},
509+
{
510+
'type': 'word',
511+
'isVariable': true,
512+
},
513+
{
514+
'type': 'space',
515+
},
516+
{
517+
'type': 'word',
518+
'isVariable': true,
519+
},
520+
{
521+
'type': 'div',
522+
'value': '/',
523+
},
524+
{
525+
'type': 'word',
526+
'isVariable': true,
527+
},
528+
],
529+
},
446530
{
447531
'type': 'function',
448532
'value': 'hsl',
@@ -527,6 +611,90 @@ export const matchers = [
527611
},
528612
],
529613
},
614+
{
615+
'type': 'function',
616+
'value': 'hsla',
617+
'nodes': [
618+
{
619+
'type': 'word',
620+
'value': 'from',
621+
},
622+
{
623+
'type': 'space',
624+
},
625+
{
626+
'type': 'word',
627+
'isVariable': true,
628+
},
629+
{
630+
'type': 'space',
631+
},
632+
{
633+
'type': 'word',
634+
'isVariable': true,
635+
},
636+
{
637+
'type': 'space',
638+
},
639+
{
640+
'type': 'word',
641+
'isVariable': true,
642+
},
643+
{
644+
'type': 'space',
645+
},
646+
{
647+
'type': 'word',
648+
'isVariable': true,
649+
},
650+
],
651+
},
652+
{
653+
'type': 'function',
654+
'value': 'hsla',
655+
'nodes': [
656+
{
657+
'type': 'word',
658+
'value': 'from',
659+
},
660+
{
661+
'type': 'space',
662+
},
663+
{
664+
'type': 'word',
665+
'isVariable': true,
666+
},
667+
{
668+
'type': 'space',
669+
},
670+
{
671+
'type': 'word',
672+
'isVariable': true,
673+
},
674+
{
675+
'type': 'space',
676+
},
677+
{
678+
'type': 'word',
679+
'isVariable': true,
680+
},
681+
{
682+
'type': 'space',
683+
},
684+
{
685+
'type': 'word',
686+
'isVariable': true,
687+
},
688+
{
689+
'type': 'div',
690+
'value': '/',
691+
},
692+
{
693+
'type': 'word',
694+
'isVariable': true,
695+
},
696+
],
697+
},
530698
{
531699
'type': 'function',
532700
'value': 'hwb',

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@
4141

4242
--prop-9: red;
4343
--prop-9: rgb(1,1,1,1);
44+
45+
--prop-10: magenta;
46+
--prop-10: rgba(from magenta calc(r * 2) g b);
4447
}
4548

4649
.initial {

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
--prop-8: 1px solid red;
2323

2424
--prop-9: red;
25+
26+
--prop-10: magenta;
2527
}
2628

2729
@supports (color: oklab(0% 0 0%)) {
@@ -93,6 +95,12 @@
9395
}
9496
}
9597

98+
@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
99+
:root {
100+
--prop-10: rgba(from magenta calc(r * 2) g b);
101+
}
102+
}
103+
96104
.initial {
97105
--prop-1: red;
98106
--prop-1: initial;
@@ -324,13 +332,9 @@
324332

325333
:root {
326334
--color-rcs-invalid-1: green;
327-
--color-rcs-invalid-1: rgba(from blue r g b);
328335
--color-rcs-invalid-2: green;
329-
--color-rcs-invalid-2: hsla(from blue h s l);
330336
--color-rcs-invalid-3: green;
331-
--color-rcs-invalid-3: rgba(from blue r g b / alpha);
332337
--color-rcs-invalid-4: green;
333-
--color-rcs-invalid-4: hsla(from blue h s l / alpha);
334338
--color-rcs-invalid-5: green;
335339
--color-rcs-invalid-5: rgb(from blue r, g, b);
336340
--color-rcs-invalid-6: green;
@@ -341,6 +345,15 @@
341345
--color-rcs-invalid-8: hsl(from blue h, s, l, alpha);
342346
}
343347

348+
@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
349+
:root {
350+
--color-rcs-invalid-1: rgba(from blue r g b);
351+
--color-rcs-invalid-2: hsla(from blue h s l);
352+
--color-rcs-invalid-3: rgba(from blue r g b / alpha);
353+
--color-rcs-invalid-4: hsla(from blue h s l / alpha);
354+
}
355+
}
356+
344357
.property-with-var--1 {
345358
--opacity: 1;
346359
color: rgba(87, 107, 149, 1);

‎plugins/postcss-relative-color-syntax/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to PostCSS Relative Color Syntax
22

3+
### Unreleased (patch)
4+
5+
- Allow relative color syntax in `rgba` and `hsla` color notations.
6+
37
### 2.0.10
48

59
_February 19, 2024_

‎plugins/postcss-relative-color-syntax/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-color-parser"),t=require("@csstools/utilities"),r=require("@csstools/css-parser-algorithms"),a=require("@csstools/css-tokenizer");const o=/\b(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i,l=/\b(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i,i=/^(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i,n=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration(c){const u=c.value;if(!o.test(u)||!n.test(u))return;if(t.hasFallback(c))return;if(t.hasSupportsAtRuleAncestor(c,l))return;const p=a.tokenize({css:u}),g=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(p),(s=>{if(!r.isFunctionNode(s)||!i.test(s.getName()))return;const t=e.color(s);return t&&!t.syntaxFlags.has(e.SyntaxFlag.Experimental)&&!t.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)&&t.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax)?e.serializeRGB(t):void 0})),b=r.stringify(g);if(b===u)return;let y=b;s?.subFeatures.displayP3&&(y=r.stringify(r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(p),(s=>{if(!r.isFunctionNode(s)||!i.test(s.getName()))return;const t=e.color(s);return t&&!t.syntaxFlags.has(e.SyntaxFlag.Experimental)&&!t.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)&&t.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax)?e.colorDataFitsRGB_Gamut(t)?e.serializeRGB(t):e.serializeP3(t):void 0})))),c.cloneBefore({value:b}),s?.subFeatures.displayP3&&y!==b&&c.cloneBefore({value:y}),s?.preserve||c.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return t.subFeatures=Object.assign({displayP3:!0},t.subFeatures),t.enableProgressiveCustomProperties&&(t.preserve||t.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
1+
"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-color-parser"),a=require("@csstools/utilities"),r=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer");const o=/\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\(/i,l=/\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i,i=/^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)$/i,n=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration(c){const u=c.value;if(!o.test(u)||!n.test(u))return;if(a.hasFallback(c))return;if(a.hasSupportsAtRuleAncestor(c,l))return;const p=t.tokenize({css:u}),g=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(p),(s=>{if(!r.isFunctionNode(s)||!i.test(s.getName()))return;const a=e.color(s);return a&&!a.syntaxFlags.has(e.SyntaxFlag.Experimental)&&!a.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)&&a.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax)?e.serializeRGB(a):void 0})),b=r.stringify(g);if(b===u)return;let y=b;s?.subFeatures.displayP3&&(y=r.stringify(r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(p),(s=>{if(!r.isFunctionNode(s)||!i.test(s.getName()))return;const a=e.color(s);return a&&!a.syntaxFlags.has(e.SyntaxFlag.Experimental)&&!a.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords)&&a.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax)?e.colorDataFitsRGB_Gamut(a)?e.serializeRGB(a):e.serializeP3(a):void 0})))),c.cloneBefore({value:b}),s?.subFeatures.displayP3&&y!==b&&c.cloneBefore({value:y}),s?.preserve||c.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const a=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return a.subFeatures=Object.assign({displayP3:!0},a.subFeatures),a.enableProgressiveCustomProperties&&(a.preserve||a.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(a)]}:basePlugin(a)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

‎plugins/postcss-relative-color-syntax/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import s from"@csstools/postcss-progressive-custom-properties";import{color as e,SyntaxFlag as o,serializeRGB as r,colorDataFitsRGB_Gamut as t,serializeP3 as a}from"@csstools/css-color-parser";import{hasFallback as l,hasSupportsAtRuleAncestor as i}from"@csstools/utilities";import{replaceComponentValues as c,parseCommaSeparatedListOfComponentValues as n,isFunctionNode as u,stringify as p}from"@csstools/css-parser-algorithms";import{tokenize as b}from"@csstools/css-tokenizer";const m=/\b(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i,g=/\b(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i,h=/^(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i,y=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration(f){const v=f.value;if(!m.test(v)||!y.test(v))return;if(l(f))return;if(i(f,g))return;const x=b({css:v}),F=c(n(x),(s=>{if(!u(s)||!h.test(s.getName()))return;const t=e(s);return t&&!t.syntaxFlags.has(o.Experimental)&&!t.syntaxFlags.has(o.HasNoneKeywords)&&t.syntaxFlags.has(o.RelativeColorSyntax)?r(t):void 0})),P=p(F);if(P===v)return;let d=P;s?.subFeatures.displayP3&&(d=p(c(n(x),(s=>{if(!u(s)||!h.test(s.getName()))return;const l=e(s);return l&&!l.syntaxFlags.has(o.Experimental)&&!l.syntaxFlags.has(o.HasNoneKeywords)&&l.syntaxFlags.has(o.RelativeColorSyntax)?t(l)?r(l):a(l):void 0})))),f.cloneBefore({value:P}),s?.subFeatures.displayP3&&d!==P&&f.cloneBefore({value:d}),s?.preserve||f.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const o=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return o.subFeatures=Object.assign({displayP3:!0},o.subFeatures),o.enableProgressiveCustomProperties&&(o.preserve||o.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(o)]}:basePlugin(o)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
1+
import s from"@csstools/postcss-progressive-custom-properties";import{color as e,SyntaxFlag as r,serializeRGB as o,colorDataFitsRGB_Gamut as t,serializeP3 as a}from"@csstools/css-color-parser";import{hasFallback as l,hasSupportsAtRuleAncestor as i}from"@csstools/utilities";import{replaceComponentValues as c,parseCommaSeparatedListOfComponentValues as n,isFunctionNode as u,stringify as p}from"@csstools/css-parser-algorithms";import{tokenize as b}from"@csstools/css-tokenizer";const g=/\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\(/i,h=/\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i,m=/^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)$/i,y=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration(f){const v=f.value;if(!g.test(v)||!y.test(v))return;if(l(f))return;if(i(f,h))return;const x=b({css:v}),F=c(n(x),(s=>{if(!u(s)||!m.test(s.getName()))return;const t=e(s);return t&&!t.syntaxFlags.has(r.Experimental)&&!t.syntaxFlags.has(r.HasNoneKeywords)&&t.syntaxFlags.has(r.RelativeColorSyntax)?o(t):void 0})),P=p(F);if(P===v)return;let d=P;s?.subFeatures.displayP3&&(d=p(c(n(x),(s=>{if(!u(s)||!m.test(s.getName()))return;const l=e(s);return l&&!l.syntaxFlags.has(r.Experimental)&&!l.syntaxFlags.has(r.HasNoneKeywords)&&l.syntaxFlags.has(r.RelativeColorSyntax)?t(l)?o(l):a(l):void 0})))),f.cloneBefore({value:P}),s?.subFeatures.displayP3&&d!==P&&f.cloneBefore({value:d}),s?.preserve||f.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

‎plugins/postcss-relative-color-syntax/src/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ type basePluginOptions = {
1212
}
1313
};
1414

15-
const FUNCTION_REGEX = /\b(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i;
16-
const SUPPORTS_REGEX = /\b(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i;
17-
const NAME_REGEX = /^(?:rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i;
15+
const FUNCTION_REGEX = /\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\(/i;
16+
const SUPPORTS_REGEX = /\b(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i;
17+
const NAME_REGEX = /^(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklch|oklab|color)$/i;
1818
const FROM_REGEX = /from/i;
1919

2020
/* Transform relative color syntax in CSS. */

0 commit comments

Comments
 (0)