findTargetNode() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods called by 1

Entity Profile

CommandLineInterface→ Codemods→ findTargetNode() — tailwindcss Function Reference

Dependency Diagram

graph TD
  912aae5e_40ba_e3a2_6b46_c0759a6468f8["findTargetNode()"]
  ab650bb5_df86_6206_c20d_13143f971e6c["migrate-tailwind-directives.ts"]
  912aae5e_40ba_e3a2_6b46_c0759a6468f8 -->|defined in| ab650bb5_df86_6206_c20d_13143f971e6c
  bfe5c1d2_37ed_49d0_ef27_f44b54dba6f3["migrateTailwindDirectives()"]
  bfe5c1d2_37ed_49d0_ef27_f44b54dba6f3 -->|calls| 912aae5e_40ba_e3a2_6b46_c0759a6468f8
  style 912aae5e_40ba_e3a2_6b46_c0759a6468f8 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
}