migrateMediaScreen() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit Codemods calls 3 called by 2

Entity Profile

UpgradeToolkit→ Codemods→ migrateMediaScreen() — tailwindcss Function Reference

Dependency Diagram

graph TD
  5d89fc57_f2e5_f08a_f4da_b44d366475e4["migrateMediaScreen()"]
  b1548999_24c2_f98a_628a_e4dd9606794b["migrate-media-screen.ts"]
  5d89fc57_f2e5_f08a_f4da_b44d366475e4 -->|defined in| b1548999_24c2_f98a_628a_e4dd9606794b
  6681164e_d8eb_ea9a_ca1c_5d3d077cabd5["migrate()"]
  6681164e_d8eb_ea9a_ca1c_5d3d077cabd5 -->|calls| 5d89fc57_f2e5_f08a_f4da_b44d366475e4
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e["migrateContents()"]
  9ebd84f7_07bc_9b19_28a7_8bd93119c37e -->|calls| 5d89fc57_f2e5_f08a_f4da_b44d366475e4
  0ed24ba5_7c39_3f5a_fdbb_f973a617a172["resolveConfig()"]
  5d89fc57_f2e5_f08a_f4da_b44d366475e4 -->|calls| 0ed24ba5_7c39_3f5a_fdbb_f973a617a172
  f0ae2c26_da7d_2117_70b3_216a8890f916["buildMediaQuery()"]
  5d89fc57_f2e5_f08a_f4da_b44d366475e4 -->|calls| f0ae2c26_da7d_2117_70b3_216a8890f916
  5bcf4886_1230_a8ff_7302_a26cc5a9a525["get()"]
  5d89fc57_f2e5_f08a_f4da_b44d366475e4 -->|calls| 5bcf4886_1230_a8ff_7302_a26cc5a9a525
  style 5d89fc57_f2e5_f08a_f4da_b44d366475e4 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,
  }
}