formatNodes() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods calls 1 called by 10

Entity Profile

CommandLineInterface→ Codemods→ formatNodes() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9f6b611c_7303_0355_74f7_03283a44c6d0["formatNodes()"]
  a088502e_f5da_0531_fbd0_c586a964c369["format-nodes.ts"]
  9f6b611c_7303_0355_74f7_03283a44c6d0 -->|defined in| a088502e_f5da_0531_fbd0_c586a964c369
  1957fb3b_c8b6_a30f_cecf_5df5d54d6e6f["migrate()"]
  1957fb3b_c8b6_a30f_cecf_5df5d54d6e6f -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  084f6f8b_fe90_a5cf_9cf6_6fcc92cc6163["migrate()"]
  084f6f8b_fe90_a5cf_9cf6_6fcc92cc6163 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  65a804da_70aa_285d_ae64_4a33e3ecc639["migrate()"]
  65a804da_70aa_285d_ae64_4a33e3ecc639 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  2c0c1b71_9ba4_613a_e0ea_df6593217df6["migrate()"]
  2c0c1b71_9ba4_613a_e0ea_df6593217df6 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  8116723c_3519_f19a_98fa_20694cdfd6fa["migrate()"]
  8116723c_3519_f19a_98fa_20694cdfd6fa -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  691801e2_532e_484c_34a4_aad4e82d7102["migrate()"]
  691801e2_532e_484c_34a4_aad4e82d7102 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  74585675_6a09_6523_3821_3c9717327602["migrate()"]
  74585675_6a09_6523_3821_3c9717327602 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  d9bea0e2_8cac_1f78_0da8_1b218d06e7f5["migrate()"]
  d9bea0e2_8cac_1f78_0da8_1b218d06e7f5 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  cfbc0a63_75ff_e07f_f568_e9b2cd8c59dc["migrate()"]
  cfbc0a63_75ff_e07f_f568_e9b2cd8c59dc -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  817bb61a_7ad0_1186_790a_6a40126eed80["run()"]
  817bb61a_7ad0_1186_790a_6a40126eed80 -->|calls| 9f6b611c_7303_0355_74f7_03283a44c6d0
  dd7577d7_bdb0_88c5_438f_51bb090ec42a["walk()"]
  9f6b611c_7303_0355_74f7_03283a44c6d0 -->|calls| dd7577d7_bdb0_88c5_438f_51bb090ec42a
  style 9f6b611c_7303_0355_74f7_03283a44c6d0 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,
  }
}