@nordcraft/runtime 1.0.33 → 1.0.35

package/src/styles/CustomPropertyStyleSheet.test.ts

@@ -3,20 +3,20 @@ import { CustomPropertyStyleSheet } from './CustomPropertyStyleSheet'
 
 describe('CustomPropertyStyleSheet', () => {
   test('it creates a new stylesheet', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     expect(instance).toBeInstanceOf(CustomPropertyStyleSheet)
     expect(instance.getStyleSheet().cssRules).toHaveLength(0)
   })
 
   test('it adds a property definition', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     instance.registerProperty('.my-class', '--my-property')
     expect(instance.getStyleSheet().cssRules.length).toBe(1)
     expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }')
   })
 
   test('it puts different selectors in different rules', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     instance.registerProperty('.my-class', '--my-property')('256px')
     instance.registerProperty('.my-other-class', '--my-property')('256px')
     expect(instance.getStyleSheet().cssRules.length).toBe(2)
@@ -29,7 +29,7 @@ describe('CustomPropertyStyleSheet', () => {
   })
 
   test('it can update properties', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     const setter = instance.registerProperty('.my-class', '--my-property')
     setter('256px')
     expect(instance.getStyleSheet().cssRules.length).toBe(1)
@@ -44,7 +44,7 @@ describe('CustomPropertyStyleSheet', () => {
   })
 
   test('it works with media queries', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     instance.registerProperty('.my-class', '--my-property', {
       mediaQuery: { 'max-width': '600px' },
     })('256px')
@@ -55,7 +55,7 @@ describe('CustomPropertyStyleSheet', () => {
   })
 
   test('it unregisters a property', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     const setter = instance.registerProperty('.my-class', '--my-property')
     setter('256px')
     const setter2 = instance.registerProperty(
@@ -76,7 +76,7 @@ describe('CustomPropertyStyleSheet', () => {
   })
 
   test('it unregisters a property with media queries', () => {
-    const instance = new CustomPropertyStyleSheet()
+    const instance = new CustomPropertyStyleSheet(document)
     const setter = instance.registerProperty(
       '.my-class-with-media',
       '--my-property-with-media',

package/src/styles/CustomPropertyStyleSheet.ts

@@ -15,12 +15,12 @@ export class CustomPropertyStyleSheet {
   // Selector to rule index mapping
   private ruleMap: Map<string, CSSStyleRule | CSSNestedDeclarations> | undefined
 
-  constructor(styleSheet?: CSSStyleSheet | null) {
+  constructor(root: Document | ShadowRoot, styleSheet?: CSSStyleSheet | null) {
     if (styleSheet) {
       this.styleSheet = styleSheet
     } else {
       this.styleSheet = new CSSStyleSheet()
-      document.adoptedStyleSheets.push(this.getStyleSheet())
+      root.adoptedStyleSheets.push(this.getStyleSheet())
     }
   }
 
@@ -44,7 +44,10 @@ export class CustomPropertyStyleSheet {
     // Check if the selector already exists
     let rule = this.ruleMap.get(fullSelector)
     if (!rule) {
-      const ruleIndex = this.styleSheet.insertRule(fullSelector)
+      const ruleIndex = this.styleSheet.insertRule(
+        fullSelector,
+        this.styleSheet.cssRules.length,
+      )
       let newRule = this.styleSheet.cssRules[ruleIndex]
 
       // We are only interested in the dynamic style, so get the actual style rule, not media or other nested rules. Loop until we are at the bottom most rule.
@@ -69,6 +72,7 @@ export class CustomPropertyStyleSheet {
     options?: {
       mediaQuery?: MediaQuery
       startingStyle?: boolean
+      deepClean?: boolean
     },
   ): void {
     if (!this.ruleMap) {
@@ -80,8 +84,21 @@ export class CustomPropertyStyleSheet {
       options,
     )
 
-    // We only clean up the property, as we assume that the rule will be reused.
-    this.ruleMap.get(fullSelector)?.style.removeProperty(name)
+    const rule = this.ruleMap.get(fullSelector)
+    if (!rule) {
+      return
+    }
+
+    rule.style.removeProperty(name)
+
+    // Cleaning up empty selectors is probably not necessary in production and may have performance implications.
+    // However, it is required for the editor-preview as it is a dynamic environment and things may get reordered and canvas reused.
+    if (options?.deepClean && rule.style.length === 0) {
+      this.styleSheet.deleteRule(
+        Array.from(this.ruleMap.keys()).indexOf(fullSelector),
+      )
+      this.ruleMap.delete(fullSelector)
+    }
   }
 
   public getStyleSheet(): CSSStyleSheet {

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,
+          },
+        )
+      },
     },
   )
 }