ui Architecture Docs
Home / File/ create-style-map.test.ts — ui Source File

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

Architecture documentation for create-style-map.test.ts, a typescript file in the ui codebase. 3 imports, 0 dependents.

File typescript FrameworkTooling 3 imports

Entity Profile

Dependency Diagram

graph LR
  41e4e400_ae1e_8f4f_8458_fae7ce5b1dab["create-style-map.test.ts"]
  20ad6f91_6d0b_ef0e_6867_01a114c31d1d["create-style-map.ts"]
  41e4e400_ae1e_8f4f_8458_fae7ce5b1dab --> 20ad6f91_6d0b_ef0e_6867_01a114c31d1d
  67dd667d_bfd0_b60f_05a7_ffc37d6b752b["createStyleMap"]
  41e4e400_ae1e_8f4f_8458_fae7ce5b1dab --> 67dd667d_bfd0_b60f_05a7_ffc37d6b752b
  c8d55bee_7008_1e1f_317b_8dc47b31b6a8["vitest"]
  41e4e400_ae1e_8f4f_8458_fae7ce5b1dab --> c8d55bee_7008_1e1f_317b_8dc47b31b6a8
  style 41e4e400_ae1e_8f4f_8458_fae7ce5b1dab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { describe, expect, it } from "vitest"

import { createStyleMap } from "./create-style-map"

describe("parseStyle", () => {
  it("extracts tailwind classes from @apply directives", () => {
    const css = `
      .style-nova {
        .cn-alert-dialog-content {
          @apply bg-background gap-4 rounded-xl border;
        }
      }
    `

    const result = createStyleMap(css)

    expect(result).toMatchInlineSnapshot(`
      {
        "cn-alert-dialog-content": "bg-background gap-4 rounded-xl border",
      }
    `)
  })

  it("handles multiple @apply directives", () => {
    const css = `
      .cn-button {
        @apply rounded-lg border;
        @apply text-sm;
      }
    `

    const result = createStyleMap(css)

    expect(result).toMatchInlineSnapshot(`
      {
        "cn-button": "rounded-lg border text-sm",
      }
    `)
  })

  it("handles variant classes", () => {
    const css = `
      .cn-button-variant-default {
        @apply text-primary-foreground bg-primary;
      }
    `

    const result = createStyleMap(css)

    expect(result).toMatchInlineSnapshot(`
      {
        "cn-button-variant-default": "text-primary-foreground bg-primary",
      }
    `)
  })

  it("handles nested selectors", () => {
    const css = `
      .cn-card {
        @apply rounded-xl border;
// ... (108 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

What does create-style-map.test.ts do?
create-style-map.test.ts is a source file in the ui codebase, written in typescript. It belongs to the FrameworkTooling domain.
What does create-style-map.test.ts depend on?
create-style-map.test.ts imports 3 module(s): create-style-map.ts, createStyleMap, vitest.
Where is create-style-map.test.ts in the architecture?
create-style-map.test.ts is located at packages/shadcn/src/styles/create-style-map.test.ts (domain: FrameworkTooling, directory: packages/shadcn/src/styles).

Analyze Your Own Codebase

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

Try Supermodel Free