fix(meta-css): support : in template args

- update `__parseMediaQueryToken()` - add/update tests
thi-ng · Dec 12, 2024 · a5657dd · a5657dd
1 parent 19b3438
commit a5657dd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/packages/meta-css/src/convert.ts b/packages/meta-css/src/convert.ts
@@ -548,13 +548,21 @@ const __buildDeclsForPath = (
 /** @internal */
 const __parseMediaQueryToken = (token: string, mediaQueries: Set<string>) => {
 	if (/^::?/.test(token)) return { token };
-	const idx = token.lastIndexOf(QUERY_SEP);
-	if (idx < 0) return { token };
-	const query = token.substring(0, idx);
+	let lastQueryIdx = token.lastIndexOf(QUERY_SEP);
+	if (lastQueryIdx < 0) return { token };
+	const tplArgIdx = token.indexOf("(");
+	if (tplArgIdx > 0) {
+		// check if template with query sep inside args only
+		if (tplArgIdx < lastQueryIdx && token.indexOf(QUERY_SEP) > tplArgIdx)
+			return { token };
+		// otherwise, find last query sep in template ID only
+		lastQueryIdx = token.substring(0, tplArgIdx).lastIndexOf(QUERY_SEP);
+	}
+	const query = token.substring(0, lastQueryIdx);
 	const parts = query.split(QUERY_SEP);
 	if (!parts.every((x) => mediaQueries.has(x)))
 		illegalArgs(`invalid media query in token: ${token}`);
-	return { token: token.substring(idx + 1), query };
+	return { token: token.substring(lastQueryIdx + 1), query };
 };
 
 /**
@@ -637,7 +645,7 @@ const __verbatimPropDecl = (src: string) => {
 const __isAssignment = (x: string) => x.includes("=");
 
 /** @internal */
-const __isTemplateRef = (x: string) => x.includes("(");
+const __isTemplateRef = (x: string) => x.includes("(") && x.endsWith(")");
 
 /** @internal */
 const __isVerbatimProp = (x: string) => x.indexOf("-[") > 0 && x.endsWith("]");
diff --git a/packages/meta-css/test/convert.test.ts b/packages/meta-css/test/convert.test.ts
@@ -48,20 +48,26 @@ test("templates", () => {
 			templates: {
 				top: { top: "{0}rem", __arity: 1 },
 				vars: { "--a": "{0}rem", "--b": "{1}s", __arity: 2 },
+				bg: { backgound: "url({0})", __arity: 1 },
 			},
-			media: { foo: { foo: true } },
+			media: { foo: { foo: true }, bar: { bar: true } },
 		},
 		plainRules: {},
 		mediaQueryRules: {},
-		mediaQueryIDs: new Set(["foo"]),
+		mediaQueryIDs: new Set(["foo", "bar"]),
 	};
 	const bundle: string[] = [];
-	processSpec("#test { top(5) vars(2,3) foo:top(10) foo:vars(4, 5) }", proc);
+	processSpec(
+		`#test { top(5) vars(2,3) bg(data:image/png...) foo:top(10) foo:vars(4, 5) foo:bg(data:image/jpg...) }
+		#test2 { foo:bar:top(10) foo:bar:vars(4, 5) foo:bar:bg(data:image/jpg...) }`,
+		proc
+	);
 	processPlainRules(bundle, proc);
 	processMediaQueries(bundle, proc);
 	expect(bundle).toEqual([
-		"#test{top:5rem;--a:2rem;--b:3s;}",
-		"@media (foo){#test{top:10rem;--a:4rem;--b:5s;}}",
+		"#test{top:5rem;--a:2rem;--b:3s;backgound:url(data:image/png...);}",
+		"@media (foo){#test{top:10rem;--a:4rem;--b:5s;backgound:url(data:image/jpg...);}}",
+		"@media (foo) and (bar){#test2{top:10rem;--a:4rem;--b:5s;backgound:url(data:image/jpg...);}}",
 	]);
 });