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 UpgradeToolkit Codemods calls 1 called by 2

Entity Profile

Dependency Diagram

graph TD
  7bb0e1ac_e34f_8717_7c79_c91f3f7b81f2["migrateMissingLayers()"]
  22b81643_65c2_ce37_e597_13959f1f8254["migrate-missing-layers.ts"]
  7bb0e1ac_e34f_8717_7c79_c91f3f7b81f2 -->|defined in| 22b81643_65c2_ce37_e597_13959f1f8254
  357a27af_0d02_5377_1d2a_20de9a82dba1["migrate()"]
  357a27af_0d02_5377_1d2a_20de9a82dba1 -->|calls| 7bb0e1ac_e34f_8717_7c79_c91f3f7b81f2
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e["migrateContents()"]
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e -->|calls| 7bb0e1ac_e34f_8717_7c79_c91f3f7b81f2
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  7bb0e1ac_e34f_8717_7c79_c91f3f7b81f2 -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  style 7bb0e1ac_e34f_8717_7c79_c91f3f7b81f2 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