fix(meta-css): fix template unit alias handling

- update TEMPLATE_UNITS aliases
- update __templateValue() helper
- add tests

packages/meta-css/src/generate.ts

@@ -66,10 +66,10 @@ export const UNITS: Record<string, Fn<any, string>> = {
 	"%": percent,
 };
 
-export const TEMPLATE_UNITS: Record<string, Fn<any, string>> = {
-	percent: (x) => `${x}%`,
-	second: (x) => `${x}s`,
-	url: (x) => `url(${x})`,
+export const TEMPLATE_UNITS: IObjectOf<string> = {
+	percent: "{0}%",
+	second: "{0}s",
+	url: "url({0})",
 };
 
 export const VARIATIONS: IObjectOf<string[]> = {
@@ -326,7 +326,7 @@ const __value = (x: NumOrString, unitID?: string) => {
 
 /** @internal */
 const __templateValue = (unitID?: string) =>
-	"{0}" + (unitID ? TEMPLATE_UNITS[unitID] || unitID : "");
+	unitID ? TEMPLATE_UNITS[unitID] || "{0}" + unitID : "{0}";
 
 /** @internal */
 const __withVariations = (

packages/meta-css/test/generate.test.ts

@@ -84,3 +84,30 @@ test("template multiple params", () => {
 		)
 	).toEqual({ test: { "--a": "{0}rem", "--b": "{1}s", __arity: 2 } });
 });
+
+test("template unit alias", () => {
+	expect(
+		expandTemplateSpec(
+			{},
+			{
+				name: "anim-delay",
+				props: "animation-delay",
+				unit: "second",
+			},
+			{},
+			NULL_LOGGER
+		)
+	).toEqual({ "anim-delay": { __arity: 1, "animation-delay": "{0}s" } });
+	expect(
+		expandTemplateSpec(
+			{},
+			{
+				name: "bg",
+				props: "background-image",
+				unit: "url",
+			},
+			{},
+			NULL_LOGGER
+		)
+	).toEqual({ bg: { __arity: 1, "background-image": "url({0})" } });
+});