alternative solution: @custom-media

tailwindlabs · Oct 10, 2024 · 1f205f6 · 1f205f6
1 parent 3a62eb0
commit 1f205f6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts b/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts
@@ -114,7 +114,8 @@ it('should migrate a custom max-width screen', async () => {
       },
     ),
   ).toMatchInlineSnapshot(`
-    "@media (123px >= width) {
+    "@custom-media --breakpoint-foo ((123px >= width));
+    @media (--breakpoint-foo) {
       .foo {
         color: red;
       }
@@ -141,7 +142,8 @@ it('should migrate a custom min and max-width screen', async () => {
       },
     ),
   ).toMatchInlineSnapshot(`
-    "@media (123px >= width >= 100px) {
+    "@custom-media --breakpoint-foo ((123px >= width >= 100px));
+    @media (--breakpoint-foo) {
       .foo {
         color: red;
       }
@@ -168,7 +170,8 @@ it('should migrate a raw media query', async () => {
       },
     ),
   ).toMatchInlineSnapshot(`
-    "@media only screen and (min-width: 123px) {
+    "@custom-media --breakpoint-foo (only screen and (min-width: 123px));
+    @media (--breakpoint-foo) {
       .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
@@ -1,4 +1,4 @@
-import { type Plugin, type Root } from 'postcss'
+import { AtRule, 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,7 +21,16 @@ export function migrateMediaScreen({
     let mediaQueries = new DefaultMap<string, string | null>((name) => {
       let value = designSystem?.resolveThemeValue(`--breakpoint-${name}`) ?? screens?.[name]
       if (typeof value === 'string') return `(width >= theme(--breakpoint-${name}))`
-      return value ? buildMediaQuery(value) : null
+
+      if (value) {
+        let query = buildMediaQuery(value)
+        root.prepend(
+          new AtRule({ name: 'custom-media', params: `--breakpoint-${name} (${query})` }),
+        )
+        return `(--breakpoint-${name})`
+      }
+
+      return null
     })
 
     root.walkAtRules((rule) => {