API

Style API

This page documents the TSone style management system API.

StyleManager

import { StyleManager } from '@geektech/tsone/style';

const styleManager = new StyleManager();

StyleManager Methods

• addStyle(name, options): adds or replaces a named rule
• removeStyle(name): removes a named rule
• clearStyles(): clears all styles
• destroy(): cleans up this instance’s style nodes
• useStaticStyleSheet(href): requests static CSS from generated dev/build code; failures keep inline CSS

renderManagedStyleSheet(styles: Iterable<StyleOptions>): string serializes managed rules without a DOM. styleElement is null while static CSS is active; styles retains the full Map and edits restore inline CSS at the original position.

styleManager.addStyle('.button', {
  selector: '.button',
  properties: {
    padding: '8px 16px',
    backgroundColor: '#007bff',
    color: '#fff',
  },
});

styleManager.removeStyle('.button');
styleManager.clearStyles();

Managing Styles in Components

A component instance can manage local styles through this.styleManager in initStyles.

class ButtonComponent extends Component<object, object> {
  protected initState() {
    return {};
  }

  protected initStyles() {
    this.styleManager.addStyle('.button:hover', {
      selector: '.button:hover',
      properties: { backgroundColor: '#0069d9' },
    });
  }

  protected render(): VNode {
    return {
      tag: 'button',
      props: { className: 'button' },
      children: ['Click Me'],
    };
  }
}