migrateMediaScreen() — tailwindcss Function Reference

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

Function typescript CommandLineInterface Codemods calls 3 called by 2

Entity Profile

CommandLineInterface→ Codemods→ migrateMediaScreen() — tailwindcss Function Reference

Dependency Diagram

graph TD
  d291baa7_da55_af11_0910_57476f99d01c["migrateMediaScreen()"]
  7095171e_98e6_6fd0_2293_1fc8bac82300["migrate-media-screen.ts"]
  d291baa7_da55_af11_0910_57476f99d01c -->|defined in| 7095171e_98e6_6fd0_2293_1fc8bac82300
  65a804da_70aa_285d_ae64_4a33e3ecc639["migrate()"]
  65a804da_70aa_285d_ae64_4a33e3ecc639 -->|calls| d291baa7_da55_af11_0910_57476f99d01c
  1be562b7_fe23_7e22_03ec_31b3d101e5e5["migrateContents()"]
  1be562b7_fe23_7e22_03ec_31b3d101e5e5 -->|calls| d291baa7_da55_af11_0910_57476f99d01c
  bc7b25d3_d5ad_3609_d595_c9755dfadcbb["resolveConfig()"]
  d291baa7_da55_af11_0910_57476f99d01c -->|calls| bc7b25d3_d5ad_3609_d595_c9755dfadcbb
  640cb206_2935_70ce_1d58_e048d8f26773["buildMediaQuery()"]
  d291baa7_da55_af11_0910_57476f99d01c -->|calls| 640cb206_2935_70ce_1d58_e048d8f26773
  2820372c_b982_9e06_fc23_f8f4ac308d00["get()"]
  d291baa7_da55_af11_0910_57476f99d01c -->|calls| 2820372c_b982_9e06_fc23_f8f4ac308d00
  style d291baa7_da55_af11_0910_57476f99d01c 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,
  }
}