Merge branch 'next' into 10-21-escape_js_theme_configuration_keys

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - _Upgrade (experimental)_: Migrate `plugins` with options to CSS ([#14700](https://github.com/tailwindlabs/tailwindcss/pull/14700))
 - _Upgrade (experimental)_: Allow JS configuration files with `corePlugins` options to be migrated to CSS ([#14742](https://github.com/tailwindlabs/tailwindcss/pull/14742))
+- _Upgrade (experimental)_: Migrate `max-w-screen-*` utilities to `max-w-[var(…)]`([#14754](https://github.com/tailwindlabs/tailwindcss/pull/14754))
 - _Upgrade (experimental)_: Migrate `@variants` and `@responsive` directives ([#14748](https://github.com/tailwindlabs/tailwindcss/pull/14748))
 - _Upgrade (experimental)_: Migrate `@screen` directive ([#14749](https://github.com/tailwindlabs/tailwindcss/pull/14749))
 
@@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `postcss` as a dependency of `@tailwindcss/postcss` ([#14750](https://github.com/tailwindlabs/tailwindcss/pull/14750))
 - Ensure the JS `theme()` function can reference CSS theme variables that contain special characters without escaping them (e.g. referencing `--width-1\/2` as `theme('width.1/2')`) ([#14739](https://github.com/tailwindlabs/tailwindcss/pull/14739))
 - Ensure JS theme keys containing special characters correctly produce utility classes (e.g. `'1/2': 50%` to `w-1/2`) ([#14739](https://github.com/tailwindlabs/tailwindcss/pull/14739))
+- Always emit keyframes registered in `addUtilities` ([#14747](https://github.com/tailwindlabs/tailwindcss/pull/14747))
 - Ensure loading stylesheets via the `?raw` and `?url` static asset query works when using the Vite plugin ([#14716](https://github.com/tailwindlabs/tailwindcss/pull/14716))
 - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
 - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))

integrations/cli/plugins.test.ts

@@ -154,6 +154,7 @@ test(
       candidate`duration-350`,
       'transition-duration: 350ms',
       'animation-duration: 350ms',
+      '@keyframes enter {',
     ])
   },
 )

integrations/upgrade/index.test.ts

@@ -20,7 +20,7 @@ test(
       `,
       'src/index.html': html`
         <h1>🤠👋</h1>
-        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red]"></div>
+        <div class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md"></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -42,7 +42,7 @@ test(
       "
       --- ./src/index.html ---
       <h1>🤠👋</h1>
-      <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)]"></div>
+      <div class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)]"></div>
 
       --- ./src/input.css ---
       @import 'tailwindcss';

packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.test.ts

@@ -0,0 +1,12 @@
+import { __unstable__loadDesignSystem } from '@tailwindcss/node'
+import { expect, test } from 'vitest'
+import { maxWidthScreen } from './max-width-screen'
+
+test('converts max-w-screen-* to max-w-[theme(screens.*)] (so it will later be converted to the var injection)', async () => {
+  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
+    base: __dirname,
+  })
+
+  let migrated = maxWidthScreen(designSystem, {}, 'max-w-screen-md')
+  expect(migrated).toMatchInlineSnapshot(`"max-w-[theme(screens.md)]"`)
+})

packages/@tailwindcss-upgrade/src/template/codemods/max-width-screen.ts

@@ -0,0 +1,26 @@
+import type { Config } from 'tailwindcss'
+import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
+import { printCandidate } from '../candidates'
+
+export function maxWidthScreen(
+  designSystem: DesignSystem,
+  _userConfig: Config,
+  rawCandidate: string,
+): string {
+  for (let candidate of designSystem.parseCandidate(rawCandidate)) {
+    if (
+      candidate.kind === 'functional' &&
+      candidate.root === 'max-w' &&
+      candidate.value?.value.startsWith('screen-')
+    ) {
+      return printCandidate(designSystem, {
+        ...candidate,
+        value: {
+          ...candidate.value,
+          value: `[theme(screens.${candidate.value.value.slice(7)})]`,
+        },
+      })
+    }
+  }
+  return rawCandidate
+}

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts

@@ -86,6 +86,9 @@ test.each([
   // `theme(…)` calls valid in v3, but not in v4 should still be converted.
   ['[--foo:theme(fontWeight.semibold)]', '[--foo:theme(fontWeight.semibold)]'],
 
+  // `screens` values
+  ['max-w-[theme(screens.md)]', 'max-w-[var(--breakpoint-md)]'],
+
   // Invalid cases
   ['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],
   ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'],

packages/@tailwindcss-upgrade/src/template/migrate.ts

@@ -7,6 +7,7 @@ import { arbitraryValueToBareValue } from './codemods/arbitrary-value-to-bare-va
 import { automaticVarInjection } from './codemods/automatic-var-injection'
 import { bgGradient } from './codemods/bg-gradient'
 import { important } from './codemods/important'
+import { maxWidthScreen } from './codemods/max-width-screen'
 import { prefix } from './codemods/prefix'
 import { simpleLegacyClasses } from './codemods/simple-legacy-classes'
 import { themeToVar } from './codemods/theme-to-var'
@@ -31,6 +32,7 @@ export const DEFAULT_MIGRATIONS: Migration[] = [
   bgGradient,
   simpleLegacyClasses,
   arbitraryValueToBareValue,
+  maxWidthScreen,
   themeToVar,
   variantOrder,
 ]

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -71,6 +71,39 @@ describe('theme', async () => {
     `)
   })
 
+  test('keyframes added via addUtilities are appended to the AST', async () => {
+    let input = css`
+      @tailwind utilities;
+      @plugin "my-plugin";
+    `
+
+    let compiler = await compile(input, {
+      loadModule: async (id, base) => {
+        return {
+          base,
+          module: plugin(function ({ addUtilities, theme }) {
+            addUtilities({
+              '@keyframes enter': {
+                from: {
+                  opacity: 'var(--tw-enter-opacity, 1)',
+                },
+              },
+            })
+          }),
+        }
+      },
+    })
+
+    expect(compiler.build([])).toMatchInlineSnapshot(`
+      "@keyframes enter {
+        from {
+          opacity: var(--tw-enter-opacity, 1);
+        }
+      }
+      "
+    `)
+  })
+
   test('plugin theme can extend colors', async () => {
     let input = css`
       @theme reference {

packages/tailwindcss/src/compat/plugin-api.ts

@@ -204,7 +204,7 @@ export function buildPluginApi(
 
       for (let [name, css] of Object.entries(utils)) {
         if (name.startsWith('@keyframes ')) {
-          designSystem.theme.addKeyframes(rule(name, objectToAst(css)))
+          ast.push(rule(name, objectToAst(css)))
           continue
         }