migrateMediaScreen() — tailwindcss Function Reference

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

Function typescript OxideCore Extractor calls 3 called by 2

Entity Profile

OxideCore→ Extractor→ migrateMediaScreen() — tailwindcss Function Reference

Dependency Diagram

graph TD
  a41317b6_1c92_4766_72af_192487644a26["migrateMediaScreen()"]
  57138d88_d90d_e321_2fb5_cca1ce215644["migrate()"]
  57138d88_d90d_e321_2fb5_cca1ce215644 -->|calls| a41317b6_1c92_4766_72af_192487644a26
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb["migrateContents()"]
  ccdccd11_44d9_ea22_dded_25c5b1cc55bb -->|calls| a41317b6_1c92_4766_72af_192487644a26
  6b5865d6_780d_1bbb_5df1_7ecca0e9b1a1["resolveConfig()"]
  a41317b6_1c92_4766_72af_192487644a26 -->|calls| 6b5865d6_780d_1bbb_5df1_7ecca0e9b1a1
  300098db_da22_646a_4d44_56445c11253e["buildMediaQuery()"]
  a41317b6_1c92_4766_72af_192487644a26 -->|calls| 300098db_da22_646a_4d44_56445c11253e
  0aa64a1c_efd8_a69d_48ed_649b7a86c854["get()"]
  a41317b6_1c92_4766_72af_192487644a26 -->|calls| 0aa64a1c_efd8_a69d_48ed_649b7a86c854
  style a41317b6_1c92_4766_72af_192487644a26 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,
  }
}