tailwindcss Architecture Docs
Home / Function/ migrateMissingLayers() — tailwindcss Function Reference

migrateMissingLayers() — tailwindcss Function Reference

Architecture documentation for the migrateMissingLayers() function in migrate-missing-layers.ts from the tailwindcss codebase.

Function typescript CommandLineInterface Codemods calls 1 called by 2

Entity Profile

Dependency Diagram

graph TD
  59c8138d_8a81_f8cc_a0c2_1066cae6363b["migrateMissingLayers()"]
  c8e9db66_5242_9932_2886_2c9db99f6ac2["migrate-missing-layers.ts"]
  59c8138d_8a81_f8cc_a0c2_1066cae6363b -->|defined in| c8e9db66_5242_9932_2886_2c9db99f6ac2
  2c0c1b71_9ba4_613a_e0ea_df6593217df6["migrate()"]
  2c0c1b71_9ba4_613a_e0ea_df6593217df6 -->|calls| 59c8138d_8a81_f8cc_a0c2_1066cae6363b
  1be562b7_fe23_7e22_03ec_31b3d101e5e5["migrateContents()"]
  1be562b7_fe23_7e22_03ec_31b3d101e5e5 -->|calls| 59c8138d_8a81_f8cc_a0c2_1066cae6363b
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"]
  59c8138d_8a81_f8cc_a0c2_1066cae6363b -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  style 59c8138d_8a81_f8cc_a0c2_1066cae6363b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.ts lines 4–161

export function migrateMissingLayers(): Plugin {
  function migrate(root: Root) {
    let lastLayer = ''
    let bucket: ChildNode[] = []
    let buckets: [layer: string, bucket: typeof bucket][] = []
    let firstLayerName: string | null = null

    root.each((node) => {
      if (node.type === 'atrule') {
        // Known Tailwind directives that should not be inside a layer.
        if (
          node.name === 'config' ||
          node.name === 'source' ||
          node.name === 'theme' ||
          node.name === 'utility' ||
          node.name === 'custom-variant' ||
          node.name === 'variant'
        ) {
          if (bucket.length > 0) {
            buckets.push([lastLayer, bucket.splice(0)])
          }
          return
        }

        // Base
        if (
          (node.name === 'tailwind' && node.params === 'base') ||
          (node.name === 'import' && node.params.match(/^["']tailwindcss\/base["']/))
        ) {
          if (bucket.length > 0) {
            buckets.push([lastLayer, bucket.splice(0)])
          }

          firstLayerName ??= 'base'
          lastLayer = 'base'
          return
        }

        // Components
        if (
          (node.name === 'tailwind' && node.params === 'components') ||
          (node.name === 'import' && node.params.match(/^["']tailwindcss\/components["']/))
        ) {
          if (bucket.length > 0) {
            buckets.push([lastLayer, bucket.splice(0)])
          }

          firstLayerName ??= 'components'
          lastLayer = 'components'
          return
        }

        // Utilities
        if (
          (node.name === 'tailwind' && node.params === 'utilities') ||
          (node.name === 'import' && node.params.match(/^["']tailwindcss\/utilities["']/))
        ) {
          if (bucket.length > 0) {
            buckets.push([lastLayer, bucket.splice(0)])
          }

          firstLayerName ??= 'utilities'
          lastLayer = 'utilities'
          return
        }

        // Already in a layer
        if (node.name === 'layer') {
          if (bucket.length > 0) {
            buckets.push([lastLayer, bucket.splice(0)])
          }
          return
        }

        // Add layer to `@import` at-rules
        if (node.name === 'import') {
          if (bucket.length > 0) {
            buckets.push([lastLayer, bucket.splice(0)])
          }

          // Create new bucket just for the import. This way every import exists

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does migrateMissingLayers() do?
migrateMissingLayers() is a function in the tailwindcss codebase, defined in packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.ts.
Where is migrateMissingLayers() defined?
migrateMissingLayers() is defined in packages/@tailwindcss-upgrade/src/codemods/css/migrate-missing-layers.ts at line 4.
What does migrateMissingLayers() call?
migrateMissingLayers() calls 1 function(s): segment.
What calls migrateMissingLayers()?
migrateMissingLayers() is called by 2 function(s): migrate, migrateContents.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free