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

migrateVariantsDirective() — tailwindcss Function Reference

Architecture documentation for the migrateVariantsDirective() function in migrate-variants-directive.ts from the tailwindcss codebase.

Function typescript RustCore MachineExtractor called by 2

Entity Profile

Dependency Diagram

graph TD
  7d6792f7_5502_3830_e013_3fc18ce0e216["migrateVariantsDirective()"]
  74fc48f6_df85_86ac_e006_45cc2fe2ccca["migrate()"]
  74fc48f6_df85_86ac_e006_45cc2fe2ccca -->|calls| 7d6792f7_5502_3830_e013_3fc18ce0e216
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd["migrateContents()"]
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd -->|calls| 7d6792f7_5502_3830_e013_3fc18ce0e216
  style 7d6792f7_5502_3830_e013_3fc18ce0e216 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-variants-directive.ts lines 3–35

export function migrateVariantsDirective(): Plugin {
  function migrate(root: Root) {
    root.walkAtRules('variants', (node) => {
      // Migrate `@variants` to `@utility` because `@variants` make the classes
      // an actual utility.
      // ```css
      // @variants hover {
      //   .foo {}
      // }
      // ```
      //
      // Means that you can do this in your HTML:
      // ```html
      // <div class="focus:foo"></div>
      // ```
      //
      // Notice the `focus:`, even though we _only_ configured the `hover`
      // variant.
      //
      // This means that we can convert it to an `@layer utilities` rule. Later,
      // this will get converted to an `@utility` rule.
      if (node.name === 'variants') {
        node.name = 'layer'
        node.params = 'utilities'
      }
    })
  }

  return {
    postcssPlugin: '@tailwindcss/upgrade/migrate-variants-directive',
    OnceExit: migrate,
  }
}

Domain

Subdomains

Called By

Source

Frequently Asked Questions

What does migrateVariantsDirective() do?
migrateVariantsDirective() is a function in the tailwindcss codebase.
What calls migrateVariantsDirective()?
migrateVariantsDirective() 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