@nordcraft/runtime 1.0.33 → 1.0.34

package/src/utils/subscribeCustomProperty.ts

@@ -2,40 +2,53 @@ import type { StyleVariant } from '@nordcraft/core/dist/component/component.type
 import type { Signal } from '../signal/signal'
 
 import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const'
+import type { Runtime } from '@nordcraft/core/dist/types'
 import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet'
 
-const CUSTOM_PROPERTIES_STYLESHEET = new CustomPropertyStyleSheet(
-  (
-    document.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID) as
-      | HTMLStyleElement
-      | undefined
-  )?.sheet,
-)
+let customPropertiesStylesheet: CustomPropertyStyleSheet | undefined
 
 export function subscribeCustomProperty({
   selector,
   customPropertyName,
   signal,
   variant,
+  root,
+  runtime,
 }: {
   selector: string
   customPropertyName: string
   signal: Signal<string>
   variant?: StyleVariant
+  root: Document | ShadowRoot
+  runtime: Runtime
 }) {
+  customPropertiesStylesheet ??= new CustomPropertyStyleSheet(
+    root,
+    (
+      root.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID) as
+        | HTMLStyleElement
+        | undefined
+    )?.sheet,
+  )
+
   signal.subscribe(
-    CUSTOM_PROPERTIES_STYLESHEET.registerProperty(
+    customPropertiesStylesheet.registerProperty(
       selector,
       customPropertyName,
       variant,
     ),
     {
-      destroy: () =>
-        CUSTOM_PROPERTIES_STYLESHEET.unregisterProperty(
+      destroy: () => {
+        customPropertiesStylesheet?.unregisterProperty(
           selector,
           customPropertyName,
-          variant,
-        ),
+          {
+            deepClean: runtime === 'preview',
+            mediaQuery: variant?.mediaQuery,
+            startingStyle: variant?.startingStyle,
+          },
+        )
+      },
     },
   )
 }