From cb09f3ef104c341e2f9cce4bdfde78417ae6aa24 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 4 Sep 2022 10:48:23 +0200
Subject: [PATCH] I have no idea how this works because @andarist wrote it

---
 packages/css-vars/src/index.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

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 };