ui Architecture Docs
Home / Function/ createStyleMap() — ui Function Reference

createStyleMap() — ui Function Reference

Architecture documentation for the createStyleMap() function in create-style-map.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 3

Entity Profile

Dependency Diagram

graph TD
  67dd667d_bfd0_b60f_05a7_ffc37d6b752b["createStyleMap()"]
  20ad6f91_6d0b_ef0e_6867_01a114c31d1d["create-style-map.ts"]
  67dd667d_bfd0_b60f_05a7_ffc37d6b752b -->|defined in| 20ad6f91_6d0b_ef0e_6867_01a114c31d1d
  27ea15b8_017c_e2d7_670b_62cc1a86e72b["extractTailwindClasses()"]
  67dd667d_bfd0_b60f_05a7_ffc37d6b752b -->|calls| 27ea15b8_017c_e2d7_670b_62cc1a86e72b
  812864f9_7f43_98c2_4fa0_d3fff7ea5f24["normalizeSelector()"]
  67dd667d_bfd0_b60f_05a7_ffc37d6b752b -->|calls| 812864f9_7f43_98c2_4fa0_d3fff7ea5f24
  8d2ca732_eefd_e674_f136_9b268dd3bbb8["findSubjectClass()"]
  67dd667d_bfd0_b60f_05a7_ffc37d6b752b -->|calls| 8d2ca732_eefd_e674_f136_9b268dd3bbb8
  style 67dd667d_bfd0_b60f_05a7_ffc37d6b752b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/styles/create-style-map.ts lines 17–61

export function createStyleMap(input: string) {
  const root = postcss.parse(input)

  const result: Record<string, string> = {}

  root.walkRules((rule) => {
    const selectors = rule.selectors ?? []

    if (selectors.length === 0) {
      return
    }

    const tailwindClasses = extractTailwindClasses(rule)

    if (!tailwindClasses) {
      return
    }

    for (const selector of selectors) {
      const normalizedSelector = normalizeSelector(selector)

      selectorParser((selectorsRoot) => {
        selectorsRoot.each((sel) => {
          const targetClass = findSubjectClass(sel)

          if (!targetClass) {
            return
          }

          const className = targetClass.value

          if (!className.startsWith(CN_PREFIX)) {
            return
          }

          result[className] = result[className]
            ? `${tailwindClasses} ${result[className]}`
            : tailwindClasses
        })
      }).processSync(normalizedSelector)
    }
  })

  return styleMapSchema.parse(result)
}

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does createStyleMap() do?
createStyleMap() is a function in the ui codebase, defined in packages/shadcn/src/styles/create-style-map.ts.
Where is createStyleMap() defined?
createStyleMap() is defined in packages/shadcn/src/styles/create-style-map.ts at line 17.
What does createStyleMap() call?
createStyleMap() calls 3 function(s): extractTailwindClasses, findSubjectClass, normalizeSelector.

Analyze Your Own Codebase

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

Try Supermodel Free