splitClassName() — ui Function Reference

Source Code

packages/shadcn/src/utils/transformers/transform-css-vars.ts lines 105–146

export function splitClassName(className: string): (string | null)[] {
  if (!className.includes("/") && !className.includes(":")) {
    return [null, className, null]
  }

  // Find the last colon that's not inside brackets to split variant from name.
  let lastColonIndex = -1
  let bracketDepth = 0
  for (let i = className.length - 1; i >= 0; i--) {
    const char = className[i]
    if (char === "]") bracketDepth++
    else if (char === "[") bracketDepth--
    else if (char === ":" && bracketDepth === 0) {
      lastColonIndex = i
      break
    }
  }

  let variant: string | null = null
  let nameWithAlpha: string

  if (lastColonIndex === -1) {
    // No colon outside brackets, entire string is the name (possibly with alpha).
    nameWithAlpha = className
  } else {
    variant = className.slice(0, lastColonIndex)
    nameWithAlpha = className.slice(lastColonIndex + 1)
  }

  // Now split nameWithAlpha by "/" for alpha modifier.
  // Alpha modifiers are numeric (e.g., /50) or arbitrary (e.g., /[50%]).
  // Named groups like /alert-dialog-content would have been part of variant.
  const slashIndex = nameWithAlpha.lastIndexOf("/")
  if (slashIndex === -1) {
    return [variant, nameWithAlpha, null]
  }

  const name = nameWithAlpha.slice(0, slashIndex)
  const alpha = nameWithAlpha.slice(slashIndex + 1)

  return [variant, name, alpha]
}