Migrate @media screen(…)

[RobinMalfait]

This PR adds a codemod that migrates the @media screen(…) to the properly expanded @media (…) syntax.

@media screen(md) {
  .foo {
    color: red;
  }
}

Will be converted to:

@media (width >= 48rem) {
  .foo {
    color: red;
  }
}

If you happen to have custom screens (even complex ones), the screen will be converted to a custom media query.

@media screen(foo) {
  .foo {
    color: red;
  }
}

With a custom tailwind.config.js file with a config like this:

module.exports = {
  // …
  theme: {
    screens: {
      foo: { min: '100px', max: '123px' },
    },
  }
}

Then the codemod will convert it to:

@media (123px >= width >= 100px) {
  .foo {
    color: red;
  }
}

[thecrypticace]

💪

[adamwathan]

Nice! I think this should use the theme function instead of inlining the raw value though.

[RobinMalfait]

Made some updates:

1. If we can use the theme(--breakpoint-{name}) function, then we will use that:
   

   tailwindcss/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts

   Lines 26 to 42 in 28b2c1a

   	it('should migrate a built-in breakpoint', async () => {
   	expect(
   	await migrate(css`
   	@media screen(md) {
   	.foo {
   	color: red;
   	}
   	}
   	`),
   	).toMatchInlineSnapshot(`
   	"@media (width >= theme(--breakpoint-md)) {
   	.foo {
   	color: red;
   	}
   	}"
   	`)
   	})

2. If we cannot, then we will expand the full media query.
   

   tailwindcss/packages/@tailwindcss-upgrade/src/codemods/migrate-media-screen.test.ts

   Lines 152 to 177 in 28b2c1a

   	it('should migrate a raw media query', async () => {
   	expect(
   	await migrate(
   	css`
   	@media screen(foo) {
   	.foo {
   	color: red;
   	}
   	}
   	`,
   	{
   	theme: {
   	screens: {
   	foo: { raw: 'only screen and (min-width: 123px)' },
   	},
   	},
   	},
   	),
   	).toMatchInlineSnapshot(`
   	"@media only screen and (min-width: 123px) {
   	.foo {
   	color: red;
   	}
   	}"
   	`)
   	})

Also tried with an alternative using @custom-media, but since we can't use that I reverted it. You can see the changes here: a1113f8

Made sure that we use theme(…) in the simple cases and expand to the full @media if we can't use theme(…)