@gluonjs/core / src/styles / css

Function: css()

css(strings, ...values): CSSStyleSheet

Tagged-template helper that returns a constructable stylesheet.

Parameters

strings

TemplateStringsArray

values

...readonly CssValue[]

Returns

CSSStyleSheet

Example

Build a constructable stylesheet from a tagged template and interpolate only string or numeric CSS values:

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();