Function serializeCSS

packages/extension/utils/css.ts:764–933

(
  style: Record<string, string>,
  { toJS = false, useRem, rootFontSize, scale, variableDisplay }: SerializeOptions,
  { transform, transformVariable, transformPx }: TransformOptions = {},
  { variableSyntax }: SerializeContext = {}
)

}

export function serializeCSS(
  style: Record<string, string>,
  { toJS = false, useRem, rootFontSize, scale, variableDisplay }: SerializeOptions,
  { transform, transformVariable, transformPx }: TransformOptions = {},
  { variableSyntax }: SerializeContext = {}
) {
  const options = { useRem, rootFontSize, scale, variableDisplay }
  const displayMode = variableDisplay
  const variableSyntaxMap =
    variableSyntax instanceof Map ? variableSyntax : new Map(Object.entries(variableSyntax ?? {}))

  function getVariableSyntax(name: string): string | undefined {
    return variableSyntaxMap.get(normalizeCustomPropertyName(name.trim()))
  }

  function applyDisplayMode(value: string): string {
    if (!displayMode || displayMode === 'reference') {
      return stripFallback(value)
    }
    if (displayMode === 'resolved') {
      return replaceVarFunctions(value, ({ full, fallback }) => fallback ?? full)
    }
    return value
  }

  function processValue(key: string, value: string) {
    const protectedFragments = createProtectedFragments()
    let current = value
    const useDisplayMode = displayMode != null

    if (useDisplayMode) {
      current = preprocessCssValue(current)
      current = current.replace(ZERO_UNITS_RE, '$10').trim()
    } else {
      current = normalizeStyleValue(current)
    }

    if (typeof scale === 'number' && scale !== 1) {
      current = scalePxValue(current, scale)
    }

    if (variableSyntaxMap.size || typeof transformVariable === 'function') {
      current = replaceVarFunctions(current, ({ full, name, fallback }) => {
        const syntax = getVariableSyntax(name)
        if (syntax) {
          return protectedFragments.protect(syntax)
        }

        if (typeof transformVariable !== 'function') {
          return full
        }

        const trimmed = name.trim()
        const normalizedName = trimmed.startsWith('--') ? trimmed.slice(2) : trimmed
        return transformVariable({
          code: current,
          name: normalizedName,
          value: fallback,