findTargetNode() — tailwindcss Function Reference

Architecture documentation for the findTargetNode() function in migrate-tailwind-directives.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit Codemods called by 1

Entity Profile

UpgradeToolkit→ Codemods→ findTargetNode() — tailwindcss Function Reference

Dependency Diagram

graph TD
  2163a495_0f06_9629_df9e_883880a0a836["findTargetNode()"]
  66040ab2_cdeb_5acc_9ce9_433509fb3703["migrate-tailwind-directives.ts"]
  2163a495_0f06_9629_df9e_883880a0a836 -->|defined in| 66040ab2_cdeb_5acc_9ce9_433509fb3703
  a0c1df04_dc25_e0d4_bd78_56b53b042278["migrateTailwindDirectives()"]
  a0c1df04_dc25_e0d4_bd78_56b53b042278 -->|calls| 2163a495_0f06_9629_df9e_883880a0a836
  style 2163a495_0f06_9629_df9e_883880a0a836 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-tailwind-directives.ts lines 136–188

function findTargetNode(nodes: AtRule[]) {
  // Start at the `base` or `utilities` node (whichever comes first), and find
  // the spot where we can insert the new import.
  let target: ChildNode = nodes.at(0)!

  // Only allowed nodes before the `@import` are:
  //
  // - `@charset` at-rule.
  // - `@layer foo, bar, baz;` at-rule to define the order of the layers.
  // - `@import` at-rule to import other CSS files.
  // - Comments.
  //
  // Nodes that cannot exist before the `@import` are:
  //
  // - Any other at-rule.
  // - Any rule.
  let previous = target.prev()
  while (previous) {
    // Rules are not allowed before the `@import`, so we have to at least inject
    // the `@import` before this rule.
    if (previous.type === 'rule') {
      target = previous
    }

    // Some at-rules are allowed before the `@import`.
    if (previous.type === 'atrule') {
      // `@charset` and `@import` are allowed before the `@import`.
      if (previous.name === 'charset' || previous.name === 'import') {
        // Allowed
        previous = previous.prev()
        continue
      }

      // `@layer` without any nodes is allowed before the `@import`.
      else if (previous.name === 'layer' && !previous.nodes) {
        // Allowed
        previous = previous.prev()
        continue
      }

      // Anything other at-rule (`@media`, `@supports`, etc.) is not allowed
      // before the `@import`.
      else {
        target = previous
      }
    }

    // Keep checking the previous node.
    previous = previous.prev()
  }

  return target
}