formatNodes() — tailwindcss Function Reference

Architecture documentation for the formatNodes() function in format-nodes.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit Codemods calls 1 called by 10

Entity Profile

UpgradeToolkit→ Codemods→ formatNodes() — tailwindcss Function Reference

Dependency Diagram

graph TD
  729a086c_18ec_2750_83e5_bdd730f8fa5e["formatNodes()"]
  e7639b6d_2132_7e05_9498_c732c7517772["format-nodes.ts"]
  729a086c_18ec_2750_83e5_bdd730f8fa5e -->|defined in| e7639b6d_2132_7e05_9498_c732c7517772
  b2462a9a_300b_e7ab_7d56_790bc72f6c28["migrate()"]
  b2462a9a_300b_e7ab_7d56_790bc72f6c28 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  daaeb558_f493_21e4_086c_d337c75d4e05["migrate()"]
  daaeb558_f493_21e4_086c_d337c75d4e05 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  6681164e_d8eb_ea9a_ca1c_5d3d077cabd5["migrate()"]
  6681164e_d8eb_ea9a_ca1c_5d3d077cabd5 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  357a27af_0d02_5377_1d2a_20de9a82dba1["migrate()"]
  357a27af_0d02_5377_1d2a_20de9a82dba1 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  26298c28_699e_61f2_4a12_de01f329a5d8["migrate()"]
  26298c28_699e_61f2_4a12_de01f329a5d8 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  afdd8826_c4ba_f675_924c_bce1adab8603["migrate()"]
  afdd8826_c4ba_f675_924c_bce1adab8603 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  345ce337_4027_ef1a_0d01_935066809de4["migrate()"]
  345ce337_4027_ef1a_0d01_935066809de4 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  17550040_432e_8df4_09fe_ecb183594100["migrate()"]
  17550040_432e_8df4_09fe_ecb183594100 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  e2606484_06bf_1985_5729_1134a15ad1e6["migrate()"]
  e2606484_06bf_1985_5729_1134a15ad1e6 -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  6066f111_c660_b87d_6993_07d8cc779b5c["run()"]
  6066f111_c660_b87d_6993_07d8cc779b5c -->|calls| 729a086c_18ec_2750_83e5_bdd730f8fa5e
  fb009bc2_68d9_5c0f_7fa7_fa364488e50a["walk()"]
  729a086c_18ec_2750_83e5_bdd730f8fa5e -->|calls| fb009bc2_68d9_5c0f_7fa7_fa364488e50a
  style 729a086c_18ec_2750_83e5_bdd730f8fa5e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/format-nodes.ts lines 13–84

export function formatNodes(): Plugin {
  async function migrate(root: Root) {
    // Find the nodes to format
    let nodesToFormat: ChildNode[] = []
    walk(root, (child, _idx, parent) => {
      // Always print semicolons after at-rules
      if (child.type === 'atrule') {
        child.raws.semicolon = true
      }

      if (child.type === 'atrule' && child.name === 'tw-bucket') {
        nodesToFormat.push(child)
      } else if (child.raws.tailwind_pretty) {
        // @ts-expect-error We might not have a parent
        child.parent ??= parent
        nodesToFormat.unshift(child)
      }
    })

    let output: string[] = []

    // Format the nodes
    for (let node of nodesToFormat) {
      let contents = (() => {
        if (node.type === 'atrule' && node.name === 'tw-bucket') {
          // Remove the `@tw-bucket` wrapping, and use the contents directly.
          return node
            .toString()
            .trim()
            .replace(/@tw-bucket(.*?){([\s\S]*)}/, '$2')
        }

        return node.toString()
      })()

      // Do not format the user bucket to ensure we keep the user's formatting
      // intact.
      if (node.type === 'atrule' && node.name === 'tw-bucket' && node.params === 'user') {
        output.push(contents)
        continue
      }

      // Format buckets
      if (node.type === 'atrule' && node.name === 'tw-bucket') {
        output.push(await format(contents, FORMAT_OPTIONS))
        continue
      }

      // Format any other nodes
      node.replaceWith(
        postcss.parse(
          `${node.raws.before ?? ''}${(await format(contents, FORMAT_OPTIONS)).trim()}`,
        ),
      )
    }

    root.removeAll()
    root.append(
      postcss.parse(
        output
          .map((bucket) => bucket.trim())
          .filter(Boolean)
          .join('\n\n'),
      ),
    )
  }

  return {
    postcssPlugin: '@tailwindcss/upgrade/format-nodes',
    OnceExit: migrate,
  }
}