migrateAtApply() — tailwindcss Function Reference

Architecture documentation for the migrateAtApply() function in migrate-at-apply.ts from the tailwindcss codebase.

Function typescript UpgradeToolkit Codemods calls 3 called by 2

Entity Profile

UpgradeToolkit→ Codemods→ migrateAtApply() — tailwindcss Function Reference

Dependency Diagram

graph TD
  66e0bbad_4b95_c393_4a95_0a694140aecd["migrateAtApply()"]
  a6ecddee_0a56_f3dd_6fd9_8373ce255940["migrate-at-apply.ts"]
  66e0bbad_4b95_c393_4a95_0a694140aecd -->|defined in| a6ecddee_0a56_f3dd_6fd9_8373ce255940
  1e8d8a66_5ee9_35e0_1d8a_571a5f74b9c6["migrate()"]
  1e8d8a66_5ee9_35e0_1d8a_571a5f74b9c6 -->|calls| 66e0bbad_4b95_c393_4a95_0a694140aecd
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e["migrateContents()"]
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e -->|calls| 66e0bbad_4b95_c393_4a95_0a694140aecd
  046679c3_bf1c_c3e5_7a64_9181e0909da0["migrate()"]
  66e0bbad_4b95_c393_4a95_0a694140aecd -->|calls| 046679c3_bf1c_c3e5_7a64_9181e0909da0
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  66e0bbad_4b95_c393_4a95_0a694140aecd -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  8408bbf2_f1a4_0668_26f9_b4cdef678388["migrateCandidate()"]
  66e0bbad_4b95_c393_4a95_0a694140aecd -->|calls| 8408bbf2_f1a4_0668_26f9_b4cdef678388
  style 66e0bbad_4b95_c393_4a95_0a694140aecd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.ts lines 7–61

export function migrateAtApply({
  designSystem,
  userConfig,
}: {
  designSystem: DesignSystem | null
  userConfig: Config | null
}): Plugin {
  function migrate(atRule: AtRule) {
    let utilities = atRule.params.split(/(\s+)/)
    let important =
      utilities[utilities.length - 1] === '!important' ||
      utilities[utilities.length - 1] === '#{!important}' // Sass/SCSS

    if (important) utilities.pop() // Remove `!important`

    let params = utilities.map((part) => {
      // Keep whitespace
      if (part.trim() === '') return part
      let variants = segment(part, ':')
      let utility = variants.pop()!

      // Apply the important modifier to all the rules if necessary
      if (important && utility[0] !== '!' && utility[utility.length - 1] !== '!') {
        utility += '!'
      }

      // Reconstruct the utility with the variants
      return [...variants, utility].join(':')
    })

    return async () => {
      if (!designSystem) return

      // If we have a valid designSystem and config setup, we can run all
      // candidate migrations on each utility
      params = await Promise.all(
        params.map(async (param) => await migrateCandidate(designSystem, userConfig, param)),
      )

      atRule.params = params.join('').trim()
    }
  }

  return {
    postcssPlugin: '@tailwindcss/upgrade/migrate-at-apply',
    async OnceExit(root) {
      let migrations: (() => void)[] = []
      root.walkAtRules('apply', (atRule) => {
        migrations.push(migrate(atRule))
      })

      await Promise.allSettled(migrations.map((m) => m()))
    },
  }
}