split() — tailwindcss Function Reference

Architecture documentation for the split() function in split.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit Codemods calls 5

Entity Profile

UpgradeToolkit→ Codemods→ split() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2c2d9239_b049_29e5_d26a_fdb5e6893cee["split()"]
  e46aa0a1_8e0f_d880_965e_ea61032b8ef1["split.ts"]
  2c2d9239_b049_29e5_d26a_fdb5e6893cee -->|defined in| e46aa0a1_8e0f_d880_965e_ea61032b8ef1
  541f0913_4821_09d0_f31d_05489c40ddc7["layers()"]
  2c2d9239_b049_29e5_d26a_fdb5e6893cee -->|calls| 541f0913_4821_09d0_f31d_05489c40ddc7
  fb009bc2_68d9_5c0f_7fa7_fa364488e50a["walk()"]
  2c2d9239_b049_29e5_d26a_fdb5e6893cee -->|calls| fb009bc2_68d9_5c0f_7fa7_fa364488e50a
  c95c15d3_40c1_8edb_aa86_c69313b20391["descendants()"]
  2c2d9239_b049_29e5_d26a_fdb5e6893cee -->|calls| c95c15d3_40c1_8edb_aa86_c69313b20391
  7f66fb08_0387_a204_8b96_006facd79673["fromRoot()"]
  2c2d9239_b049_29e5_d26a_fdb5e6893cee -->|calls| 7f66fb08_0387_a204_8b96_006facd79673
  5bcf4886_1230_a8ff_7302_a26cc5a9a525["get()"]
  2c2d9239_b049_29e5_d26a_fdb5e6893cee -->|calls| 5bcf4886_1230_a8ff_7302_a26cc5a9a525
  style 2c2d9239_b049_29e5_d26a_fdb5e6893cee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/split.ts lines 6–257

export async function split(stylesheets: Stylesheet[]) {
  let stylesheetsById = new Map<StylesheetId, Stylesheet>()
  let stylesheetsByFile = new Map<string, Stylesheet>()

  for (let sheet of stylesheets) {
    stylesheetsById.set(sheet.id, sheet)

    if (sheet.file) {
      stylesheetsByFile.set(sheet.file, sheet)
    }
  }

  // Keep track of sheets that contain `@utility` rules
  let requiresSplit = new Set<Stylesheet>()

  for (let sheet of stylesheets) {
    // Root files don't need to be split
    if (sheet.isTailwindRoot) continue

    let containsUtility = false
    let containsUnsafe = sheet.layers().size > 0

    walk(sheet.root, (node) => {
      if (node.type === 'atrule' && node.name === 'utility') {
        containsUtility = true
      }

      // Safe to keep without splitting
      else if (
        // An `@import "…" layer(…)` is safe
        (node.type === 'atrule' && node.name === 'import' && node.params.includes('layer(')) ||
        // @layer blocks are safe
        (node.type === 'atrule' && node.name === 'layer') ||
        // Comments are safe
        node.type === 'comment'
      ) {
        return WalkAction.Skip
      }

      // Everything else is not safe, and requires a split
      else {
        containsUnsafe = true
      }

      // We already know we need to split this sheet
      if (containsUtility && containsUnsafe) {
        return WalkAction.Stop
      }

      return WalkAction.Skip
    })

    if (containsUtility && containsUnsafe) {
      requiresSplit.add(sheet)
    }
  }

  // Split every imported stylesheet into two parts
  let utilitySheets = new Map<Stylesheet, Stylesheet>()

  for (let sheet of stylesheets) {
    // Ignore stylesheets that were not imported
    if (!sheet.file) continue
    if (sheet.parents.size === 0) continue

    // Skip stylesheets that don't have utilities
    // and don't have any children that have utilities
    if (!requiresSplit.has(sheet)) {
      if (!Array.from(sheet.descendants()).some((child) => requiresSplit.has(child))) {
        continue
      }
    }

    let utilities = postcss.root()

    walk(sheet.root, (node) => {
      if (node.type !== 'atrule') return
      if (node.name !== 'utility') return

      // `append` will move this node from the original sheet
      // to the new utilities sheet