site-builder/craft/src/utils/style-helpers.ts

import { CSSProperties } from 'react';
import { escapeAttr, safeUrl } from './escape';

const camelToKebab = (str: string): string =>
  str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());

const URL_RE = /url\(\s*(['"]?)([\s\S]*?)\1\s*\)/gi;

/**
 * Sanitizes a single CSS declaration value so it can never terminate the
 * `style="..."` attribute early, inject an extra declaration via a stray
 * `;`, or smuggle a `javascript:`/`vbscript:`/`data:text/html` URL through
 * a `url(...)` reference. Legitimate multi-part values (box-shadow,
 * gradients, etc.) that contain none of these characters pass through
 * unchanged.
 */
function sanitizeCssValue(raw: string): string {
  // Neutralize url(...) references: validate/strip the scheme and re-wrap
  // in single quotes with the contents escaped for attribute safety.
  let val = raw.replace(URL_RE, (_m, _q, inner) => `url('${escapeAttr(safeUrl(inner.trim()))}')`);
  // A `;` in a CSS value is never legitimate (declarations are separated by
  // it) -- stray semicolons are how a breakout injects a second property.
  val = val.replace(/;/g, '');
  // Any remaining raw `"` would close the `style="..."` attribute early.
  val = val.replace(/"/g, '"');
  return val;
}

export function cssPropsToString(style: CSSProperties | undefined): string {
  if (!style) return '';
  return Object.entries(style)
    .filter(([, v]) => v !== undefined && v !== null && v !== '')
    .map(([k, v]) => `${camelToKebab(k)}:${typeof v === 'string' ? sanitizeCssValue(v) : v}`)
    .join(';');
}

export function mergeStyles(...styles: (CSSProperties | undefined)[]): CSSProperties {
  return Object.assign({}, ...styles.filter(Boolean));
}