Revert "alternative solution: @custom-media"

This reverts commit a1113f8.

This is way too experimental and no browser implements this feature yet.
See: https://caniuse.com/?search=custom-media

We can use lightningcss that transpiles is properly, but in environments
such as the CDN we don't have access to lightningcss.

Author: RobinMalfait

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

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<string, string | null>((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) => {