ref: Simplified comma-separated parsing

CatchABus · CatchABus · commit 207c2a081402 · 2025-08-11T14:35:06.000+03:00
diff --git a/packages/core/ui/styling/css-utils.ts b/packages/core/ui/styling/css-utils.ts
@@ -1,5 +1,3 @@
-import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';
-import { tokenize } from '@csstools/css-tokenizer';
 import { CoreTypes } from '../../core-types';
 import { Trace } from '../../trace';
 import { Length } from './style-properties';
@@ -20,9 +18,14 @@ export function cleanupImportantFlags(value: unknown, propertyName: string) {
 }
 
 /**
- * Matches whitespace except if the whitespace is contained in parenthesis - ex. rgb(a), hsl color.
+ * Matches whitespace except if the whitespace is contained in parenthesis - e.g. rgb(a), hsl color.
  */
-const PARTS_RE = /\s(?![^(]*\))/;
+const WHITE_SPACE_RE = /\s(?![^(]*\))/;
+
+/**
+ * Matches comma except if the comma is contained in parenthesis - e.g. rgb(a, b, c).
+ */
+const COMMA_RE = /,(?![^(]*\))/;
 
 /**
  * Matches a Length value with or without a unit
@@ -34,34 +37,22 @@ const LENGTH_RE = /^-?[0-9]+[a-zA-Z%]*?$/;
  */
 const isLength = (v) => v === '0' || LENGTH_RE.test(v);
 
-export function parseCSSListOfValues(value: string): string[] {
+export function parseCSSCommaSeparatedListOfValues(value: string): string[] {
 	const values: string[] = [];
 
 	if (!value) {
-		return values;
-	}
-
-	if (!value.includes(',')) {
-		values.push(value);
-		return values;
-	}
-
-	const tokens = tokenize({ css: value });
-	const componentValueSet = parseCommaSeparatedListOfComponentValues(tokens);
-
-	for (const componentValues of componentValueSet) {
-		values.push(componentValues.join(''));
+		return [];
 	}
 
-	return values;
+	return value.split(COMMA_RE);
 }
 
 export function parseCSSShorthand(value: string): {
 	values: Array<CoreTypes.LengthType>;
 	color: string;
 	inset: boolean;
 } {
-	const parts = value.trim().split(PARTS_RE);
+	const parts = value.trim().split(WHITE_SPACE_RE);
 	const first = parts[0];
 
 	if (['', 'none', 'unset'].includes(first)) {
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
@@ -14,7 +14,7 @@ import { LinearGradient } from './linear-gradient';
 import { parseCSSShadow, ShadowCSSValues } from './css-shadow';
 import { transformConverter } from './css-transform';
 import { ClipPathFunction } from './clip-path-function';
-import { parseCSSListOfValues } from './css-utils';
+import { parseCSSCommaSeparatedListOfValues } from './css-utils';
 
 interface ShorthandPositioning {
 	top: string;
@@ -1113,12 +1113,12 @@ const boxShadowProperty = new CssProperty<Style, ShadowCSSValues[]>({
 		);
 	},
 	valueConverter: (value) => {
-		const values = parseCSSListOfValues(value);
+		const values = parseCSSCommaSeparatedListOfValues(value);
 		const result: ShadowCSSValues[] = [];
 
 		// The first layer specified is drawn as if it is closest to the user
 		for (let i = values.length - 1; i >= 0; i--) {
-			const shadowVal = parseCSSShadow(values[i].trim());
+			const shadowVal = parseCSSShadow(values[i]);
 			if (shadowVal) {
 				result.push(shadowVal);
 			}
