tailwindcss Architecture Docs
Home / File/ migrate-media-screen.ts — tailwindcss Source File

migrate-media-screen.ts — tailwindcss Source File

Architecture documentation for migrate-media-screen.ts, a typescript file in the tailwindcss codebase. 11 imports, 2 dependents.

File typescript CommandLineInterface Codemods 11 imports 2 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  7095171e_98e6_6fd0_2293_1fc8bac82300["migrate-media-screen.ts"]
  cad44155_17aa_e1d6_081a_8f3b4f06bcde["resolve-config.ts"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> cad44155_17aa_e1d6_081a_8f3b4f06bcde
  bc7b25d3_d5ad_3609_d595_c9755dfadcbb["resolveConfig"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> bc7b25d3_d5ad_3609_d595_c9755dfadcbb
  da5d1116_ab2a_437a_6b13_c1429fd546fa["plugin-api.ts"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> da5d1116_ab2a_437a_6b13_c1429fd546fa
  0255ffc0_a3d5_e883_5143_99660766448f["Config"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> 0255ffc0_a3d5_e883_5143_99660766448f
  4911d260_2582_cf22_b77d_7882022f79a4["screens-config.ts"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> 4911d260_2582_cf22_b77d_7882022f79a4
  640cb206_2935_70ce_1d58_e048d8f26773["buildMediaQuery"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> 640cb206_2935_70ce_1d58_e048d8f26773
  bdedd2f6_da4b_69dc_e990_0814b59fbe6e["design-system.ts"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> bdedd2f6_da4b_69dc_e990_0814b59fbe6e
  665aa4ed_d86e_30e5_80d5_cd56b8ca8b62["DesignSystem"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> 665aa4ed_d86e_30e5_80d5_cd56b8ca8b62
  28a2f72d_350c_6647_bf9d_77c69e637045["default-map.ts"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> 28a2f72d_350c_6647_bf9d_77c69e637045
  cfb4af0e_7b2d_34a1_693a_90088443cfec["DefaultMap"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> cfb4af0e_7b2d_34a1_693a_90088443cfec
  7c3c22f8_be1a_4490_9f3e_622280887fe1["postcss"]
  7095171e_98e6_6fd0_2293_1fc8bac82300 --> 7c3c22f8_be1a_4490_9f3e_622280887fe1
  ee07edaa_f575_f9a5_6581_1200f759b32c["migrate-media-screen.test.ts"]
  ee07edaa_f575_f9a5_6581_1200f759b32c --> 7095171e_98e6_6fd0_2293_1fc8bac82300
  9e542b1f_db4d_cc7b_b37d_1324d5719263["migrate.ts"]
  9e542b1f_db4d_cc7b_b37d_1324d5719263 --> 7095171e_98e6_6fd0_2293_1fc8bac82300
  style 7095171e_98e6_6fd0_2293_1fc8bac82300 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { type Plugin, type Root } from 'postcss'
import { resolveConfig } from '../../../../tailwindcss/src/compat/config/resolve-config'
import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
import { buildMediaQuery } from '../../../../tailwindcss/src/compat/screens-config'
import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'

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,
  }
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does migrate-media-screen.ts do?
migrate-media-screen.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the CommandLineInterface domain, Codemods subdomain.
What functions are defined in migrate-media-screen.ts?
migrate-media-screen.ts defines 1 function(s): migrateMediaScreen.
What does migrate-media-screen.ts depend on?
migrate-media-screen.ts imports 11 module(s): Config, DefaultMap, DesignSystem, buildMediaQuery, default-map.ts, design-system.ts, plugin-api.ts, postcss, and 3 more.
What files import migrate-media-screen.ts?
migrate-media-screen.ts is imported by 2 file(s): migrate-media-screen.test.ts, migrate.ts.
Where is migrate-media-screen.ts in the architecture?
migrate-media-screen.ts is located at packages/@tailwindcss-upgrade/src/codemods/css/migrate-media-screen.ts (domain: CommandLineInterface, subdomain: Codemods, directory: packages/@tailwindcss-upgrade/src/codemods/css).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free