@nordcraft/runtime 1.0.33 → 1.0.34

package/dist/styles/CustomPropertyStyleSheet.d.ts

@@ -11,7 +11,7 @@ import type { MediaQuery } from '@nordcraft/core/dist/component/component.types'
 export declare class CustomPropertyStyleSheet {
     private styleSheet;
     private ruleMap;
-    constructor(styleSheet?: CSSStyleSheet | null);
+    constructor(root: Document | ShadowRoot, styleSheet?: CSSStyleSheet | null);
     /**
      * @returns A function to update the property value efficiently.
      */
@@ -22,6 +22,7 @@ export declare class CustomPropertyStyleSheet {
     unregisterProperty(selector: string, name: string, options?: {
         mediaQuery?: MediaQuery;
         startingStyle?: boolean;
+        deepClean?: boolean;
     }): void;
     getStyleSheet(): CSSStyleSheet;
     /**

package/dist/styles/CustomPropertyStyleSheet.js

@@ -11,13 +11,13 @@ export class CustomPropertyStyleSheet {
     styleSheet;
     // Selector to rule index mapping
     ruleMap;
-    constructor(styleSheet) {
+    constructor(root, styleSheet) {
         if (styleSheet) {
             this.styleSheet = styleSheet;
         }
         else {
             this.styleSheet = new CSSStyleSheet();
-            document.adoptedStyleSheets.push(this.getStyleSheet());
+            root.adoptedStyleSheets.push(this.getStyleSheet());
         }
     }
     /**
@@ -29,7 +29,7 @@ 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.
             while (newRule.cssRules &&
@@ -48,8 +48,17 @@ export class CustomPropertyStyleSheet {
             return;
         }
         const fullSelector = CustomPropertyStyleSheet.getFullSelector(selector, 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);
+        }
     }
     getStyleSheet() {
         return this.styleSheet;

package/dist/styles/CustomPropertyStyleSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPropertyStyleSheet.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomPropertyStyleSheet.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.ts"],"names":[],"mappings":"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"}

package/dist/styles/CustomPropertyStyleSheet.test.js

@@ -2,18 +2,18 @@ import { describe, expect, test } from 'bun:test';
 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);
@@ -21,7 +21,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[1].cssText).toBe('.my-other-class { --my-property: 256px; }');
     });
     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);
@@ -30,7 +30,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-property: inherit; }');
     });
     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');
@@ -38,7 +38,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('@media (max-width: 600px) { .my-class { --my-property: 256px; } }');
     });
     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('.my-class', '--my-other-property');
@@ -50,7 +50,7 @@ describe('CustomPropertyStyleSheet', () => {
         expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }');
     });
     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', {
             mediaQuery: { 'max-width': '600px' },
         });

package/dist/styles/CustomPropertyStyleSheet.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPropertyStyleSheet.test.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomPropertyStyleSheet.test.js","sourceRoot":"","sources":["../../src/styles/CustomPropertyStyleSheet.test.ts"],"names":[],"mappings":"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"}

package/dist/utils/subscribeCustomProperty.d.ts

@@ -1,8 +1,11 @@
 import type { StyleVariant } from '@nordcraft/core/dist/component/component.types';
 import type { Signal } from '../signal/signal';
-export declare function subscribeCustomProperty({ selector, customPropertyName, signal, variant, }: {
+import type { Runtime } from '@nordcraft/core/dist/types';
+export declare function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, runtime, }: {
     selector: string;
     customPropertyName: string;
     signal: Signal<string>;
     variant?: StyleVariant;
+    root: Document | ShadowRoot;
+    runtime: Runtime;
 }): void;

package/dist/utils/subscribeCustomProperty.js

@@ -1,9 +1,16 @@
 import { CUSTOM_PROPERTIES_STYLESHEET_ID } from '@nordcraft/core/dist/styling/theme.const';
 import { CustomPropertyStyleSheet } from '../styles/CustomPropertyStyleSheet';
-const CUSTOM_PROPERTIES_STYLESHEET = new CustomPropertyStyleSheet(document.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID)?.sheet);
-export function subscribeCustomProperty({ selector, customPropertyName, signal, variant, }) {
-    signal.subscribe(CUSTOM_PROPERTIES_STYLESHEET.registerProperty(selector, customPropertyName, variant), {
-        destroy: () => CUSTOM_PROPERTIES_STYLESHEET.unregisterProperty(selector, customPropertyName, variant),
+let customPropertiesStylesheet;
+export function subscribeCustomProperty({ selector, customPropertyName, signal, variant, root, runtime, }) {
+    customPropertiesStylesheet ??= new CustomPropertyStyleSheet(root, root.getElementById(CUSTOM_PROPERTIES_STYLESHEET_ID)?.sheet);
+    signal.subscribe(customPropertiesStylesheet.registerProperty(selector, customPropertyName, variant), {
+        destroy: () => {
+            customPropertiesStylesheet?.unregisterProperty(selector, customPropertyName, {
+                deepClean: runtime === 'preview',
+                mediaQuery: variant?.mediaQuery,
+                startingStyle: variant?.startingStyle,
+            });
+        },
     });
 }
 //# sourceMappingURL=subscribeCustomProperty.js.map

package/dist/utils/subscribeCustomProperty.js.map

@@ -1 +1 @@
-{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAA;AAE7E,MAAM,4BAA4B,GAAG,IAAI,wBAAwB,CAE7D,QAAQ,CAAC,cAAc,CAAC,+BAA+B,CAGxD,EAAE,KAAK,CACT,CAAA;AAED,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,OAAO,GAMR;IACC,MAAM,CAAC,SAAS,CACd,4BAA4B,CAAC,gBAAgB,CAC3C,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR,EACD;QACE,OAAO,EAAE,GAAG,EAAE,CACZ,4BAA4B,CAAC,kBAAkB,CAC7C,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR;KACJ,CACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"subscribeCustomProperty.js","sourceRoot":"","sources":["../../src/utils/subscribeCustomProperty.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAA;AAE1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAA;AAE7E,IAAI,0BAAgE,CAAA;AAEpE,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,kBAAkB,EAClB,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,GAQR;IACC,0BAA0B,KAAK,IAAI,wBAAwB,CACzD,IAAI,EAEF,IAAI,CAAC,cAAc,CAAC,+BAA+B,CAGpD,EAAE,KAAK,CACT,CAAA;IAED,MAAM,CAAC,SAAS,CACd,0BAA0B,CAAC,gBAAgB,CACzC,QAAQ,EACR,kBAAkB,EAClB,OAAO,CACR,EACD;QACE,OAAO,EAAE,GAAG,EAAE;YACZ,0BAA0B,EAAE,kBAAkB,CAC5C,QAAQ,EACR,kBAAkB,EAClB;gBACE,SAAS,EAAE,OAAO,KAAK,SAAS;gBAChC,UAAU,EAAE,OAAO,EAAE,UAAU;gBAC/B,aAAa,EAAE,OAAO,EAAE,aAAa;aACtC,CACF,CAAA;QACH,CAAC;KACF,CACF,CAAA;AACH,CAAC"}

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.33",
-"@nordcraft/std-lib": "1.0.33",
+"@nordcraft/core": "1.0.34",
+"@nordcraft/std-lib": "1.0.34",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
@@ -21,5 +21,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.33"
+"version": "1.0.34"
 }

package/src/components/createComponent.ts

@@ -89,6 +89,8 @@ export function createComponent({
           })
         }),
         customPropertyName,
+        root: ctx.root,
+        runtime: ctx.env.runtime,
       }),
   )
   node.variants?.forEach((variant) => {
@@ -113,6 +115,8 @@ export function createComponent({
           ),
           customPropertyName,
           variant,
+          root: ctx.root,
+          runtime: ctx.env.runtime,
         }),
     )
   })

package/src/components/createElement.ts

@@ -154,7 +154,12 @@ export function createElement({
     ([customPropertyName, { formula }]) =>
       subscribeCustomProperty({
         customPropertyName,
-        selector: getNodeSelector(path),
+        selector:
+          ctx.env.runtime === 'custom-element' &&
+          ctx.isRootComponent &&
+          path === '0'
+            ? `${getNodeSelector(path)}, :host`
+            : getNodeSelector(path),
         signal: dataSignal.map((data) =>
           applyFormula(formula, {
             data,
@@ -166,6 +171,8 @@ export function createElement({
             env: ctx.env,
           }),
         ),
+        root: ctx.root,
+        runtime: ctx.env.runtime,
       }),
   )
 
@@ -189,6 +196,8 @@ export function createElement({
               env: ctx.env,
             }),
           ),
+          root: ctx.root,
+          runtime: ctx.env.runtime,
         })
       },
     )

package/src/debug/panicScreen.ts

@@ -0,0 +1,37 @@
+export const createPanicScreen = ({
+  name,
+  message,
+  isPage,
+  cause,
+}: {
+  name: string
+  message: string
+  isPage?: boolean
+  cause?: unknown
+}) => {
+  let content = getContent(name, message, isPage)
+
+  // Easter egg for RangeError
+  if (cause instanceof RangeError) {
+    for (let i = 0; i < 10; i++) {
+      content += `<div style="transform-origin: 15% 15%; scale: ${1 / (i * 0.225 + 1.225)}; font-size: ${22 / ((i * 0.6) ** 2 + 1)}px">${getContent(name, message, isPage)}</div>`
+    }
+  }
+
+  return document.createRange().createContextualFragment(`
+      <main style="background-color: blue; color: white; font-family: 'Courier New', monospace; font-weight: 100; display: flex; justify-content: flex-start; align-items: flex-start; margin: 0px; padding: 0px;">
+        <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100vh;">
+          <div style="display: flex; flex-direction: column; gap: 20px; padding: 80px; font-size: 22px;">
+            ${content}
+          </div>
+        </div>
+        <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%); background-size: 4px 4px;"></div>
+        <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);"></div>
+      </main>
+  `)
+}
+
+const getContent = (name: string, message: string, isPage?: boolean) => `
+  <h1 style="display: inline; font-size: 1em; background: white; color: blue; padding: 0.4em 0.8em;">${name}</h1>
+  <p style="font-size: 0.8em;">The ${isPage ? 'page' : 'component'} could not be rendered. Fix the issue and try again. Join our <a style="color:white" href="https://discord.gg/nordcraft" target="_blank">Discord</a> for help.</p>
+  <p style="font-size: 0.81em;">Error Message: ${message}</p>`

package/src/debug/sendEditorToast.ts

@@ -0,0 +1,19 @@
+export function sendEditorToast(
+  title: string,
+  message: string,
+  {
+    type = 'neutral',
+  }: {
+    type?: 'neutral' | 'warning' | 'critical'
+  },
+) {
+  window.parent?.postMessage(
+    {
+      type: 'emitToast',
+      toastType: type,
+      title,
+      message,
+    },
+    '*',
+  )
+}

package/src/editor-preview.main.ts

@@ -38,6 +38,8 @@ import { createLegacyAPI } from './api/createAPI'
 import { createAPI } from './api/createAPIv2'
 import { createNode } from './components/createNode'
 import { isContextProvider } from './context/isContextProvider'
+import { createPanicScreen } from './debug/panicScreen'
+import { sendEditorToast } from './debug/sendEditorToast'
 import { dragEnded } from './editor/drag-drop/dragEnded'
 import { dragMove } from './editor/drag-drop/dragMove'
 import { dragReorder } from './editor/drag-drop/dragReorder'
@@ -566,7 +568,7 @@ export const createRoot = (
           }
           const { x, y, type } = message.data
           const elementsAtPoint = document.elementsFromPoint(x, y)
-          let element = elementsAtPoint.find((elem) => {
+          const element = elementsAtPoint.find((elem) => {
             const id = elem.getAttribute('data-id')
             if (
               typeof id !== 'string' ||
@@ -583,31 +585,12 @@ export const createRoot = (
             if (elem.getAttribute('data-node-type') === 'text') {
               return (
                 // Select text nodes if the meta key is pressed or the text node is double-clicked
-                metaKey ||
-                type === 'dblclick' ||
-                // Select text nodes if the selected node is a text node. This is useful as the user is likely in a text editing mode
-                getDOMNodeFromNodeId(selectedNodeId)?.getAttribute(
-                  'data-node-type',
-                ) === 'text'
+                metaKey || type === 'dblclick'
               )
             }
             return true
           })
 
-          // Bubble selection to the topmost parent that has the exact same size as the element.
-          // This is important for drag and drop as you are often left with childless parents after dragging.
-          while (
-            element?.parentElement &&
-            element.getAttribute('data-node-id') !== 'root' &&
-            fastDeepEqual(
-              element.getBoundingClientRect().toJSON(),
-              element.parentElement.getBoundingClientRect().toJSON(),
-            ) &&
-            element.getAttribute('data-node-type') !== 'text'
-          ) {
-            element = element.parentElement
-          }
-
           const id = element?.getAttribute('data-id') ?? null
           if (type === 'click' && id !== selectedNodeId) {
             if (message.data.metaKey) {
@@ -986,10 +969,30 @@ export const createRoot = (
               document.head.appendChild(styleTag)
             }
 
+            // If style variant targets a pseudo-element, apply styles to it instead
+            let pseudoElement = ''
+            if (component && styleVariantSelection) {
+              const nodeLookup = getNodeAndAncestors(
+                component,
+                component.nodes.root,
+                styleVariantSelection.nodeId,
+              )
+
+              if (
+                nodeLookup?.node.type === 'element' ||
+                (nodeLookup?.node.type === 'component' &&
+                  nodeLookup.node.variants?.[
+                    styleVariantSelection.styleVariantIndex
+                  ].pseudoElement)
+              ) {
+                pseudoElement = `::${nodeLookup.node.variants?.[styleVariantSelection.styleVariantIndex].pseudoElement}`
+              }
+            }
+
             const previewStyles = Object.entries(previewStyleStyles)
               .map(([key, value]) => `${key}: ${value} !important;`)
               .join('\n')
-            styleTag.innerHTML = `[data-id="${selectedNodeId}"], [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("] {
+            styleTag.innerHTML = `[data-id="${selectedNodeId}"]${pseudoElement}, [data-id="${selectedNodeId}"] ~ [data-id^="${selectedNodeId}("]${pseudoElement} {
     ${previewStyles}
     transition: none !important;
   }`
@@ -1054,9 +1057,10 @@ export const createRoot = (
             (nodeLookup.node.type === 'element' ||
               nodeLookup.node.type === 'component')
           ) {
-            const selectedStyleVariant = nodeLookup.node.variants?.[
-              styleVariantSelection.styleVariantIndex
-            ] ?? { style: {} }
+            const selectedStyleVariant =
+              nodeLookup.node.variants?.[
+                styleVariantSelection.styleVariantIndex
+              ] ?? ({ style: {} } as StyleVariant)
             // Add a style element specific to the selected element which
             // is only applied when the preview is in design mode
             const styleVariantCustomProperties = Object.entries(
@@ -1081,12 +1085,15 @@ export const createRoot = (
               .filter(({ value }) => value !== undefined)
 
             const styleElem = document.createElement('style')
+            const pseudoElement = selectedStyleVariant.pseudoElement
+              ? `::${selectedStyleVariant.pseudoElement}`
+              : ''
             styleElem.setAttribute('data-hash', selectedNodeId)
             styleElem.appendChild(
               document.createTextNode(`
-                        body[data-mode="design"] [data-id="${selectedNodeId}"] {
+                        body[data-mode="design"] [data-id="${selectedNodeId}"]${pseudoElement} {
                           ${styleToCss({
-                            ...nodeLookup.node.style,
+                            ...(!pseudoElement && nodeLookup.node.style),
                             ...selectedStyleVariant.style,
                             ...Object.fromEntries(
                               styleVariantCustomProperties.map(
@@ -1406,19 +1413,53 @@ export const createRoot = (
         // Clear old root signal and create a new one to not keep old signals with previous root around
         ctxDataSignal?.destroy()
         ctxDataSignal = dataSignal.map((data) => data)
-        const rootElem = createNode({
-          id: 'root',
-          path: '0',
-          dataSignal: ctxDataSignal,
-          ctx: newCtx,
-          parentElement: domNode,
-          instance: { [newCtx.component.name]: 'root' },
-        })
-        newCtx.component.onLoad?.actions.forEach((action) => {
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          handleAction(action, dataSignal.get(), newCtx)
-        })
-        rootElem.forEach((elem) => domNode.appendChild(elem))
+        try {
+          const rootElem = createNode({
+            id: 'root',
+            path: '0',
+            dataSignal: ctxDataSignal,
+            ctx: newCtx,
+            parentElement: domNode,
+            instance: { [newCtx.component.name]: 'root' },
+          })
+          newCtx.component.onLoad?.actions.forEach((action) => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            handleAction(action, dataSignal.get(), newCtx)
+          })
+          rootElem.forEach((elem) => domNode.appendChild(elem))
+        } catch (error: unknown) {
+          const isPage = isPageComponent(newCtx.component)
+          let name = `Unexpected error while rendering ${isPage ? 'page' : 'component'}`
+          let message = error instanceof Error ? error.message : String(error)
+          let panic = false
+          if (error instanceof RangeError) {
+            // RangeError is unrecoverable
+            panic = true
+            name = 'Infinite loop detected'
+            message =
+              'RangeError (Maximum call stack size exceeded): Remove any circular dependencies or recursive calls. This is most likely caused by components, formulas or actions using themselves without an exit case.'
+          }
+
+          // Send a toast to the editor with the error
+          sendEditorToast(name, message, {
+            type: 'critical',
+          })
+
+          if (panic) {
+            // Show error overlay in the editor until next update
+            const panicScreen = createPanicScreen({
+              name: name,
+              message,
+              isPage,
+              cause: error,
+            })
+
+            // Replace the inner HTML of the editor preview with the panic screen
+            domNode.innerHTML = ''
+            domNode.appendChild(panicScreen)
+          }
+          console.error(name, message, error)
+        }
         window.parent?.postMessage(
           {
             type: 'style',

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 {