alphaReplacedShadowProperties() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/utilities.ts lines 6447–6491

function alphaReplacedShadowProperties(
  property: string,
  value: string,
  alpha: string | null | undefined,
  varInjector: (color: string) => string,
  prefix: string = '',
): AstNode[] {
  let requiresFallback = false
  let replacedValue = replaceShadowColors(value, (color) => {
    if (alpha == null) {
      return varInjector(color)
    }

    // When the input is currentcolor, we use our existing `color-mix(…)` approach to increase
    // browser support. Note that the fallback of this is handled more generically in
    // post-processing.
    if (color.startsWith('current')) {
      return varInjector(withAlpha(color, alpha))
    }

    // If any dynamic values are needed for the relative color syntax, we need to insert a
    // replacement as lightningcss won't be able to resolve them statically.
    if (color.startsWith('var(') || alpha.startsWith('var(')) {
      requiresFallback = true
    }

    return varInjector(replaceAlpha(color, alpha))
  })

  function applyPrefix(x: string) {
    if (!prefix) return x
    return segment(x, ',')
      .map((value) => prefix.trim() + ' ' + value.trim())
      .join(', ')
  }

  if (requiresFallback) {
    return [
      decl(property, applyPrefix(replaceShadowColors(value, varInjector))),
      rule('@supports (color: lab(from red l a b))', [decl(property, applyPrefix(replacedValue))]),
    ]
  } else {
    return [decl(property, applyPrefix(replacedValue))]
  }
}