transformCss() — ui Function Reference

Architecture documentation for the transformCss() function in update-css.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 1 called by 1

Entity Profile

FrameworkTooling→ CLICore→ transformCss() — ui Function Reference

Dependency Diagram

graph TD
  f51e58e3_7a1b_20d7_d56c_af590db86289["transformCss()"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0["update-css.ts"]
  f51e58e3_7a1b_20d7_d56c_af590db86289 -->|defined in| 19f89ba1_d1e0_8dcc_df03_c70e9de01ca0
  dbbf9c53_e74c_20ab_2a14_13e89d970437["updateCss()"]
  dbbf9c53_e74c_20ab_2a14_13e89d970437 -->|calls| f51e58e3_7a1b_20d7_d56c_af590db86289
  3ed16854_5fb1_8471_04b6_de34189977ee["updateCssPlugin()"]
  f51e58e3_7a1b_20d7_d56c_af590db86289 -->|calls| 3ed16854_5fb1_8471_04b6_de34189977ee
  style f51e58e3_7a1b_20d7_d56c_af590db86289 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css.ts lines 52–83

export async function transformCss(
  input: string,
  css: z.infer<typeof registryItemCssSchema>
) {
  const plugins = [updateCssPlugin(css)]

  const result = await postcss(plugins).process(input, {
    from: undefined,
  })

  let output = result.css

  // PostCSS doesn't add semicolons to at-rules without bodies when they're the last node.
  // We need to manually ensure they have semicolons.
  const root = result.root
  if (root.nodes && root.nodes.length > 0) {
    const lastNode = root.nodes[root.nodes.length - 1]
    if (
      lastNode.type === "atrule" &&
      !lastNode.nodes &&
      !output.trimEnd().endsWith(";")
    ) {
      output = output.trimEnd() + ";"
    }
  }

  output = output.replace(/\/\* ---break--- \*\//g, "")
  output = output.replace(/(\n\s*\n)+/g, "\n\n")
  output = output.trimEnd()

  return output
}