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 OxideCore Extractor called by 2

Entity Profile

Dependency Diagram

graph TD
  296a215a_4fd2_3fd1_5291_2a289746b0c5["migrateVariantsDirective()"]
  d07539e7_2238_f7ed_f9de_f1fe2e0501cc["migrate()"]
  d07539e7_2238_f7ed_f9de_f1fe2e0501cc -->|calls| 296a215a_4fd2_3fd1_5291_2a289746b0c5
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb["migrateContents()"]
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb -->|calls| 296a215a_4fd2_3fd1_5291_2a289746b0c5
  style 296a215a_4fd2_3fd1_5291_2a289746b0c5 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