migrateMediaScreen() — tailwindcss Function Reference

Architecture documentation for the migrateMediaScreen() function in migrate-media-screen.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 3 called by 2

Entity Profile

CompilerEngine→ ModuleResolution→ migrateMediaScreen() — tailwindcss Function Reference

Dependency Diagram

graph TD
  677923aa_e54a_b77d_277a_4252209aff18["migrateMediaScreen()"]
  e693c615_04b0_46f3_b602_3e46d121fcb0["migrate()"]
  e693c615_04b0_46f3_b602_3e46d121fcb0 -->|calls| 677923aa_e54a_b77d_277a_4252209aff18
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd["migrateContents()"]
  b1aa79a5_bad0_a9e2_1c70_8e14489ee8dd -->|calls| 677923aa_e54a_b77d_277a_4252209aff18
  678b66f4_0a04_0d6e_1925_b3716614324d["resolveConfig()"]
  677923aa_e54a_b77d_277a_4252209aff18 -->|calls| 678b66f4_0a04_0d6e_1925_b3716614324d
  0a4d3b97_024a_0f55_332f_6b7b1fcd9573["buildMediaQuery()"]
  677923aa_e54a_b77d_277a_4252209aff18 -->|calls| 0a4d3b97_024a_0f55_332f_6b7b1fcd9573
  4cd99e59_ac1e_2a1f_0946_33cc1afd2532["get()"]
  677923aa_e54a_b77d_277a_4252209aff18 -->|calls| 4cd99e59_ac1e_2a1f_0946_33cc1afd2532
  style 677923aa_e54a_b77d_277a_4252209aff18 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.ts lines 8–53

export function migrateMediaScreen({
  designSystem,
  userConfig,
}: {
  designSystem?: DesignSystem | null
  userConfig?: Config | null
} = {}): Plugin {
  function migrate(root: Root) {
    if (!designSystem || !userConfig) return

    let { resolvedConfig } = resolveConfig(designSystem, [
      { base: '', config: userConfig, reference: false, src: undefined },
    ])
    let screens = resolvedConfig?.theme?.screens || {}

    let mediaQueries = new DefaultMap<string, string | null>((name) => {
      let value = designSystem?.resolveThemeValue(`--breakpoint-${name}`, true) ?? screens?.[name]
      if (typeof value === 'string') return `(width >= theme(--breakpoint-${name}))`
      return value ? buildMediaQuery(value) : null
    })

    // First migrate `@screen md` to `@media screen(md)`
    root.walkAtRules('screen', (node) => {
      node.name = 'media'
      node.params = `screen(${node.params})`
    })

    // Then migrate the `screen(…)` function
    root.walkAtRules((rule) => {
      if (rule.name !== 'media') return

      let screen = rule.params.match(/screen\(([^)]+)\)/)
      if (!screen) return

      let value = mediaQueries.get(screen[1])
      if (!value) return

      rule.params = value
    })
  }

  return {
    postcssPlugin: '@tailwindcss/upgrade/migrate-media-screen',
    OnceExit: migrate,
  }
}