ui Architecture Docs
Home / File/ transform-css-vars.test.ts — ui Source File

transform-css-vars.test.ts — ui Source File

Architecture documentation for transform-css-vars.test.ts, a typescript file in the ui codebase. 4 imports, 0 dependents.

File typescript FrameworkTooling 4 imports

Entity Profile

Dependency Diagram

graph LR
  1c8d53be_8190_b4c6_fb3e_bc2f87e2af5d["transform-css-vars.test.ts"]
  646bd874_990a_e30f_0d03_073229dd52ad["index.ts"]
  1c8d53be_8190_b4c6_fb3e_bc2f87e2af5d --> 646bd874_990a_e30f_0d03_073229dd52ad
  7d044675_0040_220b_aa9c_215286f03b0a["transform"]
  1c8d53be_8190_b4c6_fb3e_bc2f87e2af5d --> 7d044675_0040_220b_aa9c_215286f03b0a
  292508bf_8c14_93d3_a3ee_279f43ba3e6b["stone.json"]
  1c8d53be_8190_b4c6_fb3e_bc2f87e2af5d --> 292508bf_8c14_93d3_a3ee_279f43ba3e6b
  c8d55bee_7008_1e1f_317b_8dc47b31b6a8["vitest"]
  1c8d53be_8190_b4c6_fb3e_bc2f87e2af5d --> c8d55bee_7008_1e1f_317b_8dc47b31b6a8
  style 1c8d53be_8190_b4c6_fb3e_bc2f87e2af5d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect, test } from "vitest"

import { transform } from "../../src/utils/transformers"
import stone from "../fixtures/colors/stone.json"

test("transform css vars", async () => {
  expect(
    await transform({
      filename: "test.ts",
      raw: `import * as React from "react"
export function Foo() {
	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
}"
    `,
      config: {
        tsx: true,
        tailwind: {
          baseColor: "stone",
          cssVariables: true,
        },
        aliases: {
          components: "@/components",
          utils: "@/lib/utils",
        },
      },
      baseColor: stone,
    })
  ).toMatchSnapshot()

  expect(
    await transform({
      filename: "test.ts",
      raw: `import * as React from "react"
export function Foo() {
	return <div className="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
}"
    `,
      config: {
        tsx: true,
        tailwind: {
          baseColor: "stone",
          cssVariables: false,
        },
        aliases: {
          components: "@/components",
          utils: "@/lib/utils",
        },
      },
      baseColor: stone,
    })
  ).toMatchSnapshot()

  expect(
    await transform({
      filename: "test.ts",
      raw: `import * as React from "react"
export function Foo() {
	return <div className={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
}"
    `,
      config: {
        tsx: true,
        tailwind: {
          baseColor: "stone",
          cssVariables: false,
        },
        aliases: {
          components: "@/components",
          utils: "@/lib/utils",
        },
      },
      baseColor: stone,
    })
  ).toMatchSnapshot()

  expect(
    await transform({
      filename: "test.ts",
      raw: `import * as React from "react"
export function Foo() {
	return <div className={cn("bg-background border border-input")}>foo</div>
}"
    `,
      config: {
        tsx: true,
        tailwind: {
          baseColor: "stone",
          cssVariables: false,
        },
        aliases: {
          components: "@/components",
          utils: "@/lib/utils",
        },
      },
      baseColor: stone,
    })
  ).toMatchSnapshot()
})

Domain

Dependencies

Source

Frequently Asked Questions

What does transform-css-vars.test.ts do?
transform-css-vars.test.ts is a source file in the ui codebase, written in typescript. It belongs to the FrameworkTooling domain.
What does transform-css-vars.test.ts depend on?
transform-css-vars.test.ts imports 4 module(s): index.ts, stone.json, transform, vitest.
Where is transform-css-vars.test.ts in the architecture?
transform-css-vars.test.ts is located at packages/shadcn/test/utils/transform-css-vars.test.ts (domain: FrameworkTooling, directory: packages/shadcn/test/utils).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free