Merge remote-tracking branch 'origin/next' into feat/improve-postcss-performance

Author: philipp-spiess

CHANGELOG.md

@@ -12,7 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for prefixes ([#14501](https://github.com/tailwindlabs/tailwindcss/pull/14501))
 - Expose timing information in debug mode ([#14553](https://github.com/tailwindlabs/tailwindcss/pull/14553))
 - Add support for `blocklist` in config files ([#14556](https://github.com/tailwindlabs/tailwindcss/pull/14556))
+- Add `color-scheme` utilities ([#14567](https://github.com/tailwindlabs/tailwindcss/pull/14567))
 - _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
+- _Experimental_: Migrate `@apply` utilities with the template codemods ([#14574](https://github.com/tailwindlabs/tailwindcss/pull/14574))
+- _Experimental_: Add template codemods for migrating variant order ([#14524](https://github.com/tailwindlabs/tailwindcss/pull/14524]))
 - _Experimental_: Add template codemods for migrating `bg-gradient-*` utilities to `bg-linear-*` ([#14537](https://github.com/tailwindlabs/tailwindcss/pull/14537]))
 - _Experimental_: Add template codemods for migrating prefixes ([#14557](https://github.com/tailwindlabs/tailwindcss/pull/14557]))
 - _Experimental_: Add template codemods for removal of automatic `var(…)` injection ([#14526](https://github.com/tailwindlabs/tailwindcss/pull/14526))
@@ -24,6 +27,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure that `@utility` is top-level and cannot be nested ([#14525](https://github.com/tailwindlabs/tailwindcss/pull/14525))
 - Editing imported CSS files should trigger a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561))
 - Only setup a single compiler in `@tailwindcss/postcss` for initial builds ([#14565](https://github.com/tailwindlabs/tailwindcss/pull/14565))
+- Ensure editing imported CSS files triggers a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561))
+- Ensure `@apply` and CSS functions work inside imported stylesheets ([#14576](https://github.com/tailwindlabs/tailwindcss/pull/14576))
 - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512))
 - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))
 - _Experimental_: Do not wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517))

crates/oxide/src/scanner/fixtures/binary-extensions.txt

@@ -135,6 +135,7 @@ npx
 numbers
 nupkg
 o
+oa
 odp
 ods
 odt
@@ -151,6 +152,7 @@ pdf
 pea
 pgm
 pic
+plist
 png
 pnm
 pot
@@ -200,9 +202,11 @@ sqlite
 sqlite3
 sqlite3
 stl
+storedata
 sub
 suo
 swf
+symbolsarchive
 tar
 tbz
 tbz2

integrations/upgrade/index.test.ts

@@ -69,6 +69,10 @@ test(
         @tailwind base;
         @tailwind components;
         @tailwind utilities;
+
+        .btn {
+          @apply !tw__rounded-md tw__px-2 tw__py-1 tw__bg-blue-500 tw__text-white;
+        }
       `,
     },
   },
@@ -83,7 +87,15 @@ test(
       `,
     )
 
-    await fs.expectFileToContain('src/input.css', css`@import 'tailwindcss' prefix(tw);`)
+    await fs.expectFileToContain('src/input.css', css` @import 'tailwindcss' prefix(tw); `)
+    await fs.expectFileToContain(
+      'src/input.css',
+      css`
+        .btn {
+          @apply tw:rounded-md! tw:px-2 tw:py-1 tw:bg-blue-500 tw:text-white;
+        }
+      `,
+    )
   },
 )
 

package.json

@@ -50,7 +50,7 @@
   "devDependencies": {
     "@playwright/test": "^1.47.1",
     "@types/node": "catalog:",
-    "postcss": "8.4.41",
+    "postcss": "8.4.47",
     "postcss-import": "^16.1.0",
     "prettier": "^3.3.3",
     "prettier-plugin-embed": "^0.4.15",

packages/@tailwindcss-upgrade/src/codemods/migrate-at-apply.test.ts

@@ -1,11 +1,12 @@
+import { __unstable__loadDesignSystem } from '@tailwindcss/node'
 import dedent from 'dedent'
 import postcss from 'postcss'
 import { expect, it } from 'vitest'
 import { migrateAtApply } from './migrate-at-apply'
 
 const css = dedent
 
-function migrate(input: string) {
+function migrateWithoutConfig(input: string) {
   return postcss()
     .use(migrateAtApply())
     .process(input, { from: expect.getState().testPath })
@@ -14,7 +15,7 @@ function migrate(input: string) {
 
 it('should not migrate `@apply`, when there are no issues', async () => {
   expect(
-    await migrate(css`
+    await migrateWithoutConfig(css`
       .foo {
         @apply flex flex-col items-center;
       }
@@ -28,7 +29,7 @@ it('should not migrate `@apply`, when there are no issues', async () => {
 
 it('should append `!` to each utility, when using `!important`', async () => {
   expect(
-    await migrate(css`
+    await migrateWithoutConfig(css`
       .foo {
         @apply flex flex-col !important;
       }
@@ -43,7 +44,7 @@ it('should append `!` to each utility, when using `!important`', async () => {
 // TODO: Handle SCSS syntax
 it.skip('should append `!` to each utility, when using `#{!important}`', async () => {
   expect(
-    await migrate(css`
+    await migrateWithoutConfig(css`
       .foo {
         @apply flex flex-col #{!important};
       }
@@ -57,7 +58,7 @@ it.skip('should append `!` to each utility, when using `#{!important}`', async (
 
 it('should move the legacy `!` prefix, to the new `!` postfix notation', async () => {
   expect(
-    await migrate(css`
+    await migrateWithoutConfig(css`
       .foo {
         @apply !flex flex-col! hover:!items-start items-center;
       }
@@ -68,3 +69,36 @@ it('should move the legacy `!` prefix, to the new `!` postfix notation', async (
     }"
   `)
 })
+
+it('should apply all candidate migration when migrating with a config', async () => {
+  async function migrateWithConfig(input: string) {
+    return postcss()
+      .use(
+        migrateAtApply({
+          designSystem: await __unstable__loadDesignSystem(
+            css`
+              @import 'tailwindcss' prefix(tw);
+            `,
+            { base: __dirname },
+          ),
+          userConfig: {
+            prefix: 'tw_',
+          },
+        }),
+      )
+      .process(input, { from: expect.getState().testPath })
+      .then((result) => result.css)
+  }
+
+  expect(
+    await migrateWithConfig(css`
+      .foo {
+        @apply !tw_flex [color:--my-color] tw_bg-gradient-to-t;
+      }
+    `),
+  ).toMatchInlineSnapshot(`
+    ".foo {
+      @apply tw:flex! tw:[color:var(--my-color)] tw:bg-linear-to-t;
+    }"
+  `)
+})

packages/@tailwindcss-upgrade/src/codemods/migrate-at-apply.ts

@@ -1,7 +1,13 @@
 import type { AtRule, Plugin } from 'postcss'
+import type { Config } from 'tailwindcss'
+import type { DesignSystem } from '../../../tailwindcss/src/design-system'
 import { segment } from '../../../tailwindcss/src/utils/segment'
+import { migrateCandidate } from '../template/migrate'
 
-export function migrateAtApply(): Plugin {
+export function migrateAtApply({
+  designSystem,
+  userConfig,
+}: { designSystem?: DesignSystem; userConfig?: Config } = {}): Plugin {
   function migrate(atRule: AtRule) {
     let utilities = atRule.params.split(/(\s+)/)
     let important =
@@ -30,6 +36,12 @@ export function migrateAtApply(): Plugin {
       return [...variants, utility].join(':')
     })
 
+    // If we have a valid designSystem and config setup, we can run all
+    // candidate migrations on each utility
+    if (designSystem && userConfig) {
+      params = params.map((param) => migrateCandidate(designSystem, userConfig, param))
+    }
+
     atRule.params = params.join('').trim()
   }
 

packages/@tailwindcss-upgrade/src/index.ts

@@ -112,7 +112,11 @@ async function run() {
     // Migrate each file
     await Promise.allSettled(
       files.map((file) =>
-        migrateStylesheet(file, { newPrefix: parsedConfig?.newPrefix ?? undefined }),
+        migrateStylesheet(file, {
+          newPrefix: parsedConfig?.newPrefix ?? undefined,
+          designSystem: parsedConfig?.designSystem,
+          userConfig: parsedConfig?.userConfig,
+        }),
       ),
     )
 

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

@@ -1,6 +1,8 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import postcss from 'postcss'
+import type { Config } from 'tailwindcss'
+import type { DesignSystem } from '../../tailwindcss/src/design-system'
 import { formatNodes } from './codemods/format-nodes'
 import { migrateAtApply } from './codemods/migrate-at-apply'
 import { migrateAtLayerUtilities } from './codemods/migrate-at-layer-utilities'
@@ -9,11 +11,13 @@ import { migrateTailwindDirectives } from './codemods/migrate-tailwind-directive
 
 export interface MigrateOptions {
   newPrefix?: string
+  designSystem?: DesignSystem
+  userConfig?: Config
 }
 
 export async function migrateContents(contents: string, options: MigrateOptions, file?: string) {
   return postcss()
-    .use(migrateAtApply())
+    .use(migrateAtApply(options))
     .use(migrateAtLayerUtilities())
     .use(migrateMissingLayers())
     .use(migrateTailwindDirectives(options))

packages/@tailwindcss-upgrade/src/template/codemods/variant-order.test.ts

@@ -0,0 +1,89 @@
+import { __unstable__loadDesignSystem } from '@tailwindcss/node'
+import dedent from 'dedent'
+import { expect, test } from 'vitest'
+import { variantOrder } from './variant-order'
+
+let css = dedent
+
+test.each([
+  // Does nothing unless there are at least two variants
+  ['flex', 'flex'],
+  ['hover:flex', 'hover:flex'],
+  ['[color:red]', '[color:red]'],
+  ['[&:focus]:[color:red]', '[&:focus]:[color:red]'],
+
+  // Reorders simple variants that include combinators
+  ['*:first:flex', 'first:*:flex'],
+
+  // Does not reorder variants without combinators
+  ['data-[invalid]:data-[hover]:flex', 'data-[invalid]:data-[hover]:flex'],
+
+  // Does not reorder some known combinations where the order does not matter
+  ['hover:focus:flex', 'hover:focus:flex'],
+  ['focus:hover:flex', 'focus:hover:flex'],
+  ['[&:hover]:[&:focus]:flex', '[&:hover]:[&:focus]:flex'],
+  ['[&:focus]:[&:hover]:flex', '[&:focus]:[&:hover]:flex'],
+  ['data-[a]:data-[b]:flex', 'data-[a]:data-[b]:flex'],
+
+  // Handles pseudo-elements that cannot have anything after them
+  // c.f. https://github.com/tailwindlabs/tailwindcss/pull/13478/files#diff-7779a0eebf6b980dd3abd63b39729b3023cf9a31c91594f5a25ea020b066e1c0
+  ['dark:before:flex', 'dark:before:flex'],
+  ['before:dark:flex', 'dark:before:flex'],
+
+  // Puts some pseudo-elements that must appear at the end of the selector at
+  // the end of the candidate
+  ['dark:*:before:after:flex', 'dark:*:before:after:flex'],
+  ['dark:before:after:*:flex', 'dark:*:before:after:flex'],
+
+  // Some pseudo-elements are treated as regular variants
+  ['dark:*:hover:file:focus:underline', 'dark:focus:file:hover:*:underline'],
+
+  // Keeps at-rule-variants and the dark variant in the beginning and keeps their
+  // order
+  ['sm:dark:hover:flex', 'sm:dark:hover:flex'],
+  ['[@media(print)]:group-hover:flex', '[@media(print)]:group-hover:flex'],
+  ['sm:max-xl:data-[a]:data-[b]:dark:hover:flex', 'sm:max-xl:dark:data-[a]:data-[b]:hover:flex'],
+  [
+    'sm:data-[root]:*:data-[a]:even:*:data-[b]:even:before:underline',
+    'sm:even:data-[b]:*:even:data-[a]:*:data-[root]:before:underline',
+  ],
+  ['hover:[@supports(display:grid)]:flex', '[@supports(display:grid)]:hover:flex'],
+])('%s => %s', async (candidate, result) => {
+  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
+    base: __dirname,
+  })
+
+  expect(variantOrder(designSystem, {}, candidate)).toEqual(result)
+})
+
+test('it works with custom variants', async () => {
+  let designSystem = await __unstable__loadDesignSystem(
+    css`
+      @import 'tailwindcss';
+      @variant atrule {
+        @media (print) {
+          @slot;
+        }
+      }
+
+      @variant combinator {
+        > * {
+          @slot;
+        }
+      }
+
+      @variant pseudo {
+        &::before {
+          @slot;
+        }
+      }
+    `,
+    {
+      base: __dirname,
+    },
+  )
+
+  expect(variantOrder(designSystem, {}, 'combinator:pseudo:atrule:underline')).toEqual(
+    'atrule:combinator:pseudo:underline',
+  )
+})