@nordcraft/runtime 1.0.32 → 1.0.33

package/dist/styles/CustomPropertyStyleSheet.d.ts

@@ -0,0 +1,34 @@
+import type { MediaQuery } from '@nordcraft/core/dist/component/component.types';
+/**
+ * CustomPropertyStyleSheet is a utility class that manages CSS custom properties
+ * (variables) in a dedicated CSSStyleSheet. It allows for efficient registration,
+ * updating, and removal of style properties as fast as setting style properties.
+ *
+ * It abstracts the complexity of managing CSS rules via. indexing and
+ * provides a simple API to register and unregister style properties for specific
+ * selectors.
+ */
+export declare class CustomPropertyStyleSheet {
+    private styleSheet;
+    private ruleMap;
+    constructor(styleSheet?: CSSStyleSheet | null);
+    /**
+     * @returns A function to update the property value efficiently.
+     */
+    registerProperty(selector: string, name: string, options?: {
+        mediaQuery?: MediaQuery;
+        startingStyle?: boolean;
+    }): (newValue: string) => void;
+    unregisterProperty(selector: string, name: string, options?: {
+        mediaQuery?: MediaQuery;
+        startingStyle?: boolean;
+    }): void;
+    getStyleSheet(): CSSStyleSheet;
+    /**
+     * Maps all selectors to their rule index. This is used to map the initial
+     * SSR style variable values to their selectors.
+     */
+    private hydrateFromBase;
+    private static selectorFromCSSRule;
+    private static getFullSelector;
+}

package/dist/styles/CustomPropertyStyleSheet.js

@@ -0,0 +1,109 @@
+/**
+ * CustomPropertyStyleSheet is a utility class that manages CSS custom properties
+ * (variables) in a dedicated CSSStyleSheet. It allows for efficient registration,
+ * updating, and removal of style properties as fast as setting style properties.
+ *
+ * It abstracts the complexity of managing CSS rules via. indexing and
+ * provides a simple API to register and unregister style properties for specific
+ * selectors.
+ */
+export class CustomPropertyStyleSheet {
+    styleSheet;
+    // Selector to rule index mapping
+    ruleMap;
+    constructor(styleSheet) {
+        if (styleSheet) {
+            this.styleSheet = styleSheet;
+        }
+        else {
+            this.styleSheet = new CSSStyleSheet();
+            document.adoptedStyleSheets.push(this.getStyleSheet());
+        }
+    }
+    /**
+     * @returns A function to update the property value efficiently.
+     */
+    registerProperty(selector, name, options) {
+        this.ruleMap ??= this.hydrateFromBase();
+        const fullSelector = CustomPropertyStyleSheet.getFullSelector(selector, options);
+        // Check if the selector already exists
+        let rule = this.ruleMap.get(fullSelector);
+        if (!rule) {
+            const ruleIndex = this.styleSheet.insertRule(fullSelector);
+            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 &&
+                newRule.cssRules.length > 0) {
+                newRule = newRule.cssRules[0];
+            }
+            rule = newRule;
+            this.ruleMap.set(fullSelector, rule);
+        }
+        return (value) => {
+            rule.style.setProperty(name, value);
+        };
+    }
+    unregisterProperty(selector, name, options) {
+        if (!this.ruleMap) {
+            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);
+    }
+    getStyleSheet() {
+        return this.styleSheet;
+    }
+    /**
+     * Maps all selectors to their rule index. This is used to map the initial
+     * SSR style variable values to their selectors.
+     */
+    hydrateFromBase() {
+        const ruleIndex = new Map();
+        for (let i = 0; i < this.styleSheet.cssRules.length; i++) {
+            let rule = this.styleSheet.cssRules[i];
+            const selector = CustomPropertyStyleSheet.selectorFromCSSRule(rule);
+            // Get last part of the selector, which is the actual selector we are interested in
+            while (rule.cssRules &&
+                rule.cssRules.length > 0) {
+                rule = rule.cssRules[0];
+            }
+            ruleIndex.set(selector, rule);
+        }
+        return ruleIndex;
+    }
+    static selectorFromCSSRule(rule) {
+        switch (rule.constructor.name) {
+            case 'CSSStyleRule':
+                // For these rules, we just return (potentially with subrules if any cssRules exist)
+                return `${rule.selectorText} { ${Array.from(rule.cssRules)
+                    .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+                    .join(', ')}}`;
+            case 'CSSStartingStyleRule':
+                return `@starting-style { ${Array.from(rule.cssRules)
+                    .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+                    .join(', ')}}`;
+            case 'CSSMediaRule':
+                return `@media ${rule.media.mediaText} { ${Array.from(rule.cssRules)
+                    .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+                    .join(', ')}}`;
+            case 'CSSNestedDeclarations':
+                return '';
+            default:
+                // eslint-disable-next-line no-console
+                console.warn(`Unsupported CSS rule type: ${rule.constructor.name}. Returning empty selector.`);
+                return '';
+        }
+    }
+    static getFullSelector(selector, options) {
+        let result = selector + (options?.startingStyle ? ' { @starting-style { }}' : ' { }');
+        if (options?.mediaQuery) {
+            result = `@media (${Object.entries(options.mediaQuery)
+                .map(([key, value]) => `${key}: ${value}`)
+                .filter(Boolean)
+                .join(') and (')}) { ${result}}`;
+        }
+        return result;
+    }
+}
+//# sourceMappingURL=CustomPropertyStyleSheet.js.map

package/dist/styles/CustomPropertyStyleSheet.js.map

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

package/dist/styles/CustomPropertyStyleSheet.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/CustomPropertyStyleSheet.test.js

@@ -0,0 +1,66 @@
+import { describe, expect, test } from 'bun:test';
+import { CustomPropertyStyleSheet } from './CustomPropertyStyleSheet';
+describe('CustomPropertyStyleSheet', () => {
+    test('it creates a new stylesheet', () => {
+        const instance = new CustomPropertyStyleSheet();
+        expect(instance).toBeInstanceOf(CustomPropertyStyleSheet);
+        expect(instance.getStyleSheet().cssRules).toHaveLength(0);
+    });
+    test('it adds a property definition', () => {
+        const instance = new CustomPropertyStyleSheet();
+        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();
+        instance.registerProperty('.my-class', '--my-property')('256px');
+        instance.registerProperty('.my-other-class', '--my-property')('256px');
+        expect(instance.getStyleSheet().cssRules.length).toBe(2);
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-property: 256px; }');
+        expect(instance.getStyleSheet().cssRules[1].cssText).toBe('.my-other-class { --my-property: 256px; }');
+    });
+    test('it can update properties', () => {
+        const instance = new CustomPropertyStyleSheet();
+        const setter = instance.registerProperty('.my-class', '--my-property');
+        setter('256px');
+        expect(instance.getStyleSheet().cssRules.length).toBe(1);
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-property: 256px; }');
+        setter('inherit');
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-property: inherit; }');
+    });
+    test('it works with media queries', () => {
+        const instance = new CustomPropertyStyleSheet();
+        instance.registerProperty('.my-class', '--my-property', {
+            mediaQuery: { 'max-width': '600px' },
+        })('256px');
+        expect(instance.getStyleSheet().cssRules.length).toBe(1);
+        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 setter = instance.registerProperty('.my-class', '--my-property');
+        setter('256px');
+        const setter2 = instance.registerProperty('.my-class', '--my-other-property');
+        setter2('512px');
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-property: 256px; --my-other-property: 512px; }');
+        instance.unregisterProperty('.my-class', '--my-property');
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class { --my-other-property: 512px; }');
+        instance.unregisterProperty('.my-class', '--my-other-property');
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('.my-class {  }');
+    });
+    test('it unregisters a property with media queries', () => {
+        const instance = new CustomPropertyStyleSheet();
+        const setter = instance.registerProperty('.my-class-with-media', '--my-property-with-media', {
+            mediaQuery: { 'max-width': '600px' },
+        });
+        setter('256px');
+        expect(instance.getStyleSheet().cssRules.length).toBe(1);
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('@media (max-width: 600px) { .my-class-with-media { --my-property-with-media: 256px; } }');
+        instance.unregisterProperty('.my-class-with-media', '--my-property-with-media', {
+            mediaQuery: { 'max-width': '600px' },
+        });
+        expect(instance.getStyleSheet().cssRules[0].cssText).toBe('@media (max-width: 600px) { .my-class-with-media {  } }');
+    });
+});
+//# sourceMappingURL=CustomPropertyStyleSheet.test.js.map

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

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

package/dist/styles/style.js

@@ -1,4 +1,5 @@
 import { getClassName, toValidClassName, } from '@nordcraft/core/dist/styling/className';
+import { syntaxNodeToPropertyAtDefinition, } from '@nordcraft/core/dist/styling/customProperty';
 import { kebabCase } from '@nordcraft/core/dist/styling/style.css';
 import { variantSelector } from '@nordcraft/core/dist/styling/variantSelector';
 import { omitKeys } from '@nordcraft/core/dist/utils/collections';
@@ -45,6 +46,7 @@ export const SIZE_PROPERTIES = new Set([
     'outline-width',
 ]);
 export const insertStyles = (parent, root, components) => {
+    const registeredCustomProperties = new Map();
     const getNodeStyles = (node, classHash) => {
         const style = omitKeys(node.style ?? {}, [
             'variants',
@@ -104,6 +106,27 @@ ${node.animations
             })
                 .join('\n')
             : ''}
+${[
+            ...Object.entries(node.customProperties ?? {}),
+            ...(node.variants?.flatMap((variant) => Object.entries(variant.customProperties ?? {})) ?? []),
+        ]
+            .map(([customPropertyName, customProperty]) => {
+            const existingCustomProperty = registeredCustomProperties.get(customPropertyName);
+            if (existingCustomProperty) {
+                // Warn if the style variable is already registered with a different syntax, as registration is global.
+                // The editor should also report an Error-level issue.
+                if (existingCustomProperty.type === 'primitive' &&
+                    customProperty.syntax.type === 'primitive' &&
+                    existingCustomProperty.name !== customProperty.syntax.name) {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Custom property "${customPropertyName}" is already registered with a different syntax: "${existingCustomProperty.name}".`);
+                }
+                return '';
+            }
+            registeredCustomProperties.set(customPropertyName, customProperty.syntax);
+            return syntaxNodeToPropertyAtDefinition(customPropertyName, customProperty);
+        })
+            .join('\n')}
   `));
         return styleElem;
     };

package/dist/styles/style.js.map

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

package/dist/utils/omitStyle.js

@@ -4,8 +4,10 @@ export function omitSubnodeStyleForComponent(component) {
         if ((node.type === 'element' || node.type === 'component') &&
             nodeId !== 'root') {
             delete node.style;
-            delete node.variants;
             delete node.animations;
+            node.variants = node.variants?.map(({ customProperties }) => ({
+                customProperties,
+            }));
         }
     });
     return clone;

package/dist/utils/omitStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"omitStyle.js","sourceRoot":"","sources":["../../src/utils/omitStyle.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,4BAA4B,CAC1C,SAAY;IAEZ,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE;QAC5D,IACE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;YACtD,MAAM,KAAK,MAAM,EACjB,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAA;YACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;YACpB,OAAO,IAAI,CAAC,UAAU,CAAA;QACxB,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,KAAK,CAAA;AACd,CAAC"}
+{"version":3,"file":"omitStyle.js","sourceRoot":"","sources":["../../src/utils/omitStyle.ts"],"names":[],"mappings":"AAKA,MAAM,UAAU,4BAA4B,CAC1C,SAAY;IAEZ,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE;QAC5D,IACE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;YACtD,MAAM,KAAK,MAAM,EACjB,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAA;YACjB,OAAO,IAAI,CAAC,UAAU,CAAA;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,CAChC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACvB,CAAC;gBACC,gBAAgB;aACjB,CAAiB,CACrB,CAAA;QACH,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/utils/subscribeCustomProperty.d.ts

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

package/dist/utils/subscribeCustomProperty.js

@@ -0,0 +1,9 @@
+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),
+    });
+}
+//# sourceMappingURL=subscribeCustomProperty.js.map

package/dist/utils/subscribeCustomProperty.js.map

@@ -0,0 +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"}

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.32",
-"@nordcraft/std-lib": "1.0.32",
+"@nordcraft/core": "1.0.33",
+"@nordcraft/std-lib": "1.0.33",
 "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.32"
+"version": "1.0.33"
 }

package/src/components/createComponent.ts

@@ -6,6 +6,7 @@ import type {
 } from '@nordcraft/core/dist/component/component.types'
 import { applyFormula } from '@nordcraft/core/dist/formula/formula'
 import { mapObject } from '@nordcraft/core/dist/utils/collections'
+import { getNodeSelector } from '@nordcraft/core/dist/utils/getNodeSelector'
 import { isDefined } from '@nordcraft/core/dist/utils/util'
 import { isContextApiV2 } from '../api/apiUtils'
 import { createLegacyAPI } from '../api/createAPI'
@@ -18,6 +19,7 @@ import type { Signal } from '../signal/signal'
 import { signal } from '../signal/signal'
 import type { ComponentChild, ComponentContext, ContextApi } from '../types'
 import { createFormulaCache } from '../utils/createFormulaCache'
+import { subscribeCustomProperty } from '../utils/subscribeCustomProperty'
 import { renderComponent } from './renderComponent'
 
 export type RenderComponentNodeProps = {
@@ -68,6 +70,52 @@ export function createComponent({
         : value?.value,
     ])
   })
+  Object.entries(node.customProperties ?? {}).forEach(
+    ([customPropertyName, customProperty]) =>
+      subscribeCustomProperty({
+        selector: getNodeSelector(path, {
+          componentName: ctx.component.name,
+          nodeId: node.id,
+        }),
+        signal: dataSignal.map((data) => {
+          return applyFormula(customProperty.formula, {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+          })
+        }),
+        customPropertyName,
+      }),
+  )
+  node.variants?.forEach((variant) => {
+    Object.entries(variant.customProperties ?? {}).forEach(
+      ([customPropertyName, customProperty]) =>
+        subscribeCustomProperty({
+          selector: getNodeSelector(path, {
+            componentName: ctx.component.name,
+            nodeId: node.id,
+            variant,
+          }),
+          signal: dataSignal.map((data) =>
+            applyFormula(customProperty.formula, {
+              data,
+              component: ctx.component,
+              formulaCache: ctx.formulaCache,
+              root: ctx.root,
+              package: ctx.package,
+              toddle: ctx.toddle,
+              env: ctx.env,
+            }),
+          ),
+          customPropertyName,
+          variant,
+        }),
+    )
+  })
 
   const componentDataSignal = signal<ComponentData>({
     Location: dataSignal.get().Location,

package/src/components/createElement.ts

@@ -8,12 +8,14 @@ import {
   getClassName,
   toValidClassName,
 } from '@nordcraft/core/dist/styling/className'
+import { getNodeSelector } from '@nordcraft/core/dist/utils/getNodeSelector'
 import { isDefined, toBoolean } from '@nordcraft/core/dist/utils/util'
 import { handleAction } from '../events/handleAction'
 import type { Signal } from '../signal/signal'
 import { getDragData } from '../utils/getDragData'
 import { getElementTagName } from '../utils/getElementTagName'
 import { setAttribute } from '../utils/setAttribute'
+import { subscribeCustomProperty } from '../utils/subscribeCustomProperty'
 import type { NodeRenderer } from './createNode'
 import { createNode } from './createNode'
 
@@ -130,8 +132,9 @@ export function createElement({
       setupAttribute()
     }
   })
-  node['style-variables']?.forEach(({ formula, name, unit }) => {
-    const sig = dataSignal.map((data) => {
+  node['style-variables']?.forEach((styleVariable) => {
+    const { name, formula, unit } = styleVariable
+    const signal = dataSignal.map((data) => {
       const value = applyFormula(formula, {
         data,
         component: ctx.component,
@@ -143,8 +146,54 @@ export function createElement({
       })
       return unit ? value + unit : value
     })
-    sig.subscribe((value) => elem.style.setProperty(`--${name}`, value))
+
+    signal.subscribe((value) => elem.style.setProperty(`--${name}`, value))
   })
+
+  Object.entries(node.customProperties ?? {}).forEach(
+    ([customPropertyName, { formula }]) =>
+      subscribeCustomProperty({
+        customPropertyName,
+        selector: getNodeSelector(path),
+        signal: dataSignal.map((data) =>
+          applyFormula(formula, {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+          }),
+        ),
+      }),
+  )
+
+  node.variants?.forEach((variant) => {
+    Object.entries(variant.customProperties ?? {}).forEach(
+      ([customPropertyName, { formula }]) => {
+        subscribeCustomProperty({
+          customPropertyName,
+          selector: getNodeSelector(path, {
+            variant,
+          }),
+          variant,
+          signal: dataSignal.map((data) =>
+            applyFormula(formula, {
+              data,
+              component: ctx.component,
+              formulaCache: ctx.formulaCache,
+              root: ctx.root,
+              package: ctx.package,
+              toddle: ctx.toddle,
+              env: ctx.env,
+            }),
+          ),
+        })
+      },
+    )
+  })
+
   Object.values(node.events).forEach((event) => {
     const handler = (e: Event) => {
       event.actions.forEach((action) => {

package/src/editor-preview.main.ts

@@ -8,6 +8,7 @@ import type {
   Component,
   ComponentData,
   MetaEntry,
+  StyleVariant,
 } from '@nordcraft/core/dist/component/component.types'
 import { isPageComponent } from '@nordcraft/core/dist/component/isPageComponent'
 import type {
@@ -1058,6 +1059,27 @@ export const createRoot = (
             ] ?? { style: {} }
             // Add a style element specific to the selected element which
             // is only applied when the preview is in design mode
+            const styleVariantCustomProperties = Object.entries(
+              (selectedStyleVariant as StyleVariant).customProperties ?? {},
+            )
+              .map(([customPropertyName, customProperty]) => ({
+                name: customPropertyName,
+                value: applyFormula(customProperty.formula, {
+                  data: {
+                    Attributes: dataSignal.get().Attributes,
+                    Variables: dataSignal.get().Variables,
+                    Contexts: ctxDataSignal?.get().Contexts ?? {},
+                  },
+                  component: getCurrentComponent(),
+                  root: ctx?.root,
+                  formulaCache: {},
+                  package: ctx?.package,
+                  toddle: window.toddle,
+                  env,
+                } as FormulaContext),
+              }))
+              .filter(({ value }) => value !== undefined)
+
             const styleElem = document.createElement('style')
             styleElem.setAttribute('data-hash', selectedNodeId)
             styleElem.appendChild(
@@ -1066,6 +1088,11 @@ export const createRoot = (
                           ${styleToCss({
                             ...nodeLookup.node.style,
                             ...selectedStyleVariant.style,
+                            ...Object.fromEntries(
+                              styleVariantCustomProperties.map(
+                                ({ name, value }) => [name, value],
+                              ),
+                            ),
                           })}
                         }
                       `),