replaceShadowColors() — tailwindcss Function Reference

Architecture documentation for the replaceShadowColors() function in replace-shadow-colors.ts from the tailwindcss codebase.

Function typescript OxideEngine Extractor calls 1 called by 2

Entity Profile

OxideEngine→ Extractor→ replaceShadowColors() — tailwindcss Function Reference

Dependency Diagram

graph TD
  5bac8829_51ba_4cde_5b5b_16bf890de6ec["replaceShadowColors()"]
  fa53b0d6_dd5c_93d6_d0a9_732da934552f["replace-shadow-colors.ts"]
  5bac8829_51ba_4cde_5b5b_16bf890de6ec -->|defined in| fa53b0d6_dd5c_93d6_d0a9_732da934552f
  314b128c_0d3c_81a7_f2fa_d11e9edcc320["alphaReplacedShadowProperties()"]
  314b128c_0d3c_81a7_f2fa_d11e9edcc320 -->|calls| 5bac8829_51ba_4cde_5b5b_16bf890de6ec
  6e33a9d2_fe1c_c268_d0ec_3c5725803a90["alphaReplacedDropShadowProperties()"]
  6e33a9d2_fe1c_c268_d0ec_3c5725803a90 -->|calls| 5bac8829_51ba_4cde_5b5b_16bf890de6ec
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  5bac8829_51ba_4cde_5b5b_16bf890de6ec -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  style 5bac8829_51ba_4cde_5b5b_16bf890de6ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utils/replace-shadow-colors.ts lines 6–48

export function replaceShadowColors(input: string, replacement: (color: string) => string) {
  let shadows = segment(input, ',').map((shadow) => {
    shadow = shadow.trim()
    let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
    let color = null
    let offsetX = null
    let offsetY = null

    for (let part of parts) {
      if (KEYWORDS.has(part)) {
        continue
      } else if (LENGTH.test(part)) {
        if (offsetX === null) {
          offsetX = part
        } else if (offsetY === null) {
          offsetY = part
        }

        // Reset index, since the regex is stateful.
        LENGTH.lastIndex = 0
      } else if (color === null) {
        color = part
      }
    }

    // If the x and y offsets were not detected, the shadow is either invalid or
    // using a variable to represent more than one field in the shadow value, so
    // we can't know what to replace.
    if (offsetX === null || offsetY === null) return shadow

    let replacementColor = replacement(color ?? 'currentcolor')

    if (color !== null) {
      // If a color was found, replace the color.
      return shadow.replace(color, replacementColor)
    }
    // If no color was found, assume the shadow is relying on the browser
    // default shadow color and append the replacement color.
    return `${shadow} ${replacementColor}`
  })

  return shadows.join(', ')
}