transform-style-map.test.ts — ui Source File

Source Code

import { Project, ScriptKind } from "ts-morph"
import { describe, expect, it } from "vitest"

import { type StyleMap } from "./create-style-map"
import { transformStyleMap } from "./transform-style-map"

const baseStyleMap: StyleMap = {
  "cn-foo": "bg-background gap-4 rounded-xl",
}

async function applyTransform(source: string, styleMap: StyleMap) {
  const project = new Project({
    useInMemoryFileSystem: true,
  })

  const sourceFile = project.createSourceFile("component.tsx", source, {
    scriptKind: ScriptKind.TSX,
    overwrite: true,
  })

  await transformStyleMap({ sourceFile, styleMap })

  return sourceFile.getText()
}

describe("transformStyleMap", () => {
  it("adds tailwind classes to existing cn call", async () => {
    const source = `import * as React from "react"
import { cn } from "@/lib/utils"

function Foo({ className, ...props }: { className?: string }) {
  return (
    <div className={cn("cn-foo existing-class", className)} {...props} />
  )
}
`

    const result = await applyTransform(source, baseStyleMap)

    expect(result).toMatchInlineSnapshot(`
      "import * as React from "react"
      import { cn } from "@/lib/utils"

      function Foo({ className, ...props }: { className?: string }) {
        return (
          <div className={cn("bg-background gap-4 rounded-xl existing-class", className)} {...props} />
        )
      }
      "
    `)
  })

  it("adds tailwind classes to string literal className", async () => {
    const source = `import * as React from "react"

function Foo(props: React.ComponentProps<"div">) {
  return <div className="cn-foo" {...props} />
}
`

// ... (971 more lines)