Type Alias: CssValue

CssValue = string | number

Example

Restrict constructable stylesheet template interpolation to deliberate string and 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();