GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src/styles / ComponentStyleDependency

Interface: ComponentStyleDependency

Extends

Properties

id

readonly id: string

Stable transport identity. Content changes are detected by the digest.

Inherited from

StyleSheetSelectionEntry.id

layer

readonly layer: ComponentStyleLayer

order

readonly order: number

Stable order inside one cascade layer.

scope?

readonly optional scope?: string

Optional owner namespace used to isolate hydration carriers.

Inherited from

StyleSheetSelectionEntry.scope

sheet

readonly sheet: CSSStyleSheet

Inherited from

StyleSheetSelectionEntry.sheet

Example

Name one component sheet, cascade layer, stable order, and SSR scope in immutable metadata:

ts
import {
  LegacyComponentStyleConflictError,
  compareComponentStyles,
  createComponentStyleDependency,
  createComponentStyleOwner,
  createComponentStyleSelection,
  css,
  html,
  markLegacyComponentStyleSheet,
  releaseRenderStyles,
  render,
  type ComponentStyleDependency,
  type ComponentStyleLayer,
  type ComponentStyleOwner,
} from '@gluonjs/core';

const layer: ComponentStyleLayer = 'atom';
const dependency: ComponentStyleDependency = createComponentStyleDependency({
  id: 'shop-add-button', sheet: css`@layer atoms { .add { min-height: 44px; } }`, layer, order: 0, scope: 'gluon-component',
});
const root = document.querySelector<HTMLElement>('#app')!;
const value = html`<button class="add">Add to bag</button>`.withStyleDependencies([dependency]);
const selection = createComponentStyleSelection(value);
const owner: ComponentStyleOwner = createComponentStyleOwner(document);
owner.retain(dependency);
render(value, root);
releaseRenderStyles(root);
owner.release(dependency);
owner.dispose();

const legacy = markLegacyComponentStyleSheet(css`.add { min-height: 44px; }`, [dependency.id]);
const diagnostic = new LegacyComponentStyleConflictError(dependency.id);
console.log(selection.entries, compareComponentStyles(dependency, dependency), legacy, diagnostic.code);