shadcn-ui/ui-Codebasisanalyse: Wie funktioniert die shadcn-ui-CLI? – Teil 3

// Write css file.
const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
if (baseColor) {
  await fs.writeFile(
    config.resolvedPaths.tailwindCss,
    config.tailwind.cssVariables
      ? config.tailwind.prefix
        ? applyPrefixesCss(baseColor.cssVarsTemplate, config.tailwind.prefix)
        : baseColor.cssVarsTemplate
      : baseColor.inlineColorsTemplate,
    "utf8"
  )
}

export async function getRegistryBaseColor(baseColor: string) {
  try {
    const \[result\] = await fetchRegistry(\[\`colors/${baseColor}.json\`\])

    return registryBaseColorSchema.parse(result)
  } catch (error) {
    throw new Error(\`Failed to fetch base color from registry.\`)
  }
}

export function applyPrefix(input: string, prefix: string = "") {
  const classNames = input.split(" ")
  const prefixed: string\[\] = \[\]
  for (let className of classNames) {
    const \[variant, value, modifier\] = splitClassName(className)
    if (variant) {
      modifier
        ? prefixed.push(\`${variant}:${prefix}${value}/${modifier}\`)
        : prefixed.push(\`${variant}:${prefix}${value}\`)
    } else {
      modifier
        ? prefixed.push(\`${prefix}${value}/${modifier}\`)
        : prefixed.push(\`${prefix}${value}\`)
    }
  }
  return prefixed.join(" ")
}


export function applyPrefixesCss(css: string, prefix: string) {
  const lines = css.split("\\n")
  for (let line of lines) {
    if (line.includes("@apply")) {
      const originalTWCls = line.replace("@apply", "").trim()
      const prefixedTwCls = applyPrefix(originalTWCls, prefix)
      css = css.replace(originalTWCls, prefixedTwCls)
    }
  }
  return css
}

"cssVarsTemplate": "@tailwind base;\\n  @tailwind components;\\n  @tailwind utilities;\\n\\n  @layer base {\\n    :root {\\n      --background: 0 0% 100%;\\n      --foreground: 222.2 84% 4.9%;\\n      --card: 0 0% 100%;\\n      --card-foreground: 222.2 84% 4.9%;\\n      --popover: 0 0% 100%;\\n      --popover-foreground: 222.2 84% 4.9%;\\n      --primary: 222.2 47.4% 11.2%;\\n      --primary-foreground: 210 40% 98%;\\n      --secondary: 210 40% 96.1%;\\n      --secondary-foreground: 222.2 47.4% 11.2%;\\n      --muted: 210 40% 96.1%;\\n      --muted-foreground: 215.4 16.3% 46.9%;\\n      --accent: 210 40% 96.1%;\\n      --accent-foreground: 222.2 47.4% 11.2%;\\n      --destructive: 0 84.2% 60.2%;\\n      --destructive-foreground: 210 40% 98%;\\n      --border: 214.3 31.8% 91.4%;\\n      --input: 214.3 31.8% 91.4%;\\n      --ring: 222.2 84% 4.9%;\\n      --radius: 0.5rem;\\n      --chart-1: 12 76% 61%;\\n      --chart-2: 173 58% 39%;\\n      --chart-3: 197 37% 24%;\\n      --chart-4: 43 74% 66%;\\n      --chart-5: 27 87% 67%;\\n    }\\n\\n    .dark {\\n      --background: 222.2 84% 4.9%;\\n      --foreground: 210 40% 98%;\\n      --card: 222.2 84% 4.9%;\\n      --card-foreground: 210 40% 98%;\\n      --popover: 222.2 84% 4.9%;\\n      --popover-foreground: 210 40% 98%;\\n      --primary: 210 40% 98%;\\n      --primary-foreground: 222.2 47.4% 11.2%;\\n      --secondary: 217.2 32.6% 17.5%;\\n      --secondary-foreground: 210 40% 98%;\\n      --muted: 217.2 32.6% 17.5%;\\n      --muted-foreground: 215 20.2% 65.1%;\\n      --accent: 217.2 32.6% 17.5%;\\n      --accent-foreground: 210 40% 98%;\\n      --destructive: 0 62.8% 30.6%;\\n      --destructive-foreground: 210 40% 98%;\\n      --border: 217.2 32.6% 17.5%;\\n      --input: 217.2 32.6% 17.5%;\\n      --ring: 212.7 26.8% 83.9%;\\n      --chart-1: 220 70% 50%;\\n      --chart-2: 160 60% 45%;\\n      --chart-3: 30 80% 55%;\\n      --chart-4: 280 65% 60%;\\n      --chart-5: 340 75% 55%;\\n    }\\n  }\\n\\n  @layer base {\\n    \* {\\n      @apply border-border;\\n    }\\n    body {\\n      @apply bg-background text-foreground;\\n    }\\n  }"