Function styleOptionsToCssProperties

src/Skeleton.tsx:9–50

({
  baseColor,
  highlightColor,

  width,
  height,
  borderRadius,
  circle,

  direction,
  duration,
  enableAnimation = defaultEnableAnimation,

  customHighlightBackground,
}: SkeletonStyleProps & { circle: boolean })

// For performance & cleanliness, don't add any inline styles unless we have to
function styleOptionsToCssProperties({
  baseColor,
  highlightColor,

  width,
  height,
  borderRadius,
  circle,

  direction,
  duration,
  enableAnimation = defaultEnableAnimation,

  customHighlightBackground,
}: SkeletonStyleProps & { circle: boolean }): CSSProperties &
  Record<`--${string}`, string> {
  const style: ReturnType<typeof styleOptionsToCssProperties> = {};

  if (direction === 'rtl') style['--animation-direction'] = 'reverse';
  if (typeof duration === 'number')
    style['--animation-duration'] = `${duration}s`;
  if (!enableAnimation) style['--pseudo-element-display'] = 'none';

  if (typeof width === 'string' || typeof width === 'number')
    style.width = width;
  if (typeof height === 'string' || typeof height === 'number')
    style.height = height;

  if (typeof borderRadius === 'string' || typeof borderRadius === 'number')
    style.borderRadius = borderRadius;

  if (circle) style.borderRadius = '50%';

  if (typeof baseColor !== 'undefined') style['--base-color'] = baseColor;
  if (typeof highlightColor !== 'undefined')
    style['--highlight-color'] = highlightColor;

  if (typeof customHighlightBackground === 'string')
    style['--custom-highlight-background'] = customHighlightBackground;

  return style;
}

export interface SkeletonProps extends SkeletonStyleProps {
  count?: number;