alphaReplacedDropShadowProperties() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/utilities.ts lines 6493–6542

function alphaReplacedDropShadowProperties(
  property: string,
  value: string,
  alpha: string | null | undefined,
  varInjector: (color: string) => string,
  prefix: string = '',
): AstNode[] {
  let requiresFallback = false

  let replacedValue = segment(value, ',')
    .map((value) =>
      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))
      }),
    )
    .map((value) => `drop-shadow(${value})`)
    .join(' ')

  if (requiresFallback) {
    return [
      decl(
        property,
        prefix +
          segment(value, ',')
            .map((value) => `drop-shadow(${replaceShadowColors(value, varInjector)})`)
            .join(' '),
      ),
      rule('@supports (color: lab(from red l a b))', [decl(property, prefix + replacedValue)]),
    ]
  } else {
    return [decl(property, prefix + replacedValue)]
  }
}