cleanupDefaultNextStylesPlugin() — ui Function Reference

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

Function typescript FrameworkTooling TemplateSync calls 1 called by 1

Entity Profile

FrameworkTooling→ TemplateSync→ cleanupDefaultNextStylesPlugin() — ui Function Reference

Dependency Diagram

graph TD
  be472c6f_9599_a13c_545c_918b73c2bc3a["cleanupDefaultNextStylesPlugin()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  be472c6f_9599_a13c_545c_918b73c2bc3a -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| be472c6f_9599_a13c_545c_918b73c2bc3a
  58e7b2ac_cad4_7633_94d8_189a236a9eac["removeConflictVars()"]
  be472c6f_9599_a13c_545c_918b73c2bc3a -->|calls| 58e7b2ac_cad4_7633_94d8_189a236a9eac
  style be472c6f_9599_a13c_545c_918b73c2bc3a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 290–355

function cleanupDefaultNextStylesPlugin() {
  return {
    postcssPlugin: "cleanup-default-next-styles",
    Once(root: Root) {
      const bodyRule = root.nodes.find(
        (node): node is Rule => node.type === "rule" && node.selector === "body"
      )
      if (bodyRule) {
        // Remove color from the body node.
        bodyRule.nodes
          .find(
            (node): node is postcss.Declaration =>
              node.type === "decl" &&
              node.prop === "color" &&
              ["rgb(var(--foreground-rgb))", "var(--foreground)"].includes(
                node.value
              )
          )
          ?.remove()

        // Remove background: linear-gradient.
        bodyRule.nodes
          .find((node): node is postcss.Declaration => {
            return (
              node.type === "decl" &&
              node.prop === "background" &&
              // This is only going to run on create project, so all good.
              (node.value.startsWith("linear-gradient") ||
                node.value === "var(--background)")
            )
          })
          ?.remove()

        // Remove font-family: Arial, Helvetica, sans-serif;
        bodyRule.nodes
          .find(
            (node): node is postcss.Declaration =>
              node.type === "decl" &&
              node.prop === "font-family" &&
              node.value === "Arial, Helvetica, sans-serif"
          )
          ?.remove()

        // If the body rule is empty, remove it.
        if (bodyRule.nodes.length === 0) {
          bodyRule.remove()
        }
      }

      removeConflictVars(root)

      const darkRootRule = root.nodes.find(
        (node): node is Rule =>
          node.type === "atrule" &&
          node.params === "(prefers-color-scheme: dark)"
      )

      if (darkRootRule) {
        removeConflictVars(darkRootRule)
        if (darkRootRule.nodes.length === 0) {
          darkRootRule.remove()
        }
      }
    },
  }
}