diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts index 8ec4ea4d4722..b7370d4d1953 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts @@ -114,8 +114,7 @@ it('should migrate a custom max-width screen', async () => { }, ), ).toMatchInlineSnapshot(` - "@custom-media --breakpoint-foo ((123px >= width)); - @media (--breakpoint-foo) { + "@media (123px >= width) { .foo { color: red; } @@ -142,8 +141,7 @@ it('should migrate a custom min and max-width screen', async () => { }, ), ).toMatchInlineSnapshot(` - "@custom-media --breakpoint-foo ((123px >= width >= 100px)); - @media (--breakpoint-foo) { + "@media (123px >= width >= 100px) { .foo { color: red; } @@ -170,8 +168,7 @@ it('should migrate a raw media query', async () => { }, ), ).toMatchInlineSnapshot(` - "@custom-media --breakpoint-foo (only screen and (min-width: 123px)); - @media (--breakpoint-foo) { + "@media only screen and (min-width: 123px) { .foo { color: red; } diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts index 87460fa9a010..d8343984a890 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.ts @@ -1,4 +1,4 @@ -import { AtRule, type Plugin, type Root } from 'postcss' +import { type Plugin, type Root } from 'postcss' import type { Config } from 'tailwindcss' import { resolveConfig } from '../../../tailwindcss/src/compat/config/resolve-config' import { buildMediaQuery } from '../../../tailwindcss/src/compat/screens-config' @@ -21,16 +21,7 @@ export function migrateMediaScreen({ let mediaQueries = new DefaultMap((name) => { let value = designSystem?.resolveThemeValue(`--breakpoint-${name}`) ?? screens?.[name] if (typeof value === 'string') return `(width >= theme(--breakpoint-${name}))` - - if (value) { - let query = buildMediaQuery(value) - root.prepend( - new AtRule({ name: 'custom-media', params: `--breakpoint-${name} (${query})` }), - ) - return `(--breakpoint-${name})` - } - - return null + return value ? buildMediaQuery(value) : null }) root.walkAtRules((rule) => {