fix: css colors not parsed correctly within background property

farfromrefug · NathanWalker · commit f554b796ef92 · 2021-09-08T16:07:39.000-07:00
diff --git a/packages/core/css/parser.ts b/packages/core/css/parser.ts
@@ -75,10 +75,10 @@ export function parseHexColor(text: string, start = 0): Parsed<Color> {
 		return null;
 	}
 	const end = hexColorRegEx.lastIndex;
-	return { start, end, value: new Color('#'+ result[1]) };
+	return { start, end, value: new Color('#' + result[1]) };
 }
 
-const cssColorRegEx = /\s*((?:rgb|rgba|hsl|hsla|hsv|hsva)\([^\(\)]\))/gy;
+const cssColorRegEx = /\s*((?:rgb|rgba|hsl|hsla|hsv|hsva)\([^\(\)]*\))/gy;
 export function parseCssColor(text: string, start = 0): Parsed<Color> {
 	cssColorRegEx.lastIndex = start;
 	const result = cssColorRegEx.exec(text);
@@ -87,11 +87,10 @@ export function parseCssColor(text: string, start = 0): Parsed<Color> {
 	}
 	const end = cssColorRegEx.lastIndex;
 	try {
-		return { start, end, value: new Color(text) };
+		return { start, end, value: new Color(result[1]) };
 	} catch {
 		return null;
 	}
-
 }
 
 export function convertHSLToRGBColor(hue: number, saturation: number, lightness: number): { r: number; g: number; b: number } {
@@ -132,7 +131,6 @@ export function convertHSLToRGBColor(hue: number, saturation: number, lightness:
 	};
 }
 
-
 export function parseColorKeyword(value, start: number, keyword = parseKeyword(value, start)): Parsed<Color> {
 	const parseColor = keyword && getKnownColor(keyword.value);
 	if (parseColor != null) {

Original file line number	Diff line number	Diff line change
`@@ -75,10 +75,10 @@ export function parseHexColor(text: string, start = 0): Parsed<Color> {`
`75`	`75`	`return null;`
`76`	`76`	`}`
`77`	`77`	`const end = hexColorRegEx.lastIndex;`
`78`		`- return { start, end, value: new Color('#'+ result[1]) };`
	`78`	`+ return { start, end, value: new Color('#' + result[1]) };`
`79`	`79`	`}`
`80`	`80`
`81`		`-const cssColorRegEx = /\s*((?:rgb\|rgba\|hsl\|hsla\|hsv\|hsva)\([^\(\)]\))/gy;`
	`81`	`+const cssColorRegEx = /\s((?:rgb\|rgba\|hsl\|hsla\|hsv\|hsva)\([^\(\)]\))/gy;`
`82`	`82`	`export function parseCssColor(text: string, start = 0): Parsed<Color> {`
`83`	`83`	`cssColorRegEx.lastIndex = start;`
`84`	`84`	`const result = cssColorRegEx.exec(text);`
`@@ -87,11 +87,10 @@ export function parseCssColor(text: string, start = 0): Parsed<Color> {`
`87`	`87`	`}`
`88`	`88`	`const end = cssColorRegEx.lastIndex;`
`89`	`89`	`try {`
`90`		`- return { start, end, value: new Color(text) };`
	`90`	`+ return { start, end, value: new Color(result[1]) };`
`91`	`91`	`} catch {`
`92`	`92`	`return null;`
`93`	`93`	`}`
`94`		`-`
`95`	`94`	`}`
`96`	`95`
`97`	`96`	`export function convertHSLToRGBColor(hue: number, saturation: number, lightness: number): { r: number; g: number; b: number } {`
`@@ -132,7 +131,6 @@ export function convertHSLToRGBColor(hue: number, saturation: number, lightness:`
`132`	`131`	`};`
`133`	`132`	`}`
`134`	`133`
`135`		`-`
`136`	`134`	`export function parseColorKeyword(value, start: number, keyword = parseKeyword(value, start)): Parsed<Color> {`
`137`	`135`	`const parseColor = keyword && getKnownColor(keyword.value);`
`138`	`136`	`if (parseColor != null) {`