extractV3Base() — tailwindcss Function Reference

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

Function typescript MigrationSuite TemplateMigration calls 1 called by 1

Entity Profile

MigrationSuite→ TemplateMigration→ extractV3Base() — tailwindcss Function Reference

Dependency Diagram

graph TD
  c9435653_47da_ca15_e937_6532e96367aa["extractV3Base()"]
  faeb1e90_cf89_2804_6ef1_386b3a9ffaba["migratePrefix()"]
  faeb1e90_cf89_2804_6ef1_386b3a9ffaba -->|calls| c9435653_47da_ca15_e937_6532e96367aa
  2a20ea29_c850_cd61_5600_aeebbe3dda66["segment()"]
  c9435653_47da_ca15_e937_6532e96367aa -->|calls| 2a20ea29_c850_cd61_5600_aeebbe3dda66
  style c9435653_47da_ca15_e937_6532e96367aa 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,
    }
  }
}