diff --git a/packages/css-vars/src/index.ts b/packages/css-vars/src/index.ts
index c6a967dc81..3085c36290 100644
--- a/packages/css-vars/src/index.ts
+++ b/packages/css-vars/src/index.ts
@@ -4,9 +4,18 @@ const define = <Name extends string>(name: Name) => {
   return `--${name}-${++counter}` as const;
 };
 
+type Cast<T1, T2> = T1 extends T2 ? T1 : T2;
+
+type Join<T extends readonly string[], D extends string> = T extends []
+  ? ""
+  : T extends [string]
+  ? T[0]
+  : T extends [string, ...infer Rest]
+  ? `${T[0]}${D}${Join<Cast<Rest, string[]>, D>}`
+  : never;
+
 const use = <Args extends string[]>(...args: Args) => {
-  type JoinedArgs = `${typeof args[0]}, ${typeof args[1]}, ${typeof args[2]}`;
-  return `var(${args.join(", ") as JoinedArgs})` as const;
+  return `var(${args.join(", ") as Join<Args, ", ">})` as const;
 };
 
 export const cssVars = { define, use };