split() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods calls 5

Entity Profile

CommandLineInterface→ Codemods→ split() — tailwindcss Function Reference

Dependency Diagram

graph TD
  63b86c2b_0ad5_a37d_460f_17612cfec071["split()"]
  79c4e61a_7f2e_53a0_300b_705f6b159958["split.ts"]
  63b86c2b_0ad5_a37d_460f_17612cfec071 -->|defined in| 79c4e61a_7f2e_53a0_300b_705f6b159958
  283bbe03_c84a_2fd0_18b3_45f5bfcaa273["layers()"]
  63b86c2b_0ad5_a37d_460f_17612cfec071 -->|calls| 283bbe03_c84a_2fd0_18b3_45f5bfcaa273
  dd7577d7_bdb0_88c5_438f_51bb090ec42a["walk()"]
  63b86c2b_0ad5_a37d_460f_17612cfec071 -->|calls| dd7577d7_bdb0_88c5_438f_51bb090ec42a
  465fb269_beb8_5187_e963_cff3f69bb398["descendants()"]
  63b86c2b_0ad5_a37d_460f_17612cfec071 -->|calls| 465fb269_beb8_5187_e963_cff3f69bb398
  6df45c70_0c27_5b96_717a_5a24abadaaf4["fromRoot()"]
  63b86c2b_0ad5_a37d_460f_17612cfec071 -->|calls| 6df45c70_0c27_5b96_717a_5a24abadaaf4
  2820372c_b982_9e06_fc23_f8f4ac308d00["get()"]
  63b86c2b_0ad5_a37d_460f_17612cfec071 -->|calls| 2820372c_b982_9e06_fc23_f8f4ac308d00
  style 63b86c2b_0ad5_a37d_460f_17612cfec071 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