Lazy initialize StyleSheet for better handling

.changeset/big-tomatoes-sneeze.md

@@ -0,0 +1,6 @@
+---
+"@teiler/svelte": patch
+"@teiler/vue": patch
+---
+
+Lazy initialize StyleSheet for better handling

packages/svelte/src/sheet.ts

@@ -1,10 +1,20 @@
 import { type Sheet, createStyleSheet } from '@teiler/core'
 import { getContext } from 'svelte'
 
-export const styleSheet = createStyleSheet({})
+export let styleSheet = null
 
 export const StyleSheet = 'STYLE_SHEET'
 
 export function getStyleSheet(): Sheet {
-  return getContext(StyleSheet) || styleSheet
+  const fromContext = getContext<Sheet>(StyleSheet)
+
+  if (fromContext) {
+    return fromContext
+  }
+
+  if (styleSheet === null) {
+    styleSheet = createStyleSheet({})
+  }
+
+  return styleSheet
 }

packages/vue/src/Styled.ts

@@ -1,8 +1,9 @@
 import type { HTMLElements, Sheet, StyleDefinition } from '@teiler/core'
 
-import { createStyleSheet, insert } from '@teiler/core'
+import { insert } from '@teiler/core'
 import { defineComponent, h, inject, toRaw, toValue } from 'vue'
 import { context } from './ThemeProvider'
+import { getStyleSheet } from './sheet'
 
 export default function <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>) {
   const component = defineComponent({
@@ -12,7 +13,7 @@ export default function <Target extends HTMLElements, Props>(styleDefinition: St
       const slots = this.$slots
       const attrs = toRaw(this.$attrs)
 
-      const styleSheet = inject<Sheet>('STYLE_SHEET', () => createStyleSheet({}), true)
+      const styleSheet: Sheet = getStyleSheet()
 
       const theme = toRaw(toValue(inject(context, {})))
 

packages/vue/src/sheet.ts

@@ -0,0 +1,20 @@
+import { type Sheet, createStyleSheet } from '@teiler/core'
+import { inject } from 'vue'
+
+export let styleSheet = null
+
+export const StyleSheet = 'STYLE_SHEET'
+
+export function getStyleSheet(): Sheet {
+  const provided = inject<Sheet>('STYLE_SHEET', () => createStyleSheet({}), true)
+
+  if (provided) {
+    return provided
+  }
+
+  if (styleSheet === null) {
+    styleSheet = createStyleSheet({})
+  }
+
+  return styleSheet
+}