extractV3Base() — tailwindcss Function Reference

Architecture documentation for the extractV3Base() function in migrate-prefix.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit Codemods calls 1 called by 1

Entity Profile

UpgradeToolkit→ Codemods→ extractV3Base() — tailwindcss Function Reference

Dependency Diagram

graph TD
  140850c7_e088_0df8_4c28_edc0207aa6e0["extractV3Base()"]
  d13948d4_4434_bf78_9916_1ba327123c94["migrate-prefix.ts"]
  140850c7_e088_0df8_4c28_edc0207aa6e0 -->|defined in| d13948d4_4434_bf78_9916_1ba327123c94
  087d2224_9aa6_c6e5_3a75_d99cf251cb04["migratePrefix()"]
  087d2224_9aa6_c6e5_3a75_d99cf251cb04 -->|calls| 140850c7_e088_0df8_4c28_edc0207aa6e0
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  140850c7_e088_0df8_4c28_edc0207aa6e0 -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  style 140850c7_e088_0df8_4c28_edc0207aa6e0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/template/migrate-prefix.ts lines 67–128

function extractV3Base(
  designSystem: DesignSystem,
  userConfig: Config,
  rawCandidate: string,
): { base: string; start: number; end: number } | null {
  if (!designSystem.theme.prefix) return null
  if (!userConfig.prefix)
    throw new Error(
      'Could not find the Tailwind CSS v3 `prefix` configuration inside the JavaScript config.',
    )

  // hover:focus:underline
  // ^^^^^ ^^^^^^           -> Variants
  //             ^^^^^^^^^  -> Base
  let rawVariants = segment(rawCandidate, ':')

  // SAFETY: At this point it is safe to use TypeScript's non-null assertion
  // operator because even if the `input` was an empty string, splitting an
  // empty string by `:` will always result in an array with at least one
  // element.
  let base = rawVariants.pop()!
  let start = rawCandidate.length - base.length
  let end = start + base.length

  let important = false
  let negative = false

  // Candidates that end with an exclamation mark are the important version with
  // higher specificity of the non-important candidate, e.g. `mx-4!`.
  if (base[base.length - 1] === '!') {
    important = true
    base = base.slice(0, -1)
  }

  // Legacy syntax with leading `!`, e.g. `!mx-4`.
  else if (base[0] === '!') {
    important = true
    base = base.slice(1)
  }

  // Candidates that start with a dash are the negative versions of another
  // candidate, e.g. `-mx-4`.
  if (base[0] === '-') {
    negative = true
    base = base.slice(1)
  }

  if (!base.startsWith(userConfig.prefix) && base[0] !== '[') {
    return null
  } else {
    if (base[0] !== '[') base = base.slice(userConfig.prefix.length)

    if (negative) base = '-' + base
    if (important) base += '!'

    return {
      base,
      start,
      end,
    }
  }
}