@nordcraft/runtime 1.0.32 → 1.0.33

package/src/styles/CustomPropertyStyleSheet.test.ts

@@ -0,0 +1,104 @@
+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 {  } }',
+    )
+  })
+})

package/src/styles/CustomPropertyStyleSheet.ts

@@ -0,0 +1,163 @@
+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 class CustomPropertyStyleSheet {
+  private styleSheet: CSSStyleSheet
+
+  // Selector to rule index mapping
+  private ruleMap: Map<string, CSSStyleRule | CSSNestedDeclarations> | undefined
+
+  constructor(styleSheet?: CSSStyleSheet | null) {
+    if (styleSheet) {
+      this.styleSheet = styleSheet
+    } else {
+      this.styleSheet = new CSSStyleSheet()
+      document.adoptedStyleSheets.push(this.getStyleSheet())
+    }
+  }
+
+  /**
+   * @returns A function to update the property value efficiently.
+   */
+  public registerProperty(
+    selector: string,
+    name: string,
+    options?: {
+      mediaQuery?: MediaQuery
+      startingStyle?: boolean
+    },
+  ): (newValue: string) => void {
+    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 as any).cssRules &&
+        (newRule as CSSGroupingRule).cssRules.length > 0
+      ) {
+        newRule = (newRule as CSSGroupingRule).cssRules[0]
+      }
+      rule = newRule as CSSStyleRule | CSSNestedDeclarations
+      this.ruleMap.set(fullSelector, rule)
+    }
+
+    return (value: string) => {
+      rule.style.setProperty(name, value)
+    }
+  }
+
+  public unregisterProperty(
+    selector: string,
+    name: string,
+    options?: {
+      mediaQuery?: MediaQuery
+      startingStyle?: boolean
+    },
+  ): void {
+    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)
+  }
+
+  public getStyleSheet(): CSSStyleSheet {
+    return this.styleSheet
+  }
+
+  /**
+   * Maps all selectors to their rule index. This is used to map the initial
+   * SSR style variable values to their selectors.
+   */
+  private hydrateFromBase() {
+    const ruleIndex: Map<string, CSSStyleRule> = 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 as CSSGroupingRule).cssRules &&
+        (rule as CSSGroupingRule).cssRules.length > 0
+      ) {
+        rule = (rule as CSSGroupingRule).cssRules[0]
+      }
+
+      ruleIndex.set(selector, rule as CSSStyleRule)
+    }
+    return ruleIndex
+  }
+
+  private static selectorFromCSSRule(rule: CSSRule): string {
+    switch (rule.constructor.name) {
+      case 'CSSStyleRule':
+        // For these rules, we just return (potentially with subrules if any cssRules exist)
+        return `${(rule as CSSStyleRule).selectorText} { ${Array.from(
+          (rule as CSSStyleRule).cssRules,
+        )
+          .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+          .join(', ')}}`
+      case 'CSSStartingStyleRule':
+        return `@starting-style { ${Array.from(
+          (rule as CSSStartingStyleRule).cssRules,
+        )
+          .map(CustomPropertyStyleSheet.selectorFromCSSRule)
+          .join(', ')}}`
+      case 'CSSMediaRule':
+        return `@media ${(rule as CSSMediaRule).media.mediaText} { ${Array.from(
+          (rule as CSSMediaRule).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 ''
+    }
+  }
+
+  private static getFullSelector(
+    selector: string,
+    options?: {
+      mediaQuery?: MediaQuery
+      startingStyle?: boolean
+    },
+  ) {
+    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
+  }
+}

package/src/styles/style.ts

@@ -8,6 +8,10 @@ import {
   getClassName,
   toValidClassName,
 } from '@nordcraft/core/dist/styling/className'
+import {
+  syntaxNodeToPropertyAtDefinition,
+  type CssSyntaxNode,
+} 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'
@@ -61,6 +65,7 @@ export const insertStyles = (
   root: Component,
   components: Component[],
 ) => {
+  const registeredCustomProperties = new Map<string, CssSyntaxNode>()
   const getNodeStyles = (
     node: ElementNodeModel | ComponentNodeModel,
     classHash: string,
@@ -131,6 +136,34 @@ ${
         .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/src/utils/omitStyle.ts

@@ -1,4 +1,7 @@
-import type { Component } from '@nordcraft/core/dist/component/component.types'
+import type {
+  Component,
+  StyleVariant,
+} from '@nordcraft/core/dist/component/component.types'
 
 export function omitSubnodeStyleForComponent<T extends Component | undefined>(
   component: T,
@@ -10,8 +13,13 @@ export function omitSubnodeStyleForComponent<T extends Component | undefined>(
       nodeId !== 'root'
     ) {
       delete node.style
-      delete node.variants
       delete node.animations
+      node.variants = node.variants?.map(
+        ({ customProperties }) =>
+          ({
+            customProperties,
+          }) as StyleVariant,
+      )
     }
   })
 

package/src/utils/subscribeCustomProperty.ts

@@ -0,0 +1,41 @@
+import type { StyleVariant } from '@nordcraft/core/dist/component/component.types'
+import type { Signal } from '../signal/signal'
+
+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) as
+      | HTMLStyleElement
+      | undefined
+  )?.sheet,
+)
+
+export function subscribeCustomProperty({
+  selector,
+  customPropertyName,
+  signal,
+  variant,
+}: {
+  selector: string
+  customPropertyName: string
+  signal: Signal<string>
+  variant?: StyleVariant
+}) {
+  signal.subscribe(
+    CUSTOM_PROPERTIES_STYLESHEET.registerProperty(
+      selector,
+      customPropertyName,
+      variant,
+    ),
+    {
+      destroy: () =>
+        CUSTOM_PROPERTIES_STYLESHEET.unregisterProperty(
+          selector,
+          customPropertyName,
+          variant,
+        ),
+    },
+  )
+}