Home / File/ update-css.ts — ui Source File

update-css.ts — ui Source File

Architecture documentation for update-css.ts, a typescript file in the ui codebase. 12 imports, 1 dependents.

File typescript FrameworkTooling TemplateSync 12 imports 1 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0["update-css.ts"]
  eac8f98f_e40a_7fe8_f505_372c83d20c7a["fs"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> eac8f98f_e40a_7fe8_f505_372c83d20c7a
  d05ec4ea_7a68_3a36_bfa4_9ba7f8409ee5["path"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> d05ec4ea_7a68_3a36_bfa4_9ba7f8409ee5
  a3b2545e_3d8c_699d_ef11_6ab18db14666["schema"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> a3b2545e_3d8c_699d_ef11_6ab18db14666
  b2895591_2a74_d518_deda_2f26be766dcb["get-config"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> b2895591_2a74_d518_deda_2f26be766dcb
  15e8bad0_00cc_3d96_8e33_2f062120ea7f["highlighter"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> 15e8bad0_00cc_3d96_8e33_2f062120ea7f
  a3e9bc4e_1faf_6261_a1db_396981c7761d["spinner"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> a3e9bc4e_1faf_6261_a1db_396981c7761d
  b71db677_2c3f_c5cd_61c3_36109697225a["postcss"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> b71db677_2c3f_c5cd_61c3_36109697225a
  a28e5e74_bee8_fe92_eae8_330535100f05["at-rule"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> a28e5e74_bee8_fe92_eae8_330535100f05
  5f8318f7_3389_51fd_048c_2c5f393a2cdc["declaration"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> 5f8318f7_3389_51fd_048c_2c5f393a2cdc
  66e9386d_4b25_170c_221a_e9e57afa3f50["root"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> 66e9386d_4b25_170c_221a_e9e57afa3f50
  89f67ac0_c68e_7b54_1f23_a612feb26502["rule"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> 89f67ac0_c68e_7b54_1f23_a612feb26502
  6802ce19_522d_e5fb_e458_8826d9f6952e["zod"]
  19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 --> 6802ce19_522d_e5fb_e458_8826d9f6952e
  05ea3850_4cfb_f1fa_2d99_b75c0bab47a0["update-css.test.ts"]
  05ea3850_4cfb_f1fa_2d99_b75c0bab47a0 --> 19f89ba1_d1e0_8dcc_df03_c70e9de01ca0
  style 19f89ba1_d1e0_8dcc_df03_c70e9de01ca0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { promises as fs } from "fs"
import path from "path"
import { registryItemCssSchema } from "@/src/schema"
import { Config } from "@/src/utils/get-config"
import { highlighter } from "@/src/utils/highlighter"
import { spinner } from "@/src/utils/spinner"
import postcss from "postcss"
import AtRule from "postcss/lib/at-rule"
import Declaration from "postcss/lib/declaration"
import Root from "postcss/lib/root"
import Rule from "postcss/lib/rule"
import { z } from "zod"

export async function updateCss(
  css: z.infer<typeof registryItemCssSchema> | undefined,
  config: Config,
  options: {
    silent?: boolean
  }
) {
  if (
    !config.resolvedPaths.tailwindCss ||
    !css ||
    Object.keys(css).length === 0
  ) {
    return
  }

  options = {
    silent: false,
    ...options,
  }

  const cssFilepath = config.resolvedPaths.tailwindCss
  const cssFilepathRelative = path.relative(
    config.resolvedPaths.cwd,
    cssFilepath
  )
  const cssSpinner = spinner(
    `Updating ${highlighter.info(cssFilepathRelative)}`,
    {
      silent: options.silent,
    }
  ).start()

  const raw = await fs.readFile(cssFilepath, "utf8")
  let output = await transformCss(raw, css)
  await fs.writeFile(cssFilepath, output, "utf8")
  cssSpinner.succeed()
}

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

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

Subdomains

Dependencies

  • at-rule
  • declaration
  • fs
  • get-config
  • highlighter
  • path
  • postcss
  • root
  • rule
  • schema
  • spinner
  • zod

Frequently Asked Questions

What does update-css.ts do?
update-css.ts is a source file in the ui codebase, written in typescript. It belongs to the FrameworkTooling domain, TemplateSync subdomain.
What functions are defined in update-css.ts?
update-css.ts defines 5 function(s): processAtRule, processRule, transformCss, updateCss, updateCssPlugin.
What does update-css.ts depend on?
update-css.ts imports 12 module(s): at-rule, declaration, fs, get-config, highlighter, path, postcss, root, and 4 more.
What files import update-css.ts?
update-css.ts is imported by 1 file(s): update-css.test.ts.
Where is update-css.ts in the architecture?
update-css.ts is located at packages/shadcn/src/utils/updaters/update-css.ts (domain: FrameworkTooling, subdomain: TemplateSync, directory: packages/shadcn/src/utils/updaters).

Analyze Your Own Codebase

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

Try Supermodel Free