Class: BaseStyleSheet

Defined in: src/styles/base-style-sheet.ts:25

BaseStyleSheet - Core styling system for the framework

This class provides reactive CSS styling for components using the

Rule

decorator. It manages a CSSStyleSheet internally and supports both Shadow DOM and document-level styles.

Usage with

Rule

decorator:

class MyStyles extends BaseStyleSheet {
  @State width = 100;

  @Rule(':host')
  get hostStyles() {
    return {
      display: 'grid',
      width: this.width,  // Reactive!
    };
  }
}

Constructors

Constructor

new BaseStyleSheet(): BaseStyleSheet;

Defined in: src/styles/base-style-sheet.ts:35

Returns

BaseStyleSheet

Methods

applyToDocument()

applyToDocument(): void;

Defined in: src/styles/base-style-sheet.ts:73

Applies styles to the document (<head>) instead of Shadow DOM Used by

Returns

void

For Document

decorator for global styles

Creates a <style> element and syncs reactive CSS rules to it

dispose()

dispose(): void;

Defined in: src/styles/base-style-sheet.ts:179

Cleans up all resources Called when the component is destroyed

Returns

void

getDebugInfo()

getDebugInfo(): {
  ruleIndexMap: Map<string, number>;
  totalRules: number;
};

Defined in: src/styles/base-style-sheet.ts:205

Returns debug information about the stylesheet Useful for development and debugging

Returns

{
  ruleIndexMap: Map<string, number>;
  totalRules: number;
}

ruleIndexMap

ruleIndexMap: Map<string, number>;

totalRules

totalRules: number;

getStyleSheet()

getStyleSheet(): CSSStyleSheet;

Defined in: src/styles/base-style-sheet.ts:44

Returns the internal CSSStyleSheet Used by

Returns

CSSStyleSheet

Use Styles

decorator to attach styles to components

registerCleanup()

registerCleanup(cleanupFn: () => void): void;

Defined in: src/styles/base-style-sheet.ts:171

Registers a cleanup function to be called on disposal Used by

Parameters

Parameter	Type
`cleanupFn`	() => `void`

Returns

void

Rule

decorator to clean up reactive effects

setHost()

setHost(component: BaseComponent): void;

Defined in: src/styles/base-style-sheet.ts:52

Sets the host component and initializes styles Called by

Parameters

Parameter	Type
`component`	`BaseComponent`

Returns

void

Use Styles

decorator when attaching styles to a component