GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src/styles / replaceStyleSheet

Function: replaceStyleSheet()

replaceStyleSheet(sheet, cssText): void

Replaces a constructed sheet in place so every adopter keeps its identity.

Parameters

sheet

CSSStyleSheet

cssText

string

Returns

void

Example

Replace constructed stylesheet text in place while every target preserves the same sheet identity:

ts
import {
  createStyleSheetOwner,
  createStyleSheetSelection,
  css,
  getStyleSheetDigest,
  getStyleTextDigest,
  replaceStyleSheet,
  type StyleSheetOwner,
  type StyleSheetSelection,
  type StyleSheetSelectionEntry,
} from '@gluonjs/core';

const sheet = css`:root { --shop-accent: blue; }`;
const entry = { id: 'shop-theme', scope: 'shop', sheet } satisfies StyleSheetSelectionEntry;
const selection: StyleSheetSelection = createStyleSheetSelection([entry]);
const owner: StyleSheetOwner = createStyleSheetOwner(document);
owner.retain(sheet);
replaceStyleSheet(sheet, ':root { --shop-accent: green; }');
console.log(selection.entries[0]?.id, getStyleSheetDigest(sheet), getStyleTextDigest('shop'));
owner.release(sheet);
owner.dispose();