fix: prevent orphaned style tag when calling setup multiple times

closes #321
tw-in-js · Oct 3, 2022 · 0e2aa5c · 0e2aa5c
1 parent db7ab08
commit 0e2aa5c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/.changeset/long-weeks-float.md b/.changeset/long-weeks-float.md
@@ -0,0 +1,6 @@
+---
+'@twind/tailwind': patch
+'twind': patch
+---
+
+prevent orphaned style tag when calling setup multiple times (closes #321)
diff --git a/packages/tailwind/src/index.ts b/packages/tailwind/src/index.ts
@@ -13,6 +13,7 @@ import type {
   Preset,
   ExtractThemes,
   Sheet,
+  SheetFactory,
 } from 'twind'
 
 import type { TailwindPresetOptions, TailwindTheme } from '@twind/preset-tailwind'
@@ -48,7 +49,7 @@ export function defineConfig<Theme = TailwindTheme, Presets extends Preset<any>[
 
 export function setup<Theme extends BaseTheme = TailwindTheme, SheetTarget = unknown>(
   config?: TwindConfig<Theme> & TailwindPresetOptions,
-  sheet?: Sheet<SheetTarget>,
+  sheet?: Sheet<SheetTarget> | SheetFactory<SheetTarget>,
   target?: HTMLElement,
 ): Twind<Theme & TailwindTheme, SheetTarget>
 
@@ -58,13 +59,13 @@ export function setup<
   SheetTarget = unknown,
 >(
   config?: TwindUserConfig<Theme, Presets> & TailwindPresetOptions,
-  sheet?: Sheet<SheetTarget>,
+  sheet?: Sheet<SheetTarget> | SheetFactory<SheetTarget>,
   target?: HTMLElement,
 ): Twind<TailwindTheme & ExtractThemes<Theme, Presets>, SheetTarget>
 
 export function setup(
   config?: (TwindConfig | TwindUserConfig) & TailwindPresetOptions,
-  sheet?: Sheet,
+  sheet?: Sheet | SheetFactory,
   target?: HTMLElement,
 ): Twind {
   return setup$(defineConfig(config as TwindUserConfig), sheet, target) as unknown as Twind

diff --git a/packages/twind/src/install.ts b/packages/twind/src/install.ts
@@ -23,6 +23,6 @@ export function install(config: TwindConfig | TwindUserConfig, isProduction: boo
       // in production use short hashed class names
       hash: config$.hash ?? isProduction,
     },
-    getSheet(!isProduction),
+    () => getSheet(!isProduction),
   )
 }
diff --git a/packages/twind/src/runtime.ts b/packages/twind/src/runtime.ts
@@ -69,6 +69,8 @@ export const tw = /* #__PURE__ */ new Proxy(
 
 let active: Twind
 
+export type SheetFactory<SheetTarget = unknown> = () => Sheet<SheetTarget>
+
 /**
  * Manages a single Twind instance — works in browser, Node.js, Deno, workers...
  *
@@ -79,7 +81,7 @@ let active: Twind
  */
 export function setup<Theme extends BaseTheme = BaseTheme, SheetTarget = unknown>(
   config?: TwindConfig<Theme>,
-  sheet?: Sheet<SheetTarget>,
+  sheet?: Sheet<SheetTarget> | SheetFactory<SheetTarget>,
   target?: HTMLElement,
 ): Twind<Theme, SheetTarget>
 
@@ -89,18 +91,21 @@ export function setup<
   SheetTarget = unknown,
 >(
   config?: TwindUserConfig<Theme, Presets>,
-  sheet?: Sheet<SheetTarget>,
+  sheet?: Sheet<SheetTarget> | SheetFactory<SheetTarget>,
   target?: HTMLElement,
 ): Twind<BaseTheme & ExtractThemes<Theme, Presets>, SheetTarget>
 
 export function setup<Theme extends BaseTheme = BaseTheme, SheetTarget = unknown>(
   config: TwindConfig<any> | TwindUserConfig<any> = {},
-  sheet: Sheet<SheetTarget> = getSheet() as unknown as Sheet<SheetTarget>,
+  sheet: Sheet<SheetTarget> | SheetFactory<SheetTarget> = getSheet as SheetFactory<SheetTarget>,
   target?: HTMLElement,
 ): Twind<Theme, SheetTarget> {
   active?.destroy()
 
-  active = observe(twind(config as TwindUserConfig, sheet), target)
+  active = observe(
+    twind(config as TwindUserConfig, typeof sheet == 'function' ? sheet() : sheet),
+    target,
+  )
 
   return active as unknown as Twind<Theme, SheetTarget>
 }