GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src/styles / createStyleSheet

Function: createStyleSheet()

createStyleSheet(cssText): CSSStyleSheet

Creates a constructable stylesheet. Gluon intentionally has no <style> fallback.

Parameters

cssText

string

Returns

CSSStyleSheet

Example

Create a constructable stylesheet from CSS text in the browser or a serializable descriptor during server rendering:

ts
import {
  adoptStyles,
  createStyleSheet,
  css,
  foundationStyles,
  getStyleSheetText,
  installGluonStyles,
  layerOrderStyles,
  unadoptStyles,
  type CssValue,
  type StyleTarget,
} from '@gluonjs/core/styles';

const accent: CssValue = '#3157ff';
const productStyles = css`
  :host { display: block; border-color: ${accent}; }
`;
const extra = createStyleSheet(':host { contain: content; }');
const target: StyleTarget = document.createElement('article').attachShadow({ mode: 'open' });
const removeFoundation = installGluonStyles(target);
adoptStyles(target, productStyles, extra);
console.log(target.adoptedStyleSheets.includes(productStyles), getStyleSheetText(productStyles), layerOrderStyles, foundationStyles);
unadoptStyles(target, productStyles, extra);
removeFoundation();