From 1e013287cf6188dd0c274409ebc07536dc94b757 Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <2+defunkt@users.noreply.github.com>
Date: Tue, 13 Jan 2026 15:24:03 -0800
Subject: [PATCH] HMR support

---
 src/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 20aa512..ae1a65f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,6 +10,8 @@ let registeredThemeKeys: Set<string> = new Set()
 // Clear all registered styles
 export function clearStyles() {
   for (const key in styles) delete styles[key]
+  for (const key in themes) delete themes[key]
+  registeredThemeKeys.clear()
 }
 
 // Register a theme with CSS custom properties
@@ -286,7 +288,11 @@ export function define(nameOrDef: string | TagDef, defIfNamed?: TagDef) {
   const def = defIfNamed ?? nameOrDef as TagDef
   const name = defIfNamed ? (nameOrDef as string) : anonName(def)
 
-  if (styles[name]) throw `${name} is already defined! Must use unique names.`
+  // Clear any existing styles for this component (supports HMR/hot reload)
+  for (const key in styles) {
+    if (key === name || key.startsWith(`${name}_`) || key.startsWith(`${name}.`) || key.startsWith(`${name}:`))
+      delete styles[key]
+  }
   registerStyles(name, def)
 
   return (props: Record<string, any>) => {