From 2228a57a9e6a5519f390da3f3a323a2cdfd5312f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 18 Mar 2026 15:57:52 +0100 Subject: [PATCH 01/17] Bump Lightning CSS (#19771) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR bumps Lightning CSS. The `node/index.js` file in the package changed, so we had to update the patched version of it as well. We also had to update the patches for `@parcel/watcher` and `lightningcss` now that they ship with `detect-libc@2`. Unfortunately, we still require the patches because we also need to take the `process.env.PLATFORM_LIBC` into account. Another issue is that bun needs to be able to statically analyze the `require(…)` calls, so using the nice `parts.push` approach doesn't really work here. # Test plan 1. Existing tests should pass 2. Updated some tests to reflect the changes in the generated CSS based on the version bump. [ci-all] --- package.json | 4 +- packages/tailwindcss/src/utilities.test.ts | 320 +++++++++--------- packages/tailwindcss/src/variants.test.ts | 26 +- patches/@parcel__watcher@2.5.1.patch | 29 +- ...1.31.1.patch => lightningcss@1.32.0.patch} | 52 ++- pnpm-lock.yaml | 215 +++--------- pnpm-workspace.yaml | 16 +- 7 files changed, 274 insertions(+), 388 deletions(-) rename patches/{lightningcss@1.31.1.patch => lightningcss@1.32.0.patch} (58%) diff --git a/package.json b/package.json index e1e310c69..c06e7c606 100644 --- a/package.json +++ b/package.json @@ -63,8 +63,8 @@ "packageManager": "pnpm@9.6.0", "pnpm": { "patchedDependencies": { - "lightningcss@1.31.1": "patches/lightningcss@1.31.1.patch", - "@parcel/watcher@2.5.1": "patches/@parcel__watcher@2.5.1.patch" + "@parcel/watcher@2.5.1": "patches/@parcel__watcher@2.5.1.patch", + "lightningcss@1.32.0": "patches/lightningcss@1.32.0.patch" } } } diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e562cd3be..4e4f1feee 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -5776,27 +5776,27 @@ test('rotate-x', async () => { .-rotate-x-\\(--var\\) { --tw-rotate-x: rotateX(calc(var(--var) * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .-rotate-x-45 { --tw-rotate-x: rotateX(calc(45deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-x-\\(--var\\) { --tw-rotate-x: rotateX(var(--var)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-x-45 { --tw-rotate-x: rotateX(45deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-x-\\[123deg\\] { --tw-rotate-x: rotateX(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } @property --tw-rotate-x { @@ -5862,32 +5862,32 @@ test('rotate-y', async () => { .-rotate-y-\\(--var\\) { --tw-rotate-y: rotateY(calc(var(--var) * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .-rotate-y-45 { --tw-rotate-y: rotateY(calc(45deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .-rotate-y-\\[123deg\\] { --tw-rotate-y: rotateY(calc(123deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-y-\\(--var\\) { --tw-rotate-y: rotateY(var(--var)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-y-45 { --tw-rotate-y: rotateY(45deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-y-\\[123deg\\] { --tw-rotate-y: rotateY(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } @property --tw-rotate-x { @@ -5953,32 +5953,32 @@ test('rotate-z', async () => { .-rotate-z-\\(--var\\) { --tw-rotate-z: rotateZ(calc(var(--var) * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .-rotate-z-45 { --tw-rotate-z: rotateZ(calc(45deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .-rotate-z-\\[123deg\\] { --tw-rotate-z: rotateZ(calc(123deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-z-\\(--var\\) { --tw-rotate-z: rotateZ(var(--var)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-z-45 { --tw-rotate-z: rotateZ(45deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .rotate-z-\\[123deg\\] { --tw-rotate-z: rotateZ(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } @property --tw-rotate-x { @@ -6036,19 +6036,19 @@ test('skew', async () => { .-skew-6 { --tw-skew-x: skewX(calc(6deg * -1)); --tw-skew-y: skewY(calc(6deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .skew-6 { --tw-skew-x: skewX(6deg); --tw-skew-y: skewY(6deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .skew-\\[123deg\\] { --tw-skew-x: skewX(123deg); --tw-skew-y: skewY(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } @property --tw-rotate-x { @@ -6104,17 +6104,17 @@ test('skew-x', async () => { .-skew-x-6 { --tw-skew-x: skewX(calc(6deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .skew-x-6 { --tw-skew-x: skewX(6deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .skew-x-\\[123deg\\] { --tw-skew-x: skewX(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } @property --tw-rotate-x { @@ -6170,17 +6170,17 @@ test('skew-y', async () => { .-skew-y-6 { --tw-skew-y: skewY(calc(6deg * -1)); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .skew-y-6 { --tw-skew-y: skewY(6deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .skew-y-\\[123deg\\] { --tw-skew-y: skewY(123deg); - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } @property --tw-rotate-x { @@ -6563,19 +6563,19 @@ test('transform', async () => { } .transform { - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] { - transform: scaleZ(2)rotateY(45deg); + transform: scaleZ(2) rotateY(45deg); } .transform-cpu { - transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .transform-gpu { - transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); + transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .transform-none { @@ -7087,32 +7087,32 @@ test('touch-pan', async () => { .touch-pan-left { --tw-pan-x: pan-left; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } .touch-pan-right { --tw-pan-x: pan-right; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } .touch-pan-x { --tw-pan-x: pan-x; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } .touch-pan-down { --tw-pan-y: pan-down; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } .touch-pan-up { --tw-pan-y: pan-up; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } .touch-pan-y { --tw-pan-y: pan-y; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } @property --tw-pan-x { @@ -7162,7 +7162,7 @@ test('touch-pinch-zoom', async () => { .touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; - touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); + touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, ); } @property --tw-pan-x { @@ -23050,73 +23050,73 @@ test('filter', async () => { .blur-\\[4px\\] { --tw-blur: blur(4px); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .blur-none { --tw-blur: ; - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .blur-xl { --tw-blur: blur(var(--blur-xl)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .brightness-50 { --tw-brightness: brightness(50%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .brightness-\\[1\\.23\\] { --tw-brightness: brightness(1.23); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .contrast-50 { --tw-contrast: contrast(50%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .contrast-\\[1\\.23\\] { --tw-contrast: contrast(1.23); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow\\/25 { --tw-drop-shadow-alpha: 25%; --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25))); --tw-drop-shadow: drop-shadow(var(--drop-shadow)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow { --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)); --tw-drop-shadow: drop-shadow(var(--drop-shadow)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow-\\[0_0_red\\] { --tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, red)); --tw-drop-shadow: var(--tw-drop-shadow-size); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow-multi { --tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d)) drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a)); --tw-drop-shadow: drop-shadow(0 1px 1px #0000000d) drop-shadow(0 9px 7px #0000001a); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow-xl { --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a)); --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow-none { --tw-drop-shadow: ; - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .drop-shadow-inherit { @@ -23154,91 +23154,91 @@ test('filter', async () => { .grayscale { --tw-grayscale: grayscale(100%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .grayscale-0 { --tw-grayscale: grayscale(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .grayscale-\\[var\\(--value\\)\\] { --tw-grayscale: grayscale(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .-hue-rotate-15 { --tw-hue-rotate: hue-rotate(calc(15deg * -1)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .-hue-rotate-\\[45deg\\] { --tw-hue-rotate: hue-rotate(calc(45deg * -1)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .hue-rotate-15 { --tw-hue-rotate: hue-rotate(15deg); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .hue-rotate-\\[45deg\\] { --tw-hue-rotate: hue-rotate(45deg); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .invert { --tw-invert: invert(100%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .invert-0 { --tw-invert: invert(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .invert-\\[var\\(--value\\)\\] { --tw-invert: invert(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .saturate-0 { --tw-saturate: saturate(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .saturate-\\[1\\.75\\] { --tw-saturate: saturate(1.75); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .saturate-\\[var\\(--value\\)\\] { --tw-saturate: saturate(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .sepia { --tw-sepia: sepia(100%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .sepia-0 { --tw-sepia: sepia(0%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .sepia-\\[50\\%\\] { --tw-sepia: sepia(50%); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .sepia-\\[var\\(--value\\)\\] { --tw-sepia: sepia(var(--value)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .filter { - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .filter-\\[var\\(--value\\)\\] { @@ -23431,7 +23431,7 @@ test('filter', async () => { .blur-none { --tw-blur: blur(var(--blur-none)); - filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); + filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } @property --tw-blur { @@ -23570,187 +23570,187 @@ test('backdrop-filter', async () => { .backdrop-blur-\\[4px\\] { --tw-backdrop-blur: blur(4px); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-none { --tw-backdrop-blur: ; - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-brightness-\\[1\\.23\\] { --tw-backdrop-brightness: brightness(1.23); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-contrast-50 { --tw-backdrop-contrast: contrast(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-contrast-\\[1\\.23\\] { --tw-backdrop-contrast: contrast(1.23); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-grayscale-0 { --tw-backdrop-grayscale: grayscale(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-grayscale-\\[var\\(--value\\)\\] { --tw-backdrop-grayscale: grayscale(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .-backdrop-hue-rotate-15 { --tw-backdrop-hue-rotate: hue-rotate(calc(15deg * -1)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .-backdrop-hue-rotate-\\[45deg\\] { --tw-backdrop-hue-rotate: hue-rotate(calc(45deg * -1)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-hue-rotate-15 { --tw-backdrop-hue-rotate: hue-rotate(15deg); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-hue-rotate-\\[45deg\\] { --tw-backdrop-hue-rotate: hue-rotate(45deg); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-invert { --tw-backdrop-invert: invert(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-invert-0 { --tw-backdrop-invert: invert(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-invert-\\[var\\(--value\\)\\] { --tw-backdrop-invert: invert(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-opacity-1\\.25 { --tw-backdrop-opacity: opacity(1.25%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-opacity-2\\.5 { --tw-backdrop-opacity: opacity(2.5%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-opacity-3\\.75 { --tw-backdrop-opacity: opacity(3.75%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-opacity-50 { --tw-backdrop-opacity: opacity(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-opacity-71 { --tw-backdrop-opacity: opacity(71%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-opacity-\\[0\\.5\\] { --tw-backdrop-opacity: opacity(.5); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-saturate-0 { --tw-backdrop-saturate: saturate(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-saturate-\\[1\\.75\\] { --tw-backdrop-saturate: saturate(1.75); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-saturate-\\[var\\(--value\\)\\] { --tw-backdrop-saturate: saturate(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-sepia-0 { --tw-backdrop-sepia: sepia(0%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-sepia-\\[50\\%\\] { --tw-backdrop-sepia: sepia(50%); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-sepia-\\[var\\(--value\\)\\] { --tw-backdrop-sepia: sepia(var(--value)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-filter-\\[var\\(--value\\)\\] { @@ -23914,8 +23914,8 @@ test('backdrop-filter', async () => { .backdrop-blur-none { --tw-backdrop-blur: blur(var(--backdrop-blur-none)); - -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); - backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); + backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } @property --tw-backdrop-blur { @@ -24382,27 +24382,27 @@ test('contain', async () => { .contain-inline-size { --tw-contain-size: inline-size; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } .contain-layout { --tw-contain-layout: layout; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } .contain-paint { --tw-contain-paint: paint; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } .contain-size { --tw-contain-size: size; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } .contain-style { --tw-contain-style: style; - contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); + contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, ); } .contain-\\[unset\\] { @@ -24730,42 +24730,42 @@ test('font-variant-numeric', async () => { .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .lining-nums { --tw-numeric-figure: lining-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .oldstyle-nums { --tw-numeric-figure: oldstyle-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .ordinal { --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .proportional-nums { --tw-numeric-spacing: proportional-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .slashed-zero { --tw-slashed-zero: slashed-zero; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .stacked-fractions { --tw-numeric-fraction: stacked-fractions; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); + font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .normal-nums { @@ -27137,37 +27137,37 @@ test('ring', async () => { } .ring { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-0 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-1 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-2 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-4 { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-\\[12px\\] { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(12px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-\\[length\\:var\\(--my-width\\)\\] { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--my-width) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @@ -27461,7 +27461,7 @@ test('ring', async () => { } .ring { - --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } @@ -28031,32 +28031,32 @@ test('ring-offset', async () => { .ring-offset-0 { --tw-ring-offset-width: 0px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-1 { --tw-ring-offset-width: 1px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-2 { --tw-ring-offset-width: 2px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-4 { --tw-ring-offset-width: 4px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-\\[12px\\] { --tw-ring-offset-width: 12px; - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-\\[length\\:var\\(--my-width\\)\\] { --tw-ring-offset-width: var(--my-width); - --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); } .ring-offset-\\[\\#0088cc\\] { diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index a2540e698..d69847bb2 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -313,7 +313,11 @@ test('placeholder-shown', async () => { test('autofill', async () => { expect(await run(['autofill:flex', 'group-autofill:flex', 'peer-autofill:flex'])) .toMatchInlineSnapshot(` - ".group-autofill\\:flex:is(:where(.group):autofill *), .peer-autofill\\:flex:is(:where(.peer):autofill ~ *), .autofill\\:flex:autofill { + ".group-autofill\\:flex:is(:where(.group):autofill *), .peer-autofill\\:flex:is(:where(.peer):autofill ~ *) { + display: flex; + } + + .autofill\\:flex:autofill { display: flex; }" `) @@ -1475,7 +1479,15 @@ test('not', async () => { ], ), ).toMatchInlineSnapshot(` - ".not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown), .not-autofill\\:flex:not(:autofill), .not-optional\\:flex:not(:optional), .not-required\\:flex:not(:required), .not-valid\\:flex:not(:valid), .not-invalid\\:flex:not(:invalid), .not-in-range\\:flex:not(:in-range), .not-out-of-range\\:flex:not(:out-of-range), .not-read-only\\:flex:not(:read-only), .not-empty\\:flex:not(:empty), .not-focus-within\\:flex:not(:focus-within), .not-hover\\:flex:not(:hover) { + ".not-first\\:flex:not(:first-child), .not-last\\:flex:not(:last-child), .not-only\\:flex:not(:only-child), .not-odd\\:flex:not(:nth-child(odd)), .not-even\\:flex:not(:nth-child(2n)), .not-first-of-type\\:flex:not(:first-of-type), .not-last-of-type\\:flex:not(:last-of-type), .not-only-of-type\\:flex:not(:only-of-type), .not-visited\\:flex:not(:visited), .not-target\\:flex:not(:target), .not-open\\:flex:not(:is([open], :popover-open, :open)), .not-default\\:flex:not(:default), .not-checked\\:flex:not(:checked), .not-indeterminate\\:flex:not(:indeterminate), .not-placeholder-shown\\:flex:not(:placeholder-shown) { + display: flex; + } + + .not-autofill\\:flex:not(:autofill) { + display: flex; + } + + .not-optional\\:flex:not(:optional), .not-required\\:flex:not(:required), .not-valid\\:flex:not(:valid), .not-invalid\\:flex:not(:invalid), .not-in-range\\:flex:not(:in-range), .not-out-of-range\\:flex:not(:out-of-range), .not-read-only\\:flex:not(:read-only), .not-empty\\:flex:not(:empty), .not-focus-within\\:flex:not(:focus-within), .not-hover\\:flex:not(:hover) { display: flex; } @@ -2383,7 +2395,15 @@ test('variant order', async () => { display: flex; } - .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open, :open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown, .autofill\\:flex:autofill, .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within { + .first\\:flex:first-child, .last\\:flex:last-child, .only\\:flex:only-child, .odd\\:flex:nth-child(odd), .even\\:flex:nth-child(2n), .first-of-type\\:flex:first-of-type, .last-of-type\\:flex:last-of-type, .only-of-type\\:flex:only-of-type, .visited\\:flex:visited, .target\\:flex:target, .open\\:flex:is([open], :popover-open, :open), .default\\:flex:default, .checked\\:flex:checked, .indeterminate\\:flex:indeterminate, .placeholder-shown\\:flex:placeholder-shown { + display: flex; + } + + .autofill\\:flex:autofill { + display: flex; + } + + .optional\\:flex:optional, .required\\:flex:required, .valid\\:flex:valid, .invalid\\:flex:invalid, .in-range\\:flex:in-range, .out-of-range\\:flex:out-of-range, .read-only\\:flex:read-only, .empty\\:flex:empty, .focus-within\\:flex:focus-within { display: flex; } diff --git a/patches/@parcel__watcher@2.5.1.patch b/patches/@parcel__watcher@2.5.1.patch index ed9fa9040..9060d212c 100644 --- a/patches/@parcel__watcher@2.5.1.patch +++ b/patches/@parcel__watcher@2.5.1.patch @@ -1,10 +1,9 @@ diff --git a/index.js b/index.js -index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..398af238a439912d150b3573367873d2a9a311e3 100644 +index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..f28fd092644ccfb8aff2618b966cb5219a181a02 100644 --- a/index.js +++ b/index.js -@@ -1,41 +1,34 @@ --const {createWrapper} = require('./wrapper'); -+const { createWrapper } = require('./wrapper') +@@ -1,40 +1,32 @@ + const {createWrapper} = require('./wrapper'); -let name = `@parcel/watcher-${process.platform}-${process.arch}`; -if (process.platform === 'linux') { @@ -15,6 +14,8 @@ index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..398af238a439912d150b3573367873d2 - name += '-glibc'; - } -} ++// We need to take the `process.env.PLATFORM_LIBC` into account, and we also ++// need static analysis, so we can't make use of the `parts.push(…)` approach. +function loadPackage() { + if (process.platform === 'linux') { + if (process.env.PLATFORM_LIBC === "musl") { @@ -22,7 +23,8 @@ index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..398af238a439912d150b3573367873d2 + } else if (process.env.PLATFORM_LIBC === "glibc") { + return require(`@parcel/watcher-${process.platform}-${process.arch}-glibc`) + } else { -+ let { MUSL, GLIBC, family, familySync } = require('detect-libc') ++ let { MUSL, GLIBC, familySync } = require('detect-libc') ++ let family = familySync() -let binding; -try { @@ -41,10 +43,6 @@ index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..398af238a439912d150b3573367873d2 - } - } -} -+ // Bun polyfills `detect-libc` in compiled binaries. We rely on -+ // detect-libc@1.0.3 but the polyfilled version is 2.x. In detect-libc@2x -+ // there is a `familySync` function that we can use instead. -+ if (typeof familySync === 'function') family = familySync() -function handleError(err) { - if (err?.code !== 'MODULE_NOT_FOUND') { @@ -63,12 +61,7 @@ index 8afb2b1126dcc687b7ff9b631589da252c1f9c22..398af238a439912d150b3573367873d2 } -const wrapper = createWrapper(binding); --exports.writeSnapshot = wrapper.writeSnapshot; --exports.getEventsSince = wrapper.getEventsSince; --exports.subscribe = wrapper.subscribe; --exports.unsubscribe = wrapper.unsubscribe; -+const wrapper = createWrapper(loadPackage()) -+exports.writeSnapshot = wrapper.writeSnapshot -+exports.getEventsSince = wrapper.getEventsSince -+exports.subscribe = wrapper.subscribe -+exports.unsubscribe = wrapper.unsubscribe ++const wrapper = createWrapper(loadPackage()); + exports.writeSnapshot = wrapper.writeSnapshot; + exports.getEventsSince = wrapper.getEventsSince; + exports.subscribe = wrapper.subscribe; diff --git a/patches/lightningcss@1.31.1.patch b/patches/lightningcss@1.32.0.patch similarity index 58% rename from patches/lightningcss@1.31.1.patch rename to patches/lightningcss@1.32.0.patch index 204f06ab3..e70be2315 100644 --- a/patches/lightningcss@1.31.1.patch +++ b/patches/lightningcss@1.32.0.patch @@ -1,8 +1,8 @@ diff --git a/node/index.js b/node/index.js -index 011d04b450687083e7a0ec9023c41ee79104831c..ef26db49d98c60b5b31f3601f6ad045f0b0e8f4f 100644 +index 6fe25aef457aa5448f9ee6204da1e253f5534800..742be0229b94450b631b6e069ffc372d2b35df47 100644 --- a/node/index.js +++ b/node/index.js -@@ -1,28 +1,41 @@ +@@ -1,25 +1,40 @@ -let parts = [process.platform, process.arch]; -if (process.platform === 'linux') { - const { MUSL, familySync } = require('detect-libc'); @@ -11,12 +11,8 @@ index 011d04b450687083e7a0ec9023c41ee79104831c..ef26db49d98c60b5b31f3601f6ad045f - parts.push('musl'); - } else if (process.arch === 'arm') { - parts.push('gnueabihf'); -- } else { -- parts.push('gnu'); -- } --} else if (process.platform === 'win32') { -- parts.push('msvc'); --} ++// We need to take the `process.env.PLATFORM_LIBC` into account, and we also ++// need static analysis, so we can't make use of the `parts.push(…)` approach. +function loadPackage() { + if (process.platform === 'linux') { + if (process.env.PLATFORM_LIBC === 'musl') { @@ -28,19 +24,8 @@ index 011d04b450687083e7a0ec9023c41ee79104831c..ef26db49d98c60b5b31f3601f6ad045f + return require(`lightningcss-${process.platform}-${process.arch}-gnu`) + } + } else { -+ let { MUSL, GLIBC, family, familySync } = require('detect-libc') - --if (process.env.CSS_TRANSFORMER_WASM) { -- module.exports = require(`../pkg`); --} else { -- try { -- module.exports = require(`lightningcss-${parts.join('-')}`); -- } catch (err) { -- module.exports = require(`../lightningcss.${parts.join('-')}.node`); -+ // Bun polyfills `detect-libc` in compiled binaries. We rely on -+ // detect-libc@1.0.3 but the polyfilled version is 2.x. In detect-libc@2x -+ // there is a `familySync` function that we can use instead. -+ if (typeof familySync === 'function') family = familySync() ++ let { MUSL, GLIBC, familySync } = require('detect-libc') ++ let family = familySync() + + if (family === MUSL) { + return require(`lightningcss-${process.platform}-${process.arch}-musl`) @@ -56,15 +41,22 @@ index 011d04b450687083e7a0ec9023c41ee79104831c..ef26db49d98c60b5b31f3601f6ad045f + } + } else if (process.platform === 'win32') { + return require(`lightningcss-${process.platform}-${process.arch}-msvc`) -+ } else { + } else { +- parts.push('gnu'); + return require(`lightningcss-${process.platform}-${process.arch}`) } +-} else if (process.platform === 'win32') { +- parts.push('msvc'); } - --module.exports.browserslistToTargets = require('./browserslistToTargets'); --module.exports.composeVisitors = require('./composeVisitors'); --module.exports.Features = require('./flags').Features; -+module.exports = loadPackage() -+module.exports.browserslistToTargets = require('./browserslistToTargets') -+module.exports.composeVisitors = require('./composeVisitors') -+module.exports.Features = require('./flags').Features + +-let native; +-try { +- native = require(`lightningcss-${parts.join('-')}`); +-} catch (err) { +- native = require(`../lightningcss.${parts.join('-')}.node`); +-} + ++let native = loadPackage(); + module.exports.transform = wrap(native.transform); + module.exports.transformStyleAttribute = wrap(native.transformStyleAttribute); + module.exports.bundle = wrap(native.bundle); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f06d2d0ee..ef88e3b9d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,29 +10,29 @@ catalogs: specifier: ^20.19.0 version: 20.19.1 lightningcss: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-darwin-arm64: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-darwin-x64: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-linux-arm64-gnu: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-linux-arm64-musl: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-linux-x64-gnu: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-linux-x64-musl: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 lightningcss-win32-x64-msvc: - specifier: 1.31.1 - version: 1.31.1 + specifier: 1.32.0 + version: 1.32.0 prettier: specifier: 3.8.1 version: 3.8.1 @@ -45,11 +45,11 @@ catalogs: patchedDependencies: '@parcel/watcher@2.5.1': - hash: zs2vvlrje3h42xp5ed2v44fep4 + hash: p6xahr7zs4c5qsorj3exeppxhm path: patches/@parcel__watcher@2.5.1.patch - lightningcss@1.31.1: - hash: tzyxy3asfxcqc7ihrooumyi5fm - path: patches/lightningcss@1.31.1.patch + lightningcss@1.32.0: + hash: mz3chiqe2jbihxa25xumd4ogum + path: patches/lightningcss@1.32.0.patch importers: @@ -87,7 +87,7 @@ importers: version: 5.5.4 vitest: specifier: ^4.0.18 - version: 4.0.18(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0) + version: 4.0.18(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0) crates/node: optionalDependencies: @@ -211,7 +211,7 @@ importers: dependencies: '@parcel/watcher': specifier: ^2.5.1 - version: 2.5.1(patch_hash=zs2vvlrje3h42xp5ed2v44fep4) + version: 2.5.1(patch_hash=p6xahr7zs4c5qsorj3exeppxhm) '@tailwindcss/node': specifier: workspace:* version: link:../@tailwindcss-node @@ -244,7 +244,7 @@ importers: version: 2.6.1 lightningcss: specifier: 'catalog:' - version: 1.31.1(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm) + version: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum) magic-string: specifier: ^0.30.21 version: 0.30.21 @@ -342,25 +342,25 @@ importers: version: 1.3.9 lightningcss-darwin-arm64: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 lightningcss-darwin-x64: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 lightningcss-linux-arm64-gnu: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 lightningcss-linux-arm64-musl: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 lightningcss-linux-x64-gnu: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 lightningcss-linux-x64-musl: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 lightningcss-win32-x64-msvc: specifier: 'catalog:' - version: 1.31.1 + version: 1.32.0 packages/@tailwindcss-upgrade: dependencies: @@ -482,7 +482,7 @@ importers: version: 1.7.1 lightningcss: specifier: 'catalog:' - version: 1.31.1(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm) + version: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum) magic-string: specifier: ^0.30.21 version: 0.30.21 @@ -3813,135 +3813,65 @@ packages: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} - lightningcss-android-arm64@1.31.1: - resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [android] - lightningcss-android-arm64@1.32.0: resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [android] - lightningcss-darwin-arm64@1.31.1: - resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==} - engines: {node: '>= 12.0.0'} - os: [darwin] - lightningcss-darwin-arm64@1.32.0: resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==} engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [darwin] - - lightningcss-darwin-x64@1.31.1: - resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==} - engines: {node: '>= 12.0.0'} os: [darwin] lightningcss-darwin-x64@1.32.0: resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==} engines: {node: '>= 12.0.0'} - cpu: [x64] os: [darwin] - lightningcss-freebsd-x64@1.31.1: - resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==} - engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [freebsd] - lightningcss-freebsd-x64@1.32.0: resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [freebsd] - lightningcss-linux-arm-gnueabihf@1.31.1: - resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==} - engines: {node: '>= 12.0.0'} - cpu: [arm] - os: [linux] - lightningcss-linux-arm-gnueabihf@1.32.0: resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==} engines: {node: '>= 12.0.0'} cpu: [arm] os: [linux] - lightningcss-linux-arm64-gnu@1.31.1: - resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==} - engines: {node: '>= 12.0.0'} - os: [linux] - lightningcss-linux-arm64-gnu@1.32.0: resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==} engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [linux] - - lightningcss-linux-arm64-musl@1.31.1: - resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==} - engines: {node: '>= 12.0.0'} os: [linux] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [linux] - - lightningcss-linux-x64-gnu@1.31.1: - resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==} - engines: {node: '>= 12.0.0'} os: [linux] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} - cpu: [x64] - os: [linux] - - lightningcss-linux-x64-musl@1.31.1: - resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==} - engines: {node: '>= 12.0.0'} os: [linux] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} - cpu: [x64] os: [linux] - lightningcss-win32-arm64-msvc@1.31.1: - resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==} - engines: {node: '>= 12.0.0'} - cpu: [arm64] - os: [win32] - lightningcss-win32-arm64-msvc@1.32.0: resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [win32] - lightningcss-win32-x64-msvc@1.31.1: - resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==} - engines: {node: '>= 12.0.0'} - os: [win32] - lightningcss-win32-x64-msvc@1.32.0: resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==} engines: {node: '>= 12.0.0'} - cpu: [x64] os: [win32] - lightningcss@1.31.1: - resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==} - engines: {node: '>= 12.0.0'} - lightningcss@1.32.0: resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==} engines: {node: '>= 12.0.0'} @@ -6419,7 +6349,7 @@ snapshots: '@parcel/watcher-win32-ia32': 2.5.0 '@parcel/watcher-win32-x64': 2.5.0 - '@parcel/watcher@2.5.1(patch_hash=zs2vvlrje3h42xp5ed2v44fep4)': + '@parcel/watcher@2.5.1(patch_hash=p6xahr7zs4c5qsorj3exeppxhm)': dependencies: detect-libc: 1.0.3 is-glob: 4.0.3 @@ -6766,13 +6696,13 @@ snapshots: chai: 6.2.1 tinyrainbow: 3.0.3 - '@vitest/mocker@4.0.18(vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0))': + '@vitest/mocker@4.0.18(vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0))': dependencies: '@vitest/spy': 4.0.18 estree-walker: 3.0.3 magic-string: 0.30.21 optionalDependencies: - vite: 7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0) + vite: 7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0) '@vitest/pretty-format@4.0.18': dependencies: @@ -8242,82 +8172,33 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 - lightningcss-android-arm64@1.31.1: - optional: true - lightningcss-android-arm64@1.32.0: optional: true - lightningcss-darwin-arm64@1.31.1: {} + lightningcss-darwin-arm64@1.32.0: {} - lightningcss-darwin-arm64@1.32.0: - optional: true - - lightningcss-darwin-x64@1.31.1: {} - - lightningcss-darwin-x64@1.32.0: - optional: true - - lightningcss-freebsd-x64@1.31.1: - optional: true + lightningcss-darwin-x64@1.32.0: {} lightningcss-freebsd-x64@1.32.0: optional: true - lightningcss-linux-arm-gnueabihf@1.31.1: - optional: true - lightningcss-linux-arm-gnueabihf@1.32.0: optional: true - lightningcss-linux-arm64-gnu@1.31.1: {} + lightningcss-linux-arm64-gnu@1.32.0: {} - lightningcss-linux-arm64-gnu@1.32.0: - optional: true + lightningcss-linux-arm64-musl@1.32.0: {} - lightningcss-linux-arm64-musl@1.31.1: {} + lightningcss-linux-x64-gnu@1.32.0: {} - lightningcss-linux-arm64-musl@1.32.0: - optional: true - - lightningcss-linux-x64-gnu@1.31.1: {} - - lightningcss-linux-x64-gnu@1.32.0: - optional: true - - lightningcss-linux-x64-musl@1.31.1: {} - - lightningcss-linux-x64-musl@1.32.0: - optional: true - - lightningcss-win32-arm64-msvc@1.31.1: - optional: true + lightningcss-linux-x64-musl@1.32.0: {} lightningcss-win32-arm64-msvc@1.32.0: optional: true - lightningcss-win32-x64-msvc@1.31.1: {} + lightningcss-win32-x64-msvc@1.32.0: {} - lightningcss-win32-x64-msvc@1.32.0: - optional: true - - lightningcss@1.31.1(patch_hash=tzyxy3asfxcqc7ihrooumyi5fm): - dependencies: - detect-libc: 2.1.2 - optionalDependencies: - lightningcss-android-arm64: 1.31.1 - lightningcss-darwin-arm64: 1.31.1 - lightningcss-darwin-x64: 1.31.1 - lightningcss-freebsd-x64: 1.31.1 - lightningcss-linux-arm-gnueabihf: 1.31.1 - lightningcss-linux-arm64-gnu: 1.31.1 - lightningcss-linux-arm64-musl: 1.31.1 - lightningcss-linux-x64-gnu: 1.31.1 - lightningcss-linux-x64-musl: 1.31.1 - lightningcss-win32-arm64-msvc: 1.31.1 - lightningcss-win32-x64-msvc: 1.31.1 - - lightningcss@1.32.0: + lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum): dependencies: detect-libc: 2.1.2 optionalDependencies: @@ -9408,7 +9289,7 @@ snapshots: util-deprecate@1.0.2: {} - vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0): + vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0): dependencies: esbuild: 0.25.0 fdir: 6.5.0(picomatch@4.0.3) @@ -9420,7 +9301,7 @@ snapshots: '@types/node': 20.19.1 fsevents: 2.3.3 jiti: 2.6.1 - lightningcss: 1.32.0 + lightningcss: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum) terser: 5.31.6 tsx: 4.19.1 yaml: 2.6.0 @@ -9428,7 +9309,7 @@ snapshots: vite@8.0.0(@types/node@20.19.1)(esbuild@0.27.0)(jiti@2.6.1)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0): dependencies: '@oxc-project/runtime': 0.115.0 - lightningcss: 1.32.0 + lightningcss: 1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum) picomatch: 4.0.3 postcss: 8.5.8 rolldown: 1.0.0-rc.9 @@ -9442,10 +9323,10 @@ snapshots: tsx: 4.19.1 yaml: 2.6.0 - vitest@4.0.18(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0): + vitest@4.0.18(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0): dependencies: '@vitest/expect': 4.0.18 - '@vitest/mocker': 4.0.18(vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)) + '@vitest/mocker': 4.0.18(vite@7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0)) '@vitest/pretty-format': 4.0.18 '@vitest/runner': 4.0.18 '@vitest/snapshot': 4.0.18 @@ -9462,7 +9343,7 @@ snapshots: tinyexec: 1.0.2 tinyglobby: 0.2.15 tinyrainbow: 3.0.3 - vite: 7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0) + vite: 7.0.0(@types/node@20.19.1)(jiti@2.6.1)(lightningcss@1.32.0(patch_hash=mz3chiqe2jbihxa25xumd4ogum))(terser@5.31.6)(tsx@4.19.1)(yaml@2.6.0) why-is-node-running: 2.3.0 optionalDependencies: '@types/node': 20.19.1 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 1c63d92fa..3f6cb5d7f 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -10,11 +10,11 @@ catalog: prettier: 3.8.1 vite: ^8.0.0 webpack: ^5 - lightningcss: 1.31.1 - lightningcss-darwin-arm64: 1.31.1 - lightningcss-darwin-x64: 1.31.1 - lightningcss-linux-arm64-gnu: 1.31.1 - lightningcss-linux-arm64-musl: 1.31.1 - lightningcss-linux-x64-gnu: 1.31.1 - lightningcss-linux-x64-musl: 1.31.1 - lightningcss-win32-x64-msvc: 1.31.1 + lightningcss: 1.32.0 + lightningcss-darwin-arm64: 1.32.0 + lightningcss-darwin-x64: 1.32.0 + lightningcss-linux-arm64-gnu: 1.32.0 + lightningcss-linux-arm64-musl: 1.32.0 + lightningcss-linux-x64-gnu: 1.32.0 + lightningcss-linux-x64-musl: 1.32.0 + lightningcss-win32-x64-msvc: 1.32.0 From d596b0c43d36ad5099c983930fb155e089cbc291 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 18 Mar 2026 16:44:08 +0100 Subject: [PATCH 02/17] 4.2.2 (#19821) --- CHANGELOG.md | 11 +++++++---- crates/node/npm/android-arm-eabi/package.json | 2 +- crates/node/npm/android-arm64/package.json | 2 +- crates/node/npm/darwin-arm64/package.json | 2 +- crates/node/npm/darwin-x64/package.json | 2 +- crates/node/npm/freebsd-x64/package.json | 2 +- crates/node/npm/linux-arm-gnueabihf/package.json | 2 +- crates/node/npm/linux-arm64-gnu/package.json | 2 +- crates/node/npm/linux-arm64-musl/package.json | 2 +- crates/node/npm/linux-x64-gnu/package.json | 2 +- crates/node/npm/linux-x64-musl/package.json | 2 +- crates/node/npm/wasm32-wasi/package.json | 2 +- crates/node/npm/win32-arm64-msvc/package.json | 2 +- crates/node/npm/win32-x64-msvc/package.json | 2 +- crates/node/package.json | 2 +- packages/@tailwindcss-browser/package.json | 2 +- packages/@tailwindcss-cli/package.json | 2 +- packages/@tailwindcss-node/package.json | 2 +- packages/@tailwindcss-postcss/package.json | 2 +- packages/@tailwindcss-standalone/package.json | 2 +- packages/@tailwindcss-upgrade/package.json | 2 +- packages/@tailwindcss-vite/package.json | 2 +- packages/@tailwindcss-webpack/package.json | 2 +- packages/tailwindcss/package.json | 2 +- 24 files changed, 30 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4008c059c..c9c103bc6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,15 +11,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) +## [4.2.2] - 2026-03-18 + ### Fixed -- Guard object lookups against inherited prototype properties ([#19725](https://github.com/tailwindlabs/tailwindcss/pull/19725)) +- Don't crash when candidates contain prototype properties like `row-constructor` ([#19725](https://github.com/tailwindlabs/tailwindcss/pull/19725)) - Canonicalize `calc(var(--spacing)*…)` expressions into `--spacing(…)` ([#19769](https://github.com/tailwindlabs/tailwindcss/pull/19769)) -- Fix crash in canonicalization step when handling utilities with empty property maps ([#19727](https://github.com/tailwindlabs/tailwindcss/pull/19727)) +- Fix crash in canonicalization step when handling utilities containing `@property` at-rules (e.g. `shadow-sm border`) ([#19727](https://github.com/tailwindlabs/tailwindcss/pull/19727)) - Skip full reload for server only modules scanned by client CSS when using `@tailwindcss/vite` ([#19745](https://github.com/tailwindlabs/tailwindcss/pull/19745)) - Add support for Vite 8 in `@tailwindcss/vite` ([#19790](https://github.com/tailwindlabs/tailwindcss/pull/19790)) - Improve canonicalization for bare values exceeding default spacing scale suggestions (e.g. `w-1234 h-1234` → `size-1234`) ([#19809](https://github.com/tailwindlabs/tailwindcss/pull/19809)) -- Fix canonicalization resulting in empty list (e.g. `w-5 h-5 size-5` → `` instead of `size-5`) ([#19812](https://github.com/tailwindlabs/tailwindcss/pull/19812)) +- Fix canonicalization resulting in empty list (e.g. `w-5 h-5 size-5` → `''` instead of `size-5`) ([#19812](https://github.com/tailwindlabs/tailwindcss/pull/19812)) ## [4.2.1] - 2026-02-23 @@ -3958,7 +3960,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.1...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.2...HEAD +[4.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.1...v4.2.2 [4.2.1]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.0...v4.2.1 [4.2.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.18...v4.2.0 [4.1.18]: https://github.com/tailwindlabs/tailwindcss/compare/v4.1.17...v4.1.18 diff --git a/crates/node/npm/android-arm-eabi/package.json b/crates/node/npm/android-arm-eabi/package.json index 34a1c58a5..d087f75c3 100644 --- a/crates/node/npm/android-arm-eabi/package.json +++ b/crates/node/npm/android-arm-eabi/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-android-arm-eabi", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/android-arm64/package.json b/crates/node/npm/android-arm64/package.json index 909ddf914..014c9e308 100644 --- a/crates/node/npm/android-arm64/package.json +++ b/crates/node/npm/android-arm64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-android-arm64", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/darwin-arm64/package.json b/crates/node/npm/darwin-arm64/package.json index bfeb71630..e0b5e0bfd 100644 --- a/crates/node/npm/darwin-arm64/package.json +++ b/crates/node/npm/darwin-arm64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-darwin-arm64", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/darwin-x64/package.json b/crates/node/npm/darwin-x64/package.json index bf4bfe652..d13fabfff 100644 --- a/crates/node/npm/darwin-x64/package.json +++ b/crates/node/npm/darwin-x64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-darwin-x64", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/freebsd-x64/package.json b/crates/node/npm/freebsd-x64/package.json index 0619de4ad..dc9b3b102 100644 --- a/crates/node/npm/freebsd-x64/package.json +++ b/crates/node/npm/freebsd-x64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-freebsd-x64", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm-gnueabihf/package.json b/crates/node/npm/linux-arm-gnueabihf/package.json index cd818b2aa..22b890a65 100644 --- a/crates/node/npm/linux-arm-gnueabihf/package.json +++ b/crates/node/npm/linux-arm-gnueabihf/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm-gnueabihf", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm64-gnu/package.json b/crates/node/npm/linux-arm64-gnu/package.json index 9dd325f38..b8d4676d8 100644 --- a/crates/node/npm/linux-arm64-gnu/package.json +++ b/crates/node/npm/linux-arm64-gnu/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm64-gnu", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm64-musl/package.json b/crates/node/npm/linux-arm64-musl/package.json index 991a9c210..16fe2dd70 100644 --- a/crates/node/npm/linux-arm64-musl/package.json +++ b/crates/node/npm/linux-arm64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm64-musl", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-x64-gnu/package.json b/crates/node/npm/linux-x64-gnu/package.json index 847484f1d..864db19ff 100644 --- a/crates/node/npm/linux-x64-gnu/package.json +++ b/crates/node/npm/linux-x64-gnu/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-x64-gnu", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-x64-musl/package.json b/crates/node/npm/linux-x64-musl/package.json index 66acddc12..9ff4f1714 100644 --- a/crates/node/npm/linux-x64-musl/package.json +++ b/crates/node/npm/linux-x64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-x64-musl", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/wasm32-wasi/package.json b/crates/node/npm/wasm32-wasi/package.json index 25807493d..fafb106ce 100644 --- a/crates/node/npm/wasm32-wasi/package.json +++ b/crates/node/npm/wasm32-wasi/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-wasm32-wasi", - "version": "4.2.1", + "version": "4.2.2", "cpu": [ "wasm32" ], diff --git a/crates/node/npm/win32-arm64-msvc/package.json b/crates/node/npm/win32-arm64-msvc/package.json index 2dca490b5..edb84aeca 100644 --- a/crates/node/npm/win32-arm64-msvc/package.json +++ b/crates/node/npm/win32-arm64-msvc/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-win32-arm64-msvc", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/win32-x64-msvc/package.json b/crates/node/npm/win32-x64-msvc/package.json index ddcf18026..fcb93d429 100644 --- a/crates/node/npm/win32-x64-msvc/package.json +++ b/crates/node/npm/win32-x64-msvc/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-win32-x64-msvc", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/package.json b/crates/node/package.json index f16920029..346d3e66c 100644 --- a/crates/node/package.json +++ b/crates/node/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide", - "version": "4.2.1", + "version": "4.2.2", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json index 12442e87e..a5a7287e7 100644 --- a/packages/@tailwindcss-browser/package.json +++ b/packages/@tailwindcss-browser/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/browser", - "version": "4.2.1", + "version": "4.2.2", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "./dist/index.global.js", diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 2a91542f1..01e7b28d7 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/packages/@tailwindcss-cli/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/cli", - "version": "4.2.1", + "version": "4.2.2", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json index c4d7d4873..a8763e934 100644 --- a/packages/@tailwindcss-node/package.json +++ b/packages/@tailwindcss-node/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/node", - "version": "4.2.1", + "version": "4.2.2", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index 6052a08b0..922857a90 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/postcss", - "version": "4.2.1", + "version": "4.2.2", "description": "PostCSS plugin for Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-standalone/package.json b/packages/@tailwindcss-standalone/package.json index b25d5bb9e..4372188d2 100644 --- a/packages/@tailwindcss-standalone/package.json +++ b/packages/@tailwindcss-standalone/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/standalone", - "version": "4.2.1", + "version": "4.2.2", "private": true, "description": "Standalone CLI for Tailwind CSS", "license": "MIT", diff --git a/packages/@tailwindcss-upgrade/package.json b/packages/@tailwindcss-upgrade/package.json index a30f6b158..8f6bbb127 100644 --- a/packages/@tailwindcss-upgrade/package.json +++ b/packages/@tailwindcss-upgrade/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/upgrade", - "version": "4.2.1", + "version": "4.2.2", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index df53e93ea..4c3e3cc6c 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/vite", - "version": "4.2.1", + "version": "4.2.2", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-webpack/package.json b/packages/@tailwindcss-webpack/package.json index ed9206a9e..8388c82f0 100644 --- a/packages/@tailwindcss-webpack/package.json +++ b/packages/@tailwindcss-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/webpack", - "version": "4.2.1", + "version": "4.2.2", "description": "A webpack loader for Tailwind CSS v4.", "license": "MIT", "repository": { diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index f98c80152..6d6c67c7f 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "4.2.1", + "version": "4.2.2", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { From 7482d47a54072159b17f1884b1f803f3e53ce02d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 19 Mar 2026 19:53:16 +0100 Subject: [PATCH 03/17] Add canonicalizations for `tracking-*` utilities (#19827) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds support for canonicalizations for `tracking-*` utilities. This one is a bit of a funny one, if you take a look at the linked issue, there is a beautiful table: | Utility Name | Value | Arbitrary Value | Throws Suggestion | | - | -: | - | - | | tracking-tighter | -0.05em | tracking-[-0.05em] | ✗ | | tracking-tight | -0.025em | tracking-[-0.025em] | ✗ | | tracking-normal | 0em | tracking-[0em] | ✗ | | tracking-wide | 0.025em | tracking-[0.025em] | ✗ | | tracking-wider | 0.05em | tracking-[0.05em] | ✗ | | tracking-widest | 0.1em | tracking-[0.1em] | ✓ | It doesn't really make sense to _why_ only the `tracking-widest` one is properly suggested here. Until you look a little bit closer. Turns out that `-tracking-tighter` is equivalent to `tracking-wider`, `-tracking-tight` is equivalent to `tracking-wide` and so on. The way the canonicalization works internally is by generating a signature for a given utility class. If two utilities have the exact same signature, we can consider them the same. In this case `tracking-widest` and `tracking-[0.1em]` have the same signature. One of the rules we have internally is that if we find more than one replacement utility then we don't really know what to do, so we bail. Because if you get `foo` or `bar`, which one do you pick? If we refer to this above table again, the moment we want to canonicalize the `tracking-[-0.05em]` we get two suggestions: `tracking-tighter` and `-tracking-wider`, since we don't know what to do, we bail and we don't suggest anything. So the reason that `tracking-widest` _was_ suggested is just because we don't have a `-tracking-tightest`. How do we fix this? Well, since we have `tracking-*` and `-tracking-*` utilities, I wanted to deprecate the `-tracking-*` ones for named utilities (where the values come from your theme) because that doesn't really make sense. However, we have this exact pattern documented here: https://tailwindcss.com/docs/letter-spacing#using-negative-values Which means that I can't just deprecate those utilities. image Instead, I added a different rule which says that if you get multiple possible replacements, then we prefer the "positive" one, the one without the `-`. Also added some additional checks to make sure that if you get `foo`, `-bar`, `baz`, that we also bail because we know that we should prefer `foo` or `baz` over `-bar`, but we don't know if we should pick `foo` or `baz`... This additional rule does solve the original issue, and we already prefer possible values over negative values in other places (related to bare values). Fixes: https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1558 ## Test plan 1. Existing tests pass 2. Added regression tests to make sure that the table from above _does_ get canonicalized correctly into the expected values. --- CHANGELOG.md | 4 ++ .../src/canonicalize-candidates.test.ts | 34 +++++++++++ .../src/canonicalize-candidates.ts | 56 +++++++++++++++---- 3 files changed, 84 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9c103bc6..3b639aed9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) +### Fixed + +- Improve canonicalizations for `tracking-*` utilities ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) + ## [4.2.2] - 2026-03-18 ### Fixed diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index 4b6ecbfd6..fef9eee08 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -1120,6 +1120,40 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', await expectCombinedCanonicalization(input, candidates.trim(), expected) }) }) + + // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1558 + test.each([ + ['tracking-[-0.05em]', 'tracking-tighter'], + ['tracking-[-0.025em]', 'tracking-tight'], + ['tracking-[0em]', 'tracking-normal'], + ['tracking-[0.025em]', 'tracking-wide'], + ['tracking-[0.05em]', 'tracking-wider'], + ['tracking-[0.1em]', 'tracking-widest'], + + // Negative values that don't make sense + // See: https://tailwindcss.com/docs/letter-spacing#using-negative-values + ['-tracking-tighter', 'tracking-wider'], + ['-tracking-tight', 'tracking-wide'], + ['-tracking-normal', 'tracking-normal'], + ['-tracking-wide', 'tracking-tight'], + ['-tracking-wider', 'tracking-tighter'], + ])(testName, { timeout }, async (candidate, expected) => { + await expectCanonicalization( + css` + @import 'tailwindcss'; + @theme { + --tracking-tighter: -0.05em; + --tracking-tight: -0.025em; + --tracking-normal: 0em; + --tracking-wide: 0.025em; + --tracking-wider: 0.05em; + --tracking-widest: 0.1em; + } + `, + candidate, + expected, + ) + }) }) describe('theme to var', () => { diff --git a/packages/tailwindcss/src/canonicalize-candidates.ts b/packages/tailwindcss/src/canonicalize-candidates.ts index 566b4a3f7..eaa055b25 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.ts @@ -1128,11 +1128,29 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO // Find a corresponding utility for the same signature let replacements = utilities.get(targetSignature) - // Multiple utilities can map to the same signature. Not sure how to migrate - // this one so let's just skip it for now. - // - // TODO: Do we just migrate to the first one? - if (replacements.length > 1) return + // Multiple utilities can map to the same signature. + if (replacements.length > 1) { + // Prefer positive values over negative values + let maybeReplacement: string | undefined = undefined + for (let replacement of replacements) { + if (replacement[0] === '-') continue // Skip negative values + + // If multiple non-negative replacements exists then we are unsure + // what to do, so let's bail. + if (maybeReplacement) return + + // Consider this replacement + maybeReplacement = replacement + } + + if (maybeReplacement) { + for (let replacementCandidate of parseCandidate(designSystem, maybeReplacement)) { + yield replacementCandidate + } + } + + return + } // If we didn't find any replacement utilities, let's try to strip the // modifier and find a replacement then. If we do, we can try to re-add the @@ -1353,11 +1371,29 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO // Find a corresponding utility for the same signature let replacements = utilities.get(targetSignature) - // Multiple utilities can map to the same signature. Not sure how to migrate - // this one so let's just skip it for now. - // - // TODO: Do we just migrate to the first one? - if (replacements.length > 1) return + // Multiple utilities can map to the same signature. + if (replacements.length > 1) { + // Prefer positive values over negative values + let maybeReplacement: string | undefined = undefined + for (let replacement of replacements) { + if (replacement[0] === '-') continue // Skip negative values + + // If multiple non-negative replacements exists then we are unsure + // what to do, so let's bail. + if (maybeReplacement) return + + // Consider this replacement + maybeReplacement = replacement + } + + if (maybeReplacement) { + for (let replacementCandidate of parseCandidate(designSystem, maybeReplacement)) { + yield replacementCandidate + } + } + + return + } // If we didn't find any replacement utilities, let's try to strip the // modifier and find a replacement then. If we do, we can try to re-add the From bd30a716e640550748f7029506f3758e9da4aecb Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 20 Mar 2026 14:51:37 +0100 Subject: [PATCH 04/17] Fix crash due to invalid characters in candidate (#19829) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR fixes an issue where the compiler can crash if it encounters an invalid codepoint. When we extract potential candidates from files, it could be that we encounter values that look like a class or a CSS variable, if it turns out that it's an invalid CSS variable we can ignore it. The problem is that sometimes there are escaped values in there that result in invalid code points crashing the compiler. This PR fixes that by gracefully handling that and making sure that invalid code points are replaced by `\uFFFD` as per the spec. The bug report (https://github.com/tailwindlabs/tailwindcss/issues/19786) has a clean example where a piece of text looks like a CSS variable, but contains invalid code points. ``` --Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924 ``` Luckily we can fix this today by ignoring the file paths that contain these strings using `@source not "…";`, but the better way is to actually fix this. To solve this, instead of blindly passing numbers to `String.fromCodePoint`, we will first validate whether it's a valid codepoint: 1. `0x0000` — `0x10FFFF` (inclusive) is the range of valid code points. See: https://infra.spec.whatwg.org/#code-point 2. `0xD800` — `0xDBFF` (inclusive) are leading surrogates. See: https://infra.spec.whatwg.org/#leading-surrogate 3. `0xDC00` — `0xDFFF` (inclusive) are trailing surrogates. See: https://infra.spec.whatwg.org/#trailing-surrogate In the code we use the `0xD800` — `0xDFFF` range because the ranges overlap. There are various references in the spec to replace surrogates (and invalid codepoints) with `\uFFFD`. Here is one of them: https://drafts.csswg.org/css-syntax-3/#consume-escaped-code-point Fixes: https://github.com/tailwindlabs/tailwindcss/issues/19786 Fixes: #19801 (this issue talks about a similar invalid code point issue) ## Test plan 1. Added a regression test where the above string was used as a CSS variable 2. Added a regression test for the unescape functionality to make sure that invalid code points and surrogates are replaced by the `\uFFFD` replacement character. [ci-all] Just to verify on Windows as well --- CHANGELOG.md | 1 + packages/tailwindcss/src/index.test.ts | 8 +++++++ packages/tailwindcss/src/utils/escape.test.ts | 10 +++++++++ packages/tailwindcss/src/utils/escape.ts | 22 ++++++++++++++++--- 4 files changed, 38 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b639aed9..39e89832b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Improve canonicalizations for `tracking-*` utilities ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) +- Fix crash due to invalid characters in candidate ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 5eb7407d8..bf1c72c42 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -1501,6 +1501,14 @@ describe('Parsing theme values from CSS', () => { `) }) + // https://github.com/tailwindlabs/tailwindcss/issues/19786 + test('out-of-range escaped CSS variable candidates do not crash the build', async () => { + // Shouldn't crash + await run([ + String.raw`--Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924`, + ]) + }) + test('`@keyframes` in `@theme` are hoisted', async () => { expect( await compileCss( diff --git a/packages/tailwindcss/src/utils/escape.test.ts b/packages/tailwindcss/src/utils/escape.test.ts index ff7715b9d..f4c8e1192 100644 --- a/packages/tailwindcss/src/utils/escape.test.ts +++ b/packages/tailwindcss/src/utils/escape.test.ts @@ -11,4 +11,14 @@ describe('unescape', () => { test('removes backslashes', () => { expect(unescape(String.raw`red-1\/2`)).toMatchInlineSnapshot(`"red-1/2"`) }) + + test('replaces out-of-range escaped code points', () => { + expect( + unescape( + String.raw`--Coding-Projects-CharacterMapper-Master-Workspace\d8819554-4725-4235-9d22-2d0ed572e924`, + ), + ).toMatchInlineSnapshot( + `"--Coding-Projects-CharacterMapper-Master-Workspace�54-4725-4235-9d22-2d0ed572e924"`, + ) + }) }) diff --git a/packages/tailwindcss/src/utils/escape.ts b/packages/tailwindcss/src/utils/escape.ts index cbcfa62a0..c430e4ad4 100644 --- a/packages/tailwindcss/src/utils/escape.ts +++ b/packages/tailwindcss/src/utils/escape.ts @@ -74,8 +74,24 @@ export function escape(value: string) { export function unescape(escaped: string) { return escaped.replace(/\\([\dA-Fa-f]{1,6}[\t\n\f\r ]?|[\S\s])/g, (match) => { - return match.length > 2 - ? String.fromCodePoint(Number.parseInt(match.slice(1).trim(), 16)) - : match[1] + if (match.length <= 2) { + return match[1] + } + + let codePoint = Number.parseInt(match.slice(1).trim(), 16) + + if ( + // Invalid codepoint: https://infra.spec.whatwg.org/#code-point + codePoint === 0x0000 || + codePoint > 0x10ffff || + // Is surrogate: https://infra.spec.whatwg.org/#leading-surrogate + // - A leading surrogate is a code point that is in the range U+D800 to U+DBFF, inclusive. + // - A trailing surrogate is a code point that is in the range U+DC00 to U+DFFF, inclusive. + (codePoint >= 0xd800 && codePoint <= 0xdfff) + ) { + return '\uFFFD' + } + + return String.fromCodePoint(codePoint) }) } From 5cb1efdf416a6d37012d31cc1306c41cb35bbdc1 Mon Sep 17 00:00:00 2001 From: Amir Zarrinkafsh <3339418+nightah@users.noreply.github.com> Date: Sat, 21 Mar 2026 02:19:18 +1100 Subject: [PATCH 05/17] fix(vite): resolve tsconfig paths in CSS and JS resolvers (#19803) Change `aliasOnly` from `true` to `false` when calling Vite's resolver so that the full resolution pipeline runs, including the oxc resolver responsible for tsconfig path resolution. When `aliasOnly` was `true`, only the @rollup/plugin-alias plugin ran, which meant `resolve.tsconfigPaths: true` had no effect on CSS `@import` or JS `@plugin` resolution in `@tailwindcss/vite`. Closes #19802. --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + integrations/vite/resolvers.test.ts | 165 +++++++++++++++++++++++- packages/@tailwindcss-vite/src/index.ts | 16 ++- 3 files changed, 177 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39e89832b..bafb6c744 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add support for Vite 8 in `@tailwindcss/vite` ([#19790](https://github.com/tailwindlabs/tailwindcss/pull/19790)) - Improve canonicalization for bare values exceeding default spacing scale suggestions (e.g. `w-1234 h-1234` → `size-1234`) ([#19809](https://github.com/tailwindlabs/tailwindcss/pull/19809)) - Fix canonicalization resulting in empty list (e.g. `w-5 h-5 size-5` → `''` instead of `size-5`) ([#19812](https://github.com/tailwindlabs/tailwindcss/pull/19812)) +- Resolve tsconfig paths to allow for `@import '@/path/to/file';` when using `@tailwindcss/vite` ([#19803](https://github.com/tailwindlabs/tailwindcss/pull/19803)) ## [4.2.1] - 2026-02-23 diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts index f8e389a7e..79ce57553 100644 --- a/integrations/vite/resolvers.test.ts +++ b/integrations/vite/resolvers.test.ts @@ -1,5 +1,168 @@ import { describe } from 'vitest' -import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils' +import { + candidate, + css, + fetchStyles, + html, + js, + json, + retryAssertion, + test, + ts, + txt, +} from '../utils' + +test( + 'resolves tsconfig paths in production build', + { + fs: { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "^8" + } + } + `, + 'tsconfig.json': json` + { + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } + } + `, + 'vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + build: { cssMinify: false }, + plugins: [tailwindcss()], + resolve: { + tsconfigPaths: true, + }, + }) + `, + 'index.html': html` + + + + +
Hello, world!
+ + `, + 'src/index.css': css` + @import '@/styles/base.css'; + @plugin '@/plugin.js'; + `, + 'src/styles/base.css': css` + @reference 'tailwindcss/theme'; + @import 'tailwindcss/utilities'; + `, + 'src/plugin.js': js` + export default function ({ addUtilities }) { + addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } }) + } + `, + }, + }, + async ({ fs, exec, expect }) => { + await exec('pnpm vite build') + + let files = await fs.glob('dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] + + await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`]) + }, +) + +test( + 'resolves tsconfig paths in dev mode', + { + fs: { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "^8" + } + } + `, + 'tsconfig.json': json` + { + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } + } + `, + 'vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + build: { cssMinify: false }, + plugins: [tailwindcss()], + resolve: { + tsconfigPaths: true, + }, + }) + `, + 'index.html': html` + + + + +
Hello, world!
+ + `, + 'src/index.css': css` + @import '@/styles/base.css'; + @plugin '@/plugin.js'; + `, + 'src/styles/base.css': css` + @reference 'tailwindcss/theme'; + @import 'tailwindcss/utilities'; + `, + 'src/plugin.js': js` + export default function ({ addUtilities }) { + addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } }) + } + `, + }, + }, + async ({ spawn, expect }) => { + let process = await spawn('pnpm vite dev') + await process.onStdout((m) => m.includes('ready in')) + + let url = '' + await process.onStdout((m) => { + let match = /Local:\s*(http.*)\//.exec(m) + if (match) url = match[1] + return Boolean(url) + }) + + await retryAssertion(async () => { + let styles = await fetchStyles(url, '/index.html') + expect(styles).toContain(candidate`underline`) + expect(styles).toContain(candidate`custom-underline`) + }) + }, +) describe.each(['postcss', 'lightningcss'])('%s', (transformer) => { test( diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index cd0249680..ac3e1c33c 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -62,8 +62,12 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { let jsResolver = config!.createResolver(config!.resolve) - customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR) - customJsResolver = (id: string, base: string) => jsResolver(id, base, true, isSSR) + customCssResolver = async (id: string, base: string) => { + let resolved = await cssResolver(id, base, false, isSSR) + if (resolved && !resolved.endsWith('.css')) return undefined + return resolved + } + customJsResolver = (id: string, base: string) => jsResolver(id, base, false, isSSR) } else { type ResolveIdFn = ( environment: Environment, @@ -105,8 +109,12 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { let jsResolver = createBackCompatIdResolver(env.config, env.config.resolve) - customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true) - customJsResolver = (id: string, base: string) => jsResolver(env, id, base, true) + customCssResolver = async (id: string, base: string) => { + let resolved = await cssResolver(env, id, base, false) + if (resolved && !resolved.endsWith('.css')) return undefined + return resolved + } + customJsResolver = (id: string, base: string) => jsResolver(env, id, base, false) } return new Root( From 17d324f89680c2675b64959ded7558e84532d74c Mon Sep 17 00:00:00 2001 From: Qingyu Wang <40660121+colinaaa@users.noreply.github.com> Date: Sat, 21 Mar 2026 00:34:11 +0800 Subject: [PATCH 06/17] Fix webpack loader cache key for resource queries (#19723) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary `@tailwindcss/webpack` currently uses `this.resourcePath` as the cache key, which ignores the resource query. When the same CSS file is imported multiple times with different `resourceQuery` values, all of those imports share a single `CacheEntry`. That means the utilities discovered for one entry can leak into the CSS output for another entry. This PR changes the cache key to use `this.resource` (path + query) instead, while still using `this.resourcePath` for all filesystem work. ## Test plan - `pnpm test:integrations -- webpack/loader.test.ts` - Confirms all existing webpack loader integration tests pass. - Confirms the new `@tailwindcss/webpack loader isolates cache by resource including query` test passes, verifying that two entries importing the same CSS file with different queries produce isolated outputs (`dist/a.css` only contains `only-a` / `--color-red-500`, and `dist/b.css` only contains `only-b` / `--color-blue-500`). --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + integrations/webpack/loader.test.ts | 75 ++++++++++++++++++++++ packages/@tailwindcss-webpack/src/index.ts | 13 ++-- 3 files changed, 85 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bafb6c744..fccae8e6f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Improve canonicalizations for `tracking-*` utilities ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) - Fix crash due to invalid characters in candidate ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829)) +- Ensure query params in imports are considered unique resources when using `@tailwindcss/webpack` ([#19723](https://github.com/tailwindlabs/tailwindcss/pull/19723)) ## [4.2.2] - 2026-03-18 diff --git a/integrations/webpack/loader.test.ts b/integrations/webpack/loader.test.ts index 3a3782c0d..9c3d870af 100644 --- a/integrations/webpack/loader.test.ts +++ b/integrations/webpack/loader.test.ts @@ -418,3 +418,78 @@ test( `) }, ) + +test( + '@tailwindcss/webpack loader isolates cache by resource including query', + { + fs: { + 'package.json': json` + { + "main": "./src/index.js", + "browser": "./src/index.js", + "dependencies": { + "css-loader": "^6", + "webpack": "^5", + "webpack-cli": "^5", + "mini-css-extract-plugin": "^2", + "tailwindcss": "workspace:^", + "@tailwindcss/webpack": "workspace:^" + } + } + `, + 'webpack.config.js': js` + let MiniCssExtractPlugin = require('mini-css-extract-plugin') + let path = require('node:path') + + module.exports = { + mode: 'development', + entry: { + a: './src/a.js', + b: './src/b.js', + }, + output: { + clean: true, + }, + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /.css$/i, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + '@tailwindcss/webpack', + path.resolve(__dirname, 'query-loader.js'), + ], + }, + ], + }, + } + `, + 'query-loader.js': js` + module.exports = function (source) { + if (this.resourceQuery.includes('a')) { + return '@import "tailwindcss/utilities"; @utility only-a {color: var(--color-red-500);}' + } + + if (this.resourceQuery.includes('b')) { + return '@import "tailwindcss/utilities"; @utility only-b {color: var(--color-blue-500);}' + } + + return source + } + `, + 'src/a.js': js`import './index.css?a'`, + 'src/b.js': js`import './index.css?b'`, + 'src/index.css': css``, + }, + }, + async ({ fs, exec }) => { + await exec('pnpm webpack --mode=development') + + await fs.expectFileToContain('dist/a.css', ['only-a', '--color-red-500']) + await fs.expectFileToContain('dist/b.css', ['only-b', '--color-blue-500']) + await fs.expectFileNotToContain('dist/a.css', ['only-b', '--color-blue-500']) + await fs.expectFileNotToContain('dist/b.css', ['only-a', '--color-red-500']) + }, +) diff --git a/packages/@tailwindcss-webpack/src/index.ts b/packages/@tailwindcss-webpack/src/index.ts index 2c78a552b..6d02f1f0b 100644 --- a/packages/@tailwindcss-webpack/src/index.ts +++ b/packages/@tailwindcss-webpack/src/index.ts @@ -40,8 +40,12 @@ interface CacheEntry { const cache = new QuickLRU({ maxSize: 50 }) -function getContextFromCache(inputFile: string, opts: LoaderOptions): CacheEntry { - let key = `${inputFile}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}` +function getCacheKey(resourceId: string, opts: LoaderOptions): string { + return `${resourceId}:${opts.base ?? ''}:${JSON.stringify(opts.optimize)}` +} + +function getContextFromCache(resourceId: string, opts: LoaderOptions): CacheEntry { + let key = getCacheKey(resourceId, opts) if (cache.has(key)) return cache.get(key)! let entry: CacheEntry = { mtimes: new Map(), @@ -61,6 +65,7 @@ export default async function tailwindLoader( let callback = this.async() let options = this.getOptions() ?? {} let inputFile = this.resourcePath + let resourceId = this.resource let base = options.base ?? process.cwd() let shouldOptimize = options.optimize ?? process.env.NODE_ENV === 'production' let isCSSModuleFile = inputFile.endsWith('.module.css') @@ -83,7 +88,7 @@ export default async function tailwindLoader( } try { - let context = getContextFromCache(inputFile, options) + let context = getContextFromCache(resourceId, options) let inputBasePath = path.dirname(path.resolve(inputFile)) // Whether this is the first build or not @@ -273,7 +278,7 @@ export default async function tailwindLoader( callback(null, result) } catch (error) { // Clear the cache entry on error to force a full rebuild next time - let key = `${inputFile}:${options.base ?? ''}:${JSON.stringify(options.optimize)}` + let key = getCacheKey(resourceId, options) cache.delete(key) DEBUG && I.end(`[@tailwindcss/webpack] ${path.relative(base, inputFile)}`) From b55d96002ce4516c5158ad3565229267b948c1ac Mon Sep 17 00:00:00 2001 From: Aaron Tinio Date: Mon, 23 Mar 2026 18:32:25 +0800 Subject: [PATCH 07/17] fix(canonicalize): collapse arbitrary values into shorthand utilities (#19837) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The guard on `dynamicUtilities` restricted root-swapping to named values, so arbitrary values like `px-[1.2rem] py-[1.2rem]` were never collapsed into `p-[1.2rem]`. This is what caused #19835 — in `--stream` mode, the collapse only happened if an earlier line caused the shorthand to be registered in `STATIC_UTILITIES_KEY` as a side effect, making the output non-deterministic. The underlying issue is that arbitrary value collapse wasn't supported at all. The fix relaxes the guard from `parsedCandidate.value?.kind !== 'named'` to `parsedCandidate.value === null`. `cloneCandidate` and `printCandidate` already handle arbitrary values, so the root-swapping machinery works without other changes. The iteration in `dynamicUtilities` is over `designSystem.utilities.keys('functional')` — a fixed set of roots, not input-proportional — so the performance cost of including arbitrary values should be negligible. Fixes #19835. --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + .../src/canonicalize-candidates.test.ts | 31 +++++++++++++++++++ .../src/canonicalize-candidates.ts | 5 +-- 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fccae8e6f..fa59703b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Improve canonicalizations for `tracking-*` utilities ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) - Fix crash due to invalid characters in candidate ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829)) - Ensure query params in imports are considered unique resources when using `@tailwindcss/webpack` ([#19723](https://github.com/tailwindlabs/tailwindcss/pull/19723)) +- Collapse arbitrary values into shorthand utilities during canonicalization ([#19837](https://github.com/tailwindlabs/tailwindcss/pull/19837)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index fef9eee08..c6d2068b7 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -1310,3 +1310,34 @@ test( ) }, ) + +// https://github.com/tailwindlabs/tailwindcss/issues/19835 +test.each([ + // Arbitrary values should be collapsed to another arbitrary value + [ + ['px-[1.2rem]', 'py-[1.2rem]', 'text-left'], + ['text-left', 'p-[1.2rem]'], + ], + + // Arbitrary values could also be collapsed into a bare value + [ + ['px-[30.75rem]', 'py-[30.75rem]', 'text-left'], + ['text-left', 'p-123'], + ], +])( + 'collapse canonicalization works for arbitrary values', + { timeout }, + async (candidates, expected) => { + let designSystem = await designSystems.get(__dirname).get(css` + @import 'tailwindcss'; + `) + + let options: CanonicalizeOptions = { + collapse: true, + logicalToPhysical: true, + rem: 16, + } + + expect(designSystem.canonicalizeCandidates(candidates, options)).toEqual(expected) + }, +) diff --git a/packages/tailwindcss/src/canonicalize-candidates.ts b/packages/tailwindcss/src/canonicalize-candidates.ts index eaa055b25..6f48f7c1c 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.ts @@ -321,10 +321,7 @@ function collapseCandidates(options: InternalCanonicalizeOptions, candidates: st if (relevantProperties.size === 0) return result for (let parsedCandidate of parseCandidate(designSystem, candidate)) { - if ( - parsedCandidate.kind !== 'functional' || - parsedCandidate.value?.kind !== 'named' // Necessary for bare values - ) { + if (parsedCandidate.kind !== 'functional' || parsedCandidate.value === null) { continue } From 28d526859dfd1efe204c8f037c3fe472d9b5d08e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 23 Mar 2026 15:33:44 +0100 Subject: [PATCH 08/17] Collapse more utilities by expanding their declarations (#19842) This PR adds more declaration expansions such that we can collapse more utilities. While testing #19837 I noticed that in my tests some utilities weren't canonicalized correctly. As part of that PR, we check for `parsedCandidate.value === null`, which means that a functional utility without a value is skipped. We do have utilities like that such as `border` (which is equivalent to `border-1`). But while testing, I noticed that `border-x border-y` should collapse to `border` but they didn't. This PR fixes that. By expanding these properties to their long-form physical properties (instead of the shorter logical properties) we make the signatures of utilities a bit bigger, but also more correct such that we can collapse the physical form into logical utilities. To make this more concrete, this PR allows for the following canonicalizations now: | Input | Output | | --- | --- | | `border-t-123 border-r-123 border-b-123 border-l-123` | `border-123` | | `border-t-1 border-r-1 border-b-1 border-l-1` | `border` | | `border-t-123 border-b-123` | `border-y-123` | | `border-l-123 border-r-123` | `border-x-123` | | `border-t-red-500 border-r-red-500 border-b-red-500 border-l-red-500` | `border-red-500` | | `border-t-red-500 border-b-red-500` | `border-y-red-500` | | `border-l-red-500 border-r-red-500` | `border-x-red-500` | | `scroll-mt-123 scroll-mr-123 scroll-mb-123 scroll-ml-123` | `scroll-m-123` | | `scroll-mt-123 scroll-mb-123` | `scroll-my-123` | | `scroll-ml-123 scroll-mr-123` | `scroll-mx-123` | | `scroll-pt-123 scroll-pr-123 scroll-pb-123 scroll-pl-123` | `scroll-p-123` | | `scroll-pt-123 scroll-pb-123` | `scroll-py-123` | | `scroll-pl-123 scroll-pr-123` | `scroll-px-123` | | `overflow-x-hidden overflow-y-hidden` | `overflow-hidden` | | `overscroll-x-contain overscroll-y-contain` | `overscroll-contain` | ## Test plan 1. Existing tests pass 2. Added a few more tests to verify that these canonicalizations work --- CHANGELOG.md | 7 +- .../src/canonicalize-candidates.test.ts | 12 + .../src/expand-declaration.test.ts | 468 +++++++++++++++++- .../tailwindcss/src/expand-declaration.ts | 29 ++ 4 files changed, 513 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa59703b5..755219921 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Improve canonicalizations for `tracking-*` utilities ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) - Fix crash due to invalid characters in candidate ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829)) - Ensure query params in imports are considered unique resources when using `@tailwindcss/webpack` ([#19723](https://github.com/tailwindlabs/tailwindcss/pull/19723)) -- Collapse arbitrary values into shorthand utilities during canonicalization ([#19837](https://github.com/tailwindlabs/tailwindcss/pull/19837)) +- Canonicalization: collapse arbitrary values into shorthand utilities (e.g. `px-[1.2rem] py-[1.2rem]` → `p-[1.2rem]`) ([#19837](https://github.com/tailwindlabs/tailwindcss/pull/19837)) +- Canonicalization: collapse `border-{t,b}-*` into `border-y-*`, `border-{l,r}-*` into `border-x-*`, and `border-{t,r,b,l}-*` into `border-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) +- Canonicalization: collapse `scroll-m{t,b}-*` into `scroll-my-*`, `scroll-m{l,r}-*` into `scroll-mx-*`, and `scroll-m{t,r,b,l}-*` into `scroll-m-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) +- Canonicalization: collapse `scroll-p{t,b}-*` into `scroll-py-*`, `scroll-p{l,r}-*` into `scroll-px-*`, and `scroll-p{t,r,b,l}-*` into `scroll-p-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) +- Canonicalization: collapse `overflow-{x,y}-*` into `overflow-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) +- Canonicalization: collapse `overscroll-{x,y}-*` into `overscroll-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index c6d2068b7..5fad2e5d6 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -1044,9 +1044,21 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', test.each([ // 4 to 1 ['mt-1 mr-1 mb-1 ml-1', 'm-1'], + ['border-t-123 border-r-123 border-b-123 border-l-123', 'border-123'], + ['border-t-1 border-r-1 border-b-1 border-l-1', 'border'], // `border` is shorter than `border-1` + ['border-t-red-500 border-r-red-500 border-b-red-500 border-l-red-500', 'border-red-500'], + ['scroll-mt-1 scroll-mr-1 scroll-mb-1 scroll-ml-1', 'scroll-m-1'], + ['scroll-pt-1 scroll-pr-1 scroll-pb-1 scroll-pl-1', 'scroll-p-1'], // 2 to 1 ['mt-1 mb-1', 'my-1'], + ['border-t-123 border-b-123', 'border-y-123'], + ['border-t-1 border-b-1', 'border-y'], // `border-y` is shorter than `border-y-1` + ['border-t-red-500 border-b-red-500', 'border-y-red-500'], + ['scroll-mt-1 scroll-mb-1', 'scroll-my-1'], + ['scroll-pt-1 scroll-pb-1', 'scroll-py-1'], + ['overflow-x-hidden overflow-y-hidden', 'overflow-hidden'], + ['overscroll-x-contain overscroll-y-contain', 'overscroll-contain'], // Different order as above ['mb-1 mt-1', 'my-1'], diff --git a/packages/tailwindcss/src/expand-declaration.test.ts b/packages/tailwindcss/src/expand-declaration.test.ts index 1f9e71561..eb3d5ffb2 100644 --- a/packages/tailwindcss/src/expand-declaration.test.ts +++ b/packages/tailwindcss/src/expand-declaration.test.ts @@ -23,7 +23,7 @@ function expand(input: string, options: SignatureFeatures): string { describe('expand declarations', () => { let options = SignatureFeatures.ExpandProperties - test('expand to 4 properties', () => { + test('inset', () => { let input = css` .one { inset: 10px; @@ -71,7 +71,7 @@ describe('expand declarations', () => { `) }) - test('expand to 2 properties', () => { + test('gap', () => { let input = css` .one { gap: 10px; @@ -95,6 +95,294 @@ describe('expand declarations', () => { `) }) + test('border-width', () => { + let input = css` + .one { + border-width: 1px; + } + + .two { + border-width: 1px 2px; + } + + .three { + border-width: 1px 2px 3px; + } + + .four { + border-width: 1px 2px 3px 4px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + } + .two { + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 1px; + border-left-width: 2px; + } + .three { + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 2px; + } + .four { + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + } + " + `) + }) + + test('border-style', () => { + let input = css` + .one { + border-style: solid; + } + + .two { + border-style: solid dashed; + } + + .three { + border-style: solid dashed dotted; + } + + .four { + border-style: solid dashed dotted double; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + border-top-style: solid; + border-right-style: solid; + border-bottom-style: solid; + border-left-style: solid; + } + .two { + border-top-style: solid; + border-right-style: dashed; + border-bottom-style: solid; + border-left-style: dashed; + } + .three { + border-top-style: solid; + border-right-style: dashed; + border-bottom-style: dotted; + border-left-style: dashed; + } + .four { + border-top-style: solid; + border-right-style: dashed; + border-bottom-style: dotted; + border-left-style: double; + } + " + `) + }) + + test('border-color', () => { + let input = css` + .one { + border-color: red; + } + + .two { + border-color: red green; + } + + .three { + border-color: red green blue; + } + + .four { + border-color: red green blue black; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + border-top-color: red; + border-right-color: red; + border-bottom-color: red; + border-left-color: red; + } + .two { + border-top-color: red; + border-right-color: green; + border-bottom-color: red; + border-left-color: green; + } + .three { + border-top-color: red; + border-right-color: green; + border-bottom-color: blue; + border-left-color: green; + } + .four { + border-top-color: red; + border-right-color: green; + border-bottom-color: blue; + border-left-color: black; + } + " + `) + }) + + test('scroll-margin', () => { + let input = css` + .one { + scroll-margin: 1px; + } + + .two { + scroll-margin: 1px 2px; + } + + .three { + scroll-margin: 1px 2px 3px; + } + + .four { + scroll-margin: 1px 2px 3px 4px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + scroll-margin-top: 1px; + scroll-margin-right: 1px; + scroll-margin-bottom: 1px; + scroll-margin-left: 1px; + } + .two { + scroll-margin-top: 1px; + scroll-margin-right: 2px; + scroll-margin-bottom: 1px; + scroll-margin-left: 2px; + } + .three { + scroll-margin-top: 1px; + scroll-margin-right: 2px; + scroll-margin-bottom: 3px; + scroll-margin-left: 2px; + } + .four { + scroll-margin-top: 1px; + scroll-margin-right: 2px; + scroll-margin-bottom: 3px; + scroll-margin-left: 4px; + } + " + `) + }) + + test('scroll-padding', () => { + let input = css` + .one { + scroll-padding: 1px; + } + + .two { + scroll-padding: 1px 2px; + } + + .three { + scroll-padding: 1px 2px 3px; + } + + .four { + scroll-padding: 1px 2px 3px 4px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + scroll-padding-top: 1px; + scroll-padding-right: 1px; + scroll-padding-bottom: 1px; + scroll-padding-left: 1px; + } + .two { + scroll-padding-top: 1px; + scroll-padding-right: 2px; + scroll-padding-bottom: 1px; + scroll-padding-left: 2px; + } + .three { + scroll-padding-top: 1px; + scroll-padding-right: 2px; + scroll-padding-bottom: 3px; + scroll-padding-left: 2px; + } + .four { + scroll-padding-top: 1px; + scroll-padding-right: 2px; + scroll-padding-bottom: 3px; + scroll-padding-left: 4px; + } + " + `) + }) + + test('overflow', () => { + let input = css` + .one { + overflow: clip; + } + + .two { + overflow: hidden visible; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + overflow-x: clip; + overflow-y: clip; + } + .two { + overflow-x: hidden; + overflow-y: visible; + } + " + `) + }) + + test('overscroll-behavior', () => { + let input = css` + .one { + overscroll-behavior: none; + } + + .two { + overscroll-behavior: auto contain; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".one { + overscroll-behavior-x: none; + overscroll-behavior-y: none; + } + .two { + overscroll-behavior-x: auto; + overscroll-behavior-y: contain; + } + " + `) + }) + test('expansion with `!important`', () => { let input = css` .one { @@ -147,6 +435,22 @@ describe('expand declarations', () => { describe('expand logical properties', () => { let options = SignatureFeatures.ExpandProperties | SignatureFeatures.LogicalToPhysical + test('margin-inline', () => { + let input = css` + .example { + margin-inline: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + margin-left: 10px; + margin-right: 20px; + } + " + `) + }) + test('margin-block', () => { let input = css` .example { @@ -162,4 +466,164 @@ describe('expand logical properties', () => { " `) }) + + test('padding-inline', () => { + let input = css` + .example { + padding-inline: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + padding-left: 10px; + padding-right: 20px; + } + " + `) + }) + + test('padding-block', () => { + let input = css` + .example { + padding-block: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + padding-top: 10px; + padding-bottom: 20px; + } + " + `) + }) + + test('scroll-margin-inline', () => { + let input = css` + .example { + scroll-margin-inline: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + scroll-margin-left: 10px; + scroll-margin-right: 20px; + } + " + `) + }) + + test('scroll-margin-block', () => { + let input = css` + .example { + scroll-margin-block: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + scroll-margin-top: 10px; + scroll-margin-bottom: 20px; + } + " + `) + }) + + test('scroll-padding-inline', () => { + let input = css` + .example { + scroll-padding-inline: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + scroll-padding-left: 10px; + scroll-padding-right: 20px; + } + " + `) + }) + + test('scroll-padding-block', () => { + let input = css` + .example { + scroll-padding-block: 10px 20px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + scroll-padding-top: 10px; + scroll-padding-bottom: 20px; + } + " + `) + }) + + test('border-inline-width', () => { + let input = css` + .example { + border-inline-width: 1px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + border-left-width: 1px; + border-right-width: 1px; + } + " + `) + }) + + test('border-block-width', () => { + let input = css` + .example { + border-block-width: 1px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + border-bottom-width: 1px; + border-top-width: 1px; + } + " + `) + }) + + test('border-inline-style', () => { + let input = css` + .example { + border-inline-style: 1px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + border-left-style: 1px; + border-right-style: 1px; + } + " + `) + }) + + test('border-block-style', () => { + let input = css` + .example { + border-block-style: 1px; + } + ` + + expect(expand(input, options)).toMatchInlineSnapshot(` + ".example { + border-bottom-style: 1px; + border-top-style: 1px; + } + " + `) + }) }) diff --git a/packages/tailwindcss/src/expand-declaration.ts b/packages/tailwindcss/src/expand-declaration.ts index 628848ab4..7cef98952 100644 --- a/packages/tailwindcss/src/expand-declaration.ts +++ b/packages/tailwindcss/src/expand-declaration.ts @@ -35,7 +35,32 @@ let VARIADIC_EXPANSION_MAP: Record Date: Mon, 23 Mar 2026 15:35:48 +0100 Subject: [PATCH 09/17] update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 755219921..3e8b5267b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Improve canonicalizations for `tracking-*` utilities ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) +- Canonicalization: improve canonicalizations for `tracking-*` utilities by preferring non-negative utilities (e.g. `-tracking-tighter` → `tracking-wider`) ([#19827](https://github.com/tailwindlabs/tailwindcss/pull/19827)) - Fix crash due to invalid characters in candidate ([#19829](https://github.com/tailwindlabs/tailwindcss/pull/19829)) - Ensure query params in imports are considered unique resources when using `@tailwindcss/webpack` ([#19723](https://github.com/tailwindlabs/tailwindcss/pull/19723)) - Canonicalization: collapse arbitrary values into shorthand utilities (e.g. `px-[1.2rem] py-[1.2rem]` → `p-[1.2rem]`) ([#19837](https://github.com/tailwindlabs/tailwindcss/pull/19837)) From 2c1ef9eb2564f2c83df970eb9f68c19d340c02e5 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 23 Mar 2026 15:57:20 +0100 Subject: [PATCH 10/17] Use `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities (#19843) This PR fixes an issue where `placeholder-*` utilities were reading values from `--background-color` instead of `--placeholder-color`. In Tailwind CSS v3, we read from `placeholderColor` which is why we should use `--placeholder-color` here as well. https://github.com/tailwindlabs/tailwindcss/blob/f38be227df384504a170409c2131ca5ca8bfe025/src/corePlugins.js#L2317 That said, this is technically a breaking change in case somebody relies on `--background-color` for `placeholder` values. But since this is text related, and most people will rely on the default `--color` values instead, I think it's safe to change this as-is. In the unlikely event that somebody _does_ rely on this, then we have 2 options: 1. Guide them to make use of `--placeholder-color` instead (preferred solution) 2. Re-add `--background-color` after the `--placeholder-color` (band-aid solution, but might be worth it who knows) Fixes: #19838 ## Test plan 1. Existing tests still pass 2. Verified in the Tailwind CSS v3 codebase that we did read from `placeholderColor` which in turn reads from `color` by default. Which is equivalent to `--placeholder-color` and `--color` in Tailwind CSS v4. --- CHANGELOG.md | 1 + packages/tailwindcss/src/utilities.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e8b5267b..c766419c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: collapse `scroll-p{t,b}-*` into `scroll-py-*`, `scroll-p{l,r}-*` into `scroll-px-*`, and `scroll-p{t,r,b,l}-*` into `scroll-p-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) - Canonicalization: collapse `overflow-{x,y}-*` into `overflow-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) - Canonicalization: collapse `overscroll-{x,y}-*` into `overscroll-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) +- Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([#19843](https://github.com/tailwindlabs/tailwindcss/pull/19843)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 62e4510b7..a18def9e1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3960,7 +3960,7 @@ export function createUtilities(theme: Theme) { ]) colorUtility('placeholder', { - themeKeys: ['--background-color', '--color'], + themeKeys: ['--placeholder-color', '--color'], handle: (value) => [ styleRule('&::placeholder', [decl('--tw-sort', 'placeholder-color'), decl('color', value)]), ], From e4856c9720f3a9944dc75efe081eb3d50392009d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 24 Mar 2026 17:24:12 +0100 Subject: [PATCH 11/17] Make upgrade tooling more stable (#19846) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR is an attempt to make the upgrade tooling more stable. ### TL;DR 1. When migrating from Tailwind CSS v3 → Tailwind CSS v4, only migrate files listed in the `config.content` instead of relying on v4's auto content detection feature 2. Skip writing files that have not been changed 3. Write changed files in a safe way: first write to a temporary file, then rename the file atomically 4. Never migrate files that are git ignored, even if they are listed in the `config.content` file 5. Always ignore `.env` and `.env.*` files when scanning for files. Most people will have this in their `.gitignore` file, but if not, then this is a fallback mechanism. --- Looking at the #18972 issue, it looks like some people are running into weird situations where some of the contents is just gone. I have never been able to reproduce this on my own devices and in my own projects unfortunately. But there is definitely _something_ happening that's not right that people are running into. Therefore, this PR is an attempt to fix what I think _might_ be wrong, but I'm not 100% sure if these fixes are enough, or if something else is still happening here. This builds on top of the #19779 PR which has some small fixes, but is incomplete to make this work. ### What's happening Looking at some of the comments, it looks like a few things are happening such as: 1. The upgrade tool is emptying out my files — it looks like these are only happening if you ctrl+c while the process is taking a while. It could be that a lot of files are being checked and therefore the tooling looks like its stuck. 6. The upgrade tool is looking at files it shouldn't look at — in Tailwind CSS v4 we have this concept of the auto-content detection. This means that we will look at any plain text file that is not git ignored. ### Fixes #### Emptying out files The files being emptied looks like it's because how `fs.writeFile` behaves by default. It opens the file handle with the `w` flag, which will first truncate the file before writing the new contents. This is not a single atomic operation, so a killed process in the middle will cause invalid state. When we migrate your template files, everything is happening in promises to migrate things at the same time. When a lot of files are being scanned, truncating might have happened already before we write the new content. Since we migrate a bunch of files in parallel, a ctrl+c could cause data loss in multiple files. To mitigate this, I switched to an alternative way of writing files. 1. First, we do some quick checks where if the contents didn't change we just bail out immediately. Files that don't include Tailwind CSS classes won't change, and therefore we don't need to override these files with the same contents. 2. When the migrated contents is empty, we bail out as well. I'm 100% sure that this is not the spot where the "emptying out" happens, I still believe it happens in the `writeFile` itself, but added it just in case. 7. Next, I introduced a safe write, where we first write to a temporary file in the same folder. We could write it to `/tmp`, but then we can't guarantee that we are on the same file system. If we ctrl+c at this stage, then the worst case scenario is that you have additional temporary files in your project, but your original files are still there. Once that file was written, we will use the atomic `fs.rename`. This should be atomic as long as we are on the same file system, so either the rename didn't happen yet, or it completed. I added an integration test for this, but I had to change the `writeFile` implementation slightly. In the test, we will truncate the file first, after that we will write the new contents. This is so that we have enough time to kill the current process and allows us to verify that we didn't clear out the file. Again, this is a hacky way of testing this, just because I can't reproduce this issue myself, let alone reproduce it reliable in a CI environment. Note: we are also using `realpath` to make sure that we are updating the real file. Otherwise, if we were dealing with a symlinked file, we would override the symlink with a "hard" copy instead. #### Touching files that should not be touched During the migration, we rely on the Tailwind CSS v4 auto detection logic which means that it will scan any plain text file that is not git ignored. Therefore changes to php files could happen because in theory they could contain Tailwind CSS classes. To solve this, when migrating from Tailwind CSS v3 to Tailwind CSS v4, we will _only_ take the sources into account that were listed in the `config.content` array. Since this was a requirement in Tailwind CSS v3, it should be safe to rely on this array. Additionally, this will make sure that we are dealing with way fewer files to migrate as well. On top of that, files that match the patterns in the content array that are git ignored will also be skipped. This is to prevent that we mutate files in `node_modules` for example. In one of the comments I read that `.env` files were emptied out. In most cases people will have these files gitignored but I explicitly added `.env` and `.env.*` as files to never ever touch by default when scanning. Last but not least, this also updates the output a little bit of the upgrade tool in case we skip content files (because of git ignore) and if we changed a file. image - "Git ignored folder, skipping: `./node_modules`": this is because the content array looks like this while the `node_modules` are being ignored: image - "Migrated `./resources/views/vendor/filament-panels/components/logo.blade.php`": this is because **I** made a change to showcase this feature. Fixes: #18972 Closes: #19779 ### Test plan 1. Existing tests still pass 1. Added a dedicated integration test to ensure that we only take `config.content` into account when migrating from Tailwind CSS v3 to Tailwind CSS v4 projects. 1. Added a dedicated integration test to make sure that files listed in `config.content` that are also git ignored, will still be skipped. 1. Added a dedicated integration test to ensure that when `writeFile` is cancelled mid-write that our old files are still present. 1. Added a dedicated integration test to ensure that we ignore `.env` and `.env.*` files even if you didn't git ignore them. [ci-all] To verify on Windows --------- Co-authored-by: Sami --- CHANGELOG.md | 4 + .../src/scanner/fixtures/ignored-files.txt | 2 + integrations/upgrade/index.test.ts | 244 +++++++++++++++++- integrations/upgrade/js-config.test.ts | 101 +++++++- integrations/utils.ts | 3 +- .../src/codemods/config/migrate-postcss.ts | 7 +- .../src/codemods/template/migrate.ts | 17 +- packages/@tailwindcss-upgrade/src/index.ts | 109 +++++++- .../src/utils/write-file-safely.ts | 49 ++++ 9 files changed, 512 insertions(+), 24 deletions(-) create mode 100644 packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index c766419c2..da992e5ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: collapse `overflow-{x,y}-*` into `overflow-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) - Canonicalization: collapse `overscroll-{x,y}-*` into `overscroll-*` ([#19842](https://github.com/tailwindlabs/tailwindcss/pull/19842)) - Read from `--placeholder-color` instead of `--background-color` for `placeholder-*` utilities ([#19843](https://github.com/tailwindlabs/tailwindcss/pull/19843)) +- Upgrade: Ensure files are not emptied out when killing the upgrade process while it's running ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) +- Upgrade: Use `config.content` when migrating from Tailwind CSS v3 to Tailwind CSS v4 ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) +- Upgrade: Never migrate files that are ignored by git ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) +- Add `.env` and `.env.*` to default ignored content files ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) ## [4.2.2] - 2026-03-18 diff --git a/crates/oxide/src/scanner/fixtures/ignored-files.txt b/crates/oxide/src/scanner/fixtures/ignored-files.txt index d2d231ec7..1e8f1029f 100644 --- a/crates/oxide/src/scanner/fixtures/ignored-files.txt +++ b/crates/oxide/src/scanner/fixtures/ignored-files.txt @@ -2,3 +2,5 @@ package-lock.json pnpm-lock.yaml bun.lockb .gitignore +.env +.env.* diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index 46b657694..cf58f5912 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -1,6 +1,6 @@ import path from 'node:path' import { isRepoDirty } from '../../packages/@tailwindcss-upgrade/src/utils/git' -import { candidate, css, html, js, json, test, ts, yaml } from '../utils' +import { candidate, css, html, js, json, test, ts, txt, yaml } from '../utils' test( 'error when no CSS file with @tailwind is used', @@ -171,6 +171,56 @@ test( }, ) +test( + 'only migrates files matched by `config.content` when upgrading from v3 to v4', + { + fs: { + 'package.json': json` + { + "dependencies": { + "tailwindcss": "^3", + "@tailwindcss/upgrade": "workspace:^" + } + } + `, + 'tailwind.config.js': js` + /** @type {import('tailwindcss').Config} */ + module.exports = { + content: ['./src/**/*.html'], + } + `, + 'src/index.html': html` +
+ `, + 'src/input.css': css` + @tailwind base; + @tailwind components; + @tailwind utilities; + `, + 'templates/email.php': html` +
+ `, + 'notes/unrelated.txt': `order-[0] bg-[--my-red]`, + }, + }, + async ({ exec, fs, expect }) => { + await exec('npx @tailwindcss/upgrade') + + expect(await fs.dumpFiles('./**/*.{html,php,txt}')).toMatchInlineSnapshot(` + " + --- notes/unrelated.txt --- + order-[0] bg-[--my-red] + + --- src/index.html --- +
+ + --- templates/email.php --- +
+ " + `) + }, +) + test( `upgrades a v3 project with prefixes to v4`, { @@ -2972,6 +3022,198 @@ test( }, ) +test( + 'v4 ignores .env files during template migration', + { + fs: { + 'package.json': json` + { + "dependencies": { + "tailwindcss": "^4", + "@tailwindcss/upgrade": "workspace:^" + } + } + `, + 'src/app.css': css`@import 'tailwindcss';`, + 'src/index.html': html` +
+ `, + 'src/.env': `TW_TEST_CLASS=order-[0]`, + 'src/.env.production': `TW_TEST_CLASS=order-[0]`, + }, + }, + async ({ exec, fs, expect }) => { + await exec('npx @tailwindcss/upgrade') + + expect(await fs.dumpFiles('./src/**/{*,.env,.env.*}')).toMatchInlineSnapshot(` + " + --- ./src/index.html --- +
+ + --- ./src/.env --- + TW_TEST_CLASS=order-[0] + + --- ./src/.env.production --- + TW_TEST_CLASS=order-[0] + + --- ./src/app.css --- + @import 'tailwindcss'; + " + `) + }, +) + +test( + 'v4 linked configs respect `content` and still ignore gitignored files', + { + fs: { + 'package.json': json` + { + "dependencies": { + "tailwindcss": "^4", + "@tailwindcss/upgrade": "workspace:^" + } + } + `, + 'tailwind.config.js': js` + /** @type {import('tailwindcss').Config} */ + module.exports = { + content: ['./src/*.html', './src/*.less'], + } + `, + 'src/app.css': css` + @import 'tailwindcss'; + @config '../tailwind.config.js'; + `, + + // Ignore all .html files + 'src/.gitignore': txt` + *.html + `, + + // HTML files are in .gitignore, even though they are explicitly mentioned + // in the `content` array. Still ignore them + 'src/do-not-migrate-me.html': html` +
+ `, + + // Should be picked up by auto-content detection + 'templates/migrate-me.php': html` +
+ `, + + // Does not get picked up by auto content detection (because it's a less + // file), but was explicitly listed in the `content` array. + // + // A bit of a hacky way, I admit, but it allows us to differentiate + // between git ignored files, auto content detection and explicitly listed + // files. + 'src/migrate-me.less': html` +
+ `, + }, + }, + async ({ exec, fs, expect }) => { + await exec('npx @tailwindcss/upgrade') + + expect(await fs.dumpFiles('./{src,templates}/**/*')).toMatchInlineSnapshot(` + " + --- ./src/app.css --- + @import 'tailwindcss'; + @config '../tailwind.config.js'; + + --- ./src/do-not-migrate-me.html --- +
+ + --- ./src/migrate-me.less --- +
+ + --- ./templates/migrate-me.php --- +
+ " + `) + }, +) + +test( + 'interrupting template migration does not truncate files', + { + timeout: 180_000, + fs: { + 'package.json': json` + { + "dependencies": { + "tailwindcss": "^4", + "@tailwindcss/upgrade": "workspace:^" + } + } + `, + 'src/app.css': css` @import 'tailwindcss'; `, + 'src/index.html': html` +
+ `, + 'hook.cjs': js` + let fs = require('node:fs/promises') + let path = require('node:path') + let originalWriteFile = fs.writeFile.bind(fs) + + fs.writeFile = async (file, contents, ...rest) => { + // Mimic a bad write + await originalWriteFile(file, '') // As-if we truncated first + console.error('__TRUNCATED_TARGET__') + await new Promise((r) => setTimeout(r, 50)) // Wait 50ms to allow us to kill the process + await originalWriteFile(file, contents, ...rest) // Write the actual contents + } + `, + 'src/keep.php': ` + 'this file should never be truncated', + ]; + `, + }, + }, + async ({ spawn, fs, expect }) => { + let repeatedCandidates = Array.from( + { length: 250 }, + () => '
', + ).join('\n') + + for (let i = 0; i < 100; i++) { + await fs.write( + `src/templates/template-${i}.php`, + ` ${i}];\n`, + ) + } + + let originalKeepFile = await fs.read('src/keep.php') + let originalTemplate = await fs.read('src/templates/template-0.php') + + let process = await spawn('npx @tailwindcss/upgrade --force', { + env: { + NODE_OPTIONS: '--require=./hook.cjs', + }, + }) + + // We're only interested once we start migrating the templates + await process.onStderr((message) => message.includes('Migrating templates')) + + // Wait for the trigger that we are mid-write + await process.onStderr((message) => message === '__TRUNCATED_TARGET__') + + // Kill the process + await process.dispose() + + expect(await fs.read('src/keep.php')).toBe(originalKeepFile) + expect(await fs.read('src/templates/template-0.php')).toBe(originalTemplate) + + for (let [file, contents] of await fs.glob('src/**/*.{html,php,css}')) { + expect(contents.trim(), `${file} should not be empty after interruption`).not.toBe('') + } + }, +) + test( 'upgrades can run in a pnpm workspace', { diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index 450d8254c..1167eba27 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/integrations/upgrade/js-config.test.ts @@ -1,6 +1,6 @@ import path from 'node:path' import { describe } from 'vitest' -import { css, html, json, test, ts } from '../utils' +import { css, html, json, test, ts, txt } from '../utils' test( `upgrade JS config files with flat theme values, darkMode, and content fields`, @@ -322,6 +322,105 @@ test( }, ) +test( + 'skips gitignored template files even when they are explicitly referenced in `content`', + { + fs: { + 'package.json': json` + { + "dependencies": { + "tailwindcss": "^3", + "@tailwindcss/upgrade": "workspace:^" + } + } + `, + '.gitignore': txt` + node_modules + src/ignored + `, + 'tailwind.config.ts': ts` + import { type Config } from 'tailwindcss' + + module.exports = { + content: [ + './src/migrate-me.html', + './src/ignored/do-not-migrate-me.html', + './node_modules/my-external-lib/template.html', + ], + theme: {}, + plugins: [], + } satisfies Config + `, + 'src/input.css': css` + @tailwind base; + @tailwind components; + @tailwind utilities; + `, + 'src/migrate-me.html': html` +
+ `, + 'src/ignored/do-not-migrate-me.html': html` +
+ `, + 'node_modules/my-external-lib/template.html': html` +
+ `, + }, + }, + async ({ exec, fs, expect }) => { + await exec('npx @tailwindcss/upgrade') + + expect( + await fs.dumpFiles( + '{src/**/*.{css,html},node_modules/my-external-lib/template.html,.gitignore}', + ), + ).toMatchInlineSnapshot(` + " + --- .gitignore --- + node_modules + src/ignored + + --- src/input.css --- + @import 'tailwindcss'; + + @source './ignored/do-not-migrate-me.html'; + @source '../node_modules/my-external-lib/template.html'; + + /* + The default border color has changed to \`currentcolor\` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. + */ + @layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } + } + + --- src/migrate-me.html --- +
+ + --- node_modules/my-external-lib/template.html --- +
+ + --- src/ignored/do-not-migrate-me.html --- +
+ " + `) + }, +) + test( 'upgrades JS config files with plugins', { diff --git a/integrations/utils.ts b/integrations/utils.ts index f9638b857..8e4a1c496 100644 --- a/integrations/utils.ts +++ b/integrations/utils.ts @@ -16,7 +16,7 @@ const PUBLIC_PACKAGES = (await fs.readdir(path.join(REPO_ROOT, 'dist'))).map((na ) interface SpawnedProcess { - dispose: () => void + dispose: () => Promise flush: () => void onStdout: (predicate: (message: string) => boolean) => Promise onStderr: (predicate: (message: string) => boolean) => Promise @@ -194,6 +194,7 @@ export function test( return disposePromise } disposables.push(dispose) + function onExit() { resolveDisposal?.() } diff --git a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts index 512f3df59..e16f52287 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-postcss.ts @@ -2,6 +2,7 @@ import fs from 'node:fs/promises' import path from 'node:path' import { pkg } from '../../utils/packages' import { highlight, info, relative, success, warn } from '../../utils/renderer' +import { writeFileSafely } from '../../utils/write-file-safely' // Migrates simple PostCSS setups. This is to cover non-dynamic config files // similar to the ones we have all over our docs: @@ -50,7 +51,7 @@ export async function migratePostCSSConfig(base: string) { ranMigration = true if (result) { - await fs.writeFile( + await writeFileSafely( packageJsonPath, JSON.stringify({ ...packageJson, postcss: result?.json }, null, 2), ) @@ -76,7 +77,7 @@ export async function migratePostCSSConfig(base: string) { ranMigration = true if (result) { - await fs.writeFile(jsonConfigPath, JSON.stringify(result.json, null, 2)) + await writeFileSafely(jsonConfigPath, JSON.stringify(result.json, null, 2)) didMigrate = true didAddPostcssClient = result.didAddPostcssClient @@ -206,7 +207,7 @@ async function migratePostCSSJSConfig(configPath: string): Promise<{ newLines.push(line) } } - await fs.writeFile(configPath, newLines.join('\n')) + await writeFileSafely(configPath, newLines.join('\n')) return { didAddPostcssClient, didRemoveAutoprefixer, didRemovePostCSSImport } } diff --git a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts b/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts index 2b39094d4..976c63a83 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/template/migrate.ts @@ -9,6 +9,7 @@ import type { Config } from '../../../../tailwindcss/src/compat/plugin-api' import type { DesignSystem } from '../../../../tailwindcss/src/design-system' import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map' import { spliceChangesIntoString, type StringChange } from '../../utils/splice-changes-into-string' +import { writeFileSafely } from '../../utils/write-file-safely' import { extractRawCandidates } from './candidates' import { isSafeMigration } from './is-safe-migration' import { migrateAutomaticVarInjection } from './migrate-automatic-var-injection' @@ -119,12 +120,18 @@ export default async function migrateContents( return spliceChangesIntoString(contents, changes) } -export async function migrate(designSystem: DesignSystem, userConfig: Config | null, file: string) { +export async function migrate( + designSystem: DesignSystem, + userConfig: Config | null, + file: string, +): Promise { let fullPath = path.isAbsolute(file) ? file : path.resolve(process.cwd(), file) let contents = await fs.readFile(fullPath, 'utf-8') - await fs.writeFile( - fullPath, - await migrateContents(designSystem, userConfig, contents, extname(file)), - ) + let migrated = await migrateContents(designSystem, userConfig, contents, extname(file)) + if (migrated === contents) return false // Nothing changed + if (migrated.trim() === '') return false // Emptied out, something went horribly wrong + + await writeFileSafely(fullPath, migrated) + return true } diff --git a/packages/@tailwindcss-upgrade/src/index.ts b/packages/@tailwindcss-upgrade/src/index.ts index 2cfbab371..ae54332f3 100644 --- a/packages/@tailwindcss-upgrade/src/index.ts +++ b/packages/@tailwindcss-upgrade/src/index.ts @@ -1,7 +1,7 @@ #!/usr/bin/env node import { Scanner } from '@tailwindcss/oxide' -import { globby } from 'globby' +import { globby, isGitIgnored } from 'globby' import fs from 'node:fs/promises' import path from 'node:path' import pc from 'picocolors' @@ -23,6 +23,7 @@ import { isRepoDirty } from './utils/git' import { pkg } from './utils/packages' import { eprintln, error, header, highlight, info, relative, success } from './utils/renderer' import * as version from './utils/version' +import { writeFileSafely } from './utils/write-file-safely' const options = { '--config': { type: 'string', description: 'Path to the configuration file', alias: '-c' }, @@ -42,6 +43,7 @@ if (flags['--help']) { async function run() { let base = process.cwd() + let isIgnored = await isGitIgnored({ cwd: base }) eprintln(header()) eprintln() @@ -95,6 +97,7 @@ async function run() { info('Searching for CSS files in the current directory and its subdirectories…') files = await globby(['**/*.css'], { + cwd: base, absolute: true, gitignore: true, // gitignore: true will first search for all .gitignore including node_modules folders, this makes the initial search much faster @@ -250,7 +253,7 @@ async function run() { for (let sheet of stylesheets) { if (!sheet.file) continue - await fs.writeFile(sheet.file, sheet.root.toString()) + await writeFileSafely(sheet.file, sheet.root.toString()) if (sheet.isTailwindRoot) { success(`Migrated stylesheet: ${highlight(relative(sheet.file, base))}`, { prefix: '↳ ' }) @@ -293,6 +296,8 @@ async function run() { let designSystem = await sheet.designSystem() if (!designSystem) continue + let config = configBySheet.get(sheet) + // Figure out the source files to migrate let sources = (() => { // Disable auto source detection @@ -300,43 +305,121 @@ async function run() { return [] } - // No root specified, use the base directory + // No root specified if (compiler.root === null) { + // When coming from Tailwind CSS v3, we have to use the + // `config.sources` (which came from `config.content` originally) + if (version.isMajor(3)) { + if (config?.sources) { + return config.sources.map((source) => ({ ...source, negated: false })) + } + + // When we don't have any sources, then we have to fallback to no + // sources at all. We cannot fallback to the `**/*` pattern. + return [] + } + + // When we are upgrading a Tailwind CSS v4 and up version, we use + // the default `**/*` pattern. All custom `@source` directives will + // be attached later as sources. return [{ base, pattern: '**/*', negated: false }] } // Use the specified root return [{ ...compiler.root, negated: false }] })().concat(compiler.sources) - - let config = configBySheet.get(sheet) let scanner = new Scanner({ sources }) let filesToMigrate = [] + + let ignoredPaths = new Set() + for (let file of scanner.files) { + file = await fs.realpath(file).catch(() => file) // Ensure we are dealing with the real path, not symlinks if (file.endsWith('.css')) continue + + // When a file is git ignored, then we don't want to migrate it even + // if it was listed in the `config.content` array or part of any + // `@source` directives. + // + // We can make this an option later to explicitly allow this, but + // this should be the default. This guarantees that: + // + // 1. Files coming from node_modules aren't touched + // 2. Generated files aren't changed (the source should update, not the target) + // 3. You can see all the changes that happened + try { + if (isIgnored(file)) { + let culprit = file + + // To prevent print all ignored files, we can also walk up the + // parent tree and log those instead _if_ they are: + // + // 1. Also git ignored + // 2. Are not going outside of the current repo + let parent = path.dirname(file) + do { + try { + if (isIgnored(parent)) { + culprit = parent + } + } catch { + // Escaping the current repo + break + } + + parent = path.dirname(parent) + } while (parent) + + if (ignoredPaths.has(culprit)) continue // Already logged, skip + ignoredPaths.add(culprit) + + if (culprit === file) { + info(`Git ignored, skipping: ${highlight(relative(culprit, base))}`, { + prefix: '↳ ', + }) + } else { + info(`Git ignored folder, skipping: ${highlight(relative(culprit, base))}`, { + prefix: '↳ ', + }) + } + + continue + } + } catch (err) { + info(`Outside repository, skipping: ${highlight(relative(file, base))}`, { + prefix: '↳ ', + }) + // Skip this file when we run into errors. E.g.: when the current + // file is not part of the current git repo it will throw an error. + continue + } + if (seenFiles.has(file)) continue seenFiles.add(file) filesToMigrate.push(file) } // Migrate each file + let changes = 0 await Promise.allSettled( - filesToMigrate.map((file) => - migrateTemplate(designSystem, config?.userConfig ?? null, file), - ), + filesToMigrate.map(async (file) => { + let changed = await migrateTemplate(designSystem, config?.userConfig ?? null, file) + if (changed) { + changes++ + info(`Migrated ${highlight(relative(file, base))}`, { prefix: '↳ ' }) + } + }), ) if (config?.configFilePath) { success( - `Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))}`, + `Migrated templates for configuration file: ${highlight(relative(config.configFilePath, base))} (${changes} file${changes === 1 ? '' : 's'} changed)`, { prefix: '↳ ' }, ) } else { success( - `Migrated templates for: ${highlight(relative(sheet.file ?? '', base))}`, - { - prefix: '↳ ', - }, + `Migrated templates for: ${highlight(relative(sheet.file ?? '', base))} (${changes} file${changes === 1 ? '' : 's'} changed)`, + { prefix: '↳ ' }, ) } } diff --git a/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts b/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts new file mode 100644 index 000000000..2ff99f9e7 --- /dev/null +++ b/packages/@tailwindcss-upgrade/src/utils/write-file-safely.ts @@ -0,0 +1,49 @@ +import { randomUUID } from 'node:crypto' +import fs from 'node:fs/promises' +import path from 'node:path' + +export async function writeFileSafely(file: string, contents: string) { + // Resolve symlinks so the rename replaces the actual target file rather than + // replacing the symlink itself with a regular file. + let realFile = await fs.realpath(file).catch(() => file) + + // Start by creating a new file in the current directory that is guaranteed to + // be unique (via `uuid`). We can embed the `process.id` in case we need to + // debug things later. + // + // While we can write this to a more global `/tmp` folder, I want to be 100% + // sure that we are on the same file system (same drive) so the rename + // operation is atomic. Once the file is written, we will rename the file. If + // this fails, the old file is still intact, if it works we have an updated + // file. + // + // If this still causes problems (but it will slow things down): + // 1. We could make sure that we inherit the file permissions + // 2. Use an explicit fsync to force a flush to disk + let temporaryFile = path.join( + path.dirname(realFile), + `.${path.basename(realFile)}.tailwind-upgrade.${process.pid}.${randomUUID()}.tmp`, + ) + + // Write file uses the `w` flag by default, which is defined as: + // > Open file for writing. The file is created (if it does not exist) or truncated (if it exists). + // > https://nodejs.org/api/fs.html#file-system-flags + // + // Which means that if this function is actively running, and you cancel the + // process at the wrong time, then the truncated files are present. Since all + // these migrations happen in parallel, multiple files are open and available + // to be written to, it could mean in multiple truncated files. + // + // Writing to a temp file first means that if the process is cancelled at this + // point, that the old original file is still correct. + // + // The rename part should be atomic (especially because we guarantee it to be + // on the same file system) so this either succeeds or doesn't happen. + try { + await fs.writeFile(temporaryFile, contents, 'utf8') + await fs.rename(temporaryFile, realFile) + } catch (error) { + await fs.unlink(temporaryFile).catch(() => {}) + throw error + } +} From 88a2d22c2fdb65c5f8c3b2f68db9713f8bf2e656 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 25 Mar 2026 11:38:28 +0100 Subject: [PATCH 12/17] Add more canonicalization rules for deprecated utilities (#19849) This PR adds more canonicalization rules for deprecated utilities. | Before | After | | --- | --- | | `overflow-ellipsis` | `text-ellipsis` | | `start-full` | `inset-s-full` | | `-start-full` | `-inset-s-full` | | `start-auto` | `inset-s-auto` | | `start-px` | `inset-s-px` | | `-start-px` | `-inset-s-px` | | `start-8` | `inset-s-8` | | `-start-8` | `-inset-s-8` | | `start-123` | `inset-s-123` | | `-start-123` | `-inset-s-123` | | `end-full` | `inset-e-full` | | `-end-full` | `-inset-e-full` | | `end-auto` | `inset-e-auto` | | `end-px` | `inset-e-px` | | `-end-px` | `-inset-e-px` | | `end-8` | `inset-e-8` | | `-end-8` | `-inset-e-8` | | `end-123` | `inset-e-123` | | `-end-123` | `-inset-e-123` | In a few cases we already had canonicalization rules, for example `start-8` where `8` is one of the default suggested spacing scale values. But this now adds support for positive and negative values that exceed the default suggested spacing scale as well as some keywords. ## Test plan 1. Existing tests pass 2. Added new tests to ensure these canonicalizations work --- CHANGELOG.md | 3 + .../src/canonicalize-candidates.test.ts | 108 +++++++++--------- .../src/canonicalize-candidates.ts | 40 +++++-- 3 files changed, 87 insertions(+), 64 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index da992e5ba..8bc36b4c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Upgrade: Use `config.content` when migrating from Tailwind CSS v3 to Tailwind CSS v4 ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) - Upgrade: Never migrate files that are ignored by git ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) - Add `.env` and `.env.*` to default ignored content files ([#19846](https://github.com/tailwindlabs/tailwindcss/pull/19846)) +- Canonicalization: migrate `overflow-ellipsis` into `text-ellipsis` ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) +- Canonicalization: migrate `start-full` → `inset-s-full`, `start-auto` → `inset-s-auto`, `start-px` → `inset-s-px`, and `start-` → `inset-s-` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) +- Canonicalization: migrate `end-full` → `inset-e-full`, `end-auto` → `inset-e-auto`, `end-px` → `inset-e-px`, and `end-` → `inset-e-` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index 5fad2e5d6..cb44ca5f9 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -1,3 +1,4 @@ +import { randomUUID } from 'node:crypto' import fs from 'node:fs' import path from 'node:path' import { describe, expect, test } from 'vitest' @@ -611,68 +612,67 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', }) describe('deprecated utilities', () => { - test('`order-none` → `order-0`', { timeout }, async () => { - let candidate = 'order-none' - let expected = 'order-0' + let deprecated = [ + ['order-none', 'order-0'], + ['break-words', 'wrap-break-word'], + ['overflow-ellipsis', 'text-ellipsis'], - let input = css` - @import 'tailwindcss'; - ` + ['start-full', 'inset-s-full'], + ['-start-full', '-inset-s-full'], + ['start-auto', 'inset-s-auto'], + ['start-px', 'inset-s-px'], + ['-start-px', '-inset-s-px'], + ['start-8', 'inset-s-8'], // Within default spacing scale + ['-start-8', '-inset-s-8'], // Within default spacing scale + ['start-123', 'inset-s-123'], // Outside of default spacing scale + ['-start-123', '-inset-s-123'], // Outside of default spacing scale - await expectCanonicalization(input, candidate, expected) - }) + ['end-full', 'inset-e-full'], + ['-end-full', '-inset-e-full'], + ['end-auto', 'inset-e-auto'], + ['end-px', 'inset-e-px'], + ['-end-px', '-inset-e-px'], + ['end-8', 'inset-e-8'], // Within default spacing scale + ['-end-8', '-inset-e-8'], // Within default spacing scale + ['end-123', 'inset-e-123'], // Outside of default spacing scale + ['-end-123', '-inset-e-123'], // Outside of default spacing scale + ] - test('`order-none` → `order-none` with custom implementation', { timeout }, async () => { - let candidate = 'order-none' - let expected = 'order-none' + // Creating a shared CSS file such that we can re-use the same design system + // for all of these. + let customImplementations = deprecated + .map( + ([candidate]) => css` + @utility ${candidate} { + --custom-${randomUUID()}: implementation; + } + `, + ) + .join('\n') - let input = css` - @import 'tailwindcss'; + for (let [candidate, expected] of deprecated) { + test(`\`${candidate}\` → \`${expected}\` (%#)`, { timeout }, async () => { + let input = css` + @import 'tailwindcss'; + ` - @utility order-none { - order: none; /* imagine this exists */ - } - ` + await expectCanonicalization(input, candidate, expected) + }) - await expectCanonicalization(input, candidate, expected) - }) + test( + `\`${candidate}\` → \`${candidate}\` because of custom implementation (%#)`, + { timeout }, + async () => { + let input = css` + @import 'tailwindcss'; - test('`break-words` → `wrap-break-word`', { timeout }, async () => { - let candidate = 'break-words' - let expected = 'wrap-break-word' + ${customImplementations} + ` - let input = css` - @import 'tailwindcss'; - ` - - await expectCanonicalization(input, candidate, expected) - }) - - test('`[overflow-wrap:break-word]` → `wrap-break-word`', { timeout }, async () => { - let candidate = '[overflow-wrap:break-word]' - let expected = 'wrap-break-word' - - let input = css` - @import 'tailwindcss'; - ` - - await expectCanonicalization(input, candidate, expected) - }) - - test('`break-words` → `break-words` with custom implementation', { timeout }, async () => { - let candidate = 'break-words' - let expected = 'break-words' - - let input = css` - @import 'tailwindcss'; - - @utility break-words { - break: words; /* imagine this exists */ - } - ` - - await expectCanonicalization(input, candidate, expected) - }) + await expectCanonicalization(input, candidate, candidate) + }, + ) + } }) describe('arbitrary variants', () => { diff --git a/packages/tailwindcss/src/canonicalize-candidates.ts b/packages/tailwindcss/src/canonicalize-candidates.ts index 6f48f7c1c..c9f0274b3 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.ts @@ -198,7 +198,6 @@ export function canonicalizeCandidates( } function collapseCandidates(options: InternalCanonicalizeOptions, candidates: string[]): string[] { - if (candidates.length <= 1) return candidates let designSystem = options.designSystem // To keep things simple, we group candidates such that we only collapse @@ -1428,8 +1427,28 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO const DEPRECATION_MAP = new Map([ ['order-none', 'order-0'], ['break-words', 'wrap-break-word'], + ['overflow-ellipsis', 'text-ellipsis'], ]) +const DEPRECATION_TRANSFORMATION_MAP = new Map([ + [/^(-)?start-(.*?)$/, '$1inset-s-$2'], + [/^(-)?end-(.*?)$/, '$1inset-e-$2'], +]) + +function* tryDeprecatedUtilities(candidate: string) { + // Try static replacements + let replacement = DEPRECATION_MAP.get(candidate) + if (replacement) yield replacement + + // Try dynamic replacements + for (let [searchValue, replaceValue] of DEPRECATION_TRANSFORMATION_MAP) { + let replacement = candidate.replace(searchValue, replaceValue) + if (replacement === candidate) continue + + yield replacement + } +} + function deprecatedUtilities( candidate: Candidate, options: InternalCanonicalizeOptions, @@ -1439,20 +1458,21 @@ function deprecatedUtilities( let targetCandidateString = printUnprefixedCandidate(designSystem, candidate) - let replacementString = DEPRECATION_MAP.get(targetCandidateString) ?? null - if (replacementString === null) return candidate - let legacySignature = signatures.get(targetCandidateString) if (typeof legacySignature !== 'string') return candidate - let replacementSignature = signatures.get(replacementString) - if (typeof replacementSignature !== 'string') return candidate + for (let replacementString of tryDeprecatedUtilities(targetCandidateString)) { + let replacementSignature = signatures.get(replacementString) + if (typeof replacementSignature !== 'string') continue - // Not the same signature, not safe to migrate - if (legacySignature !== replacementSignature) return candidate + // Not the same signature, not safe to migrate + if (legacySignature !== replacementSignature) continue - let [replacement] = parseCandidate(designSystem, replacementString) - return replacement + let [replacement] = parseCandidate(designSystem, replacementString) + return replacement + } + + return candidate } // ---- From 0d6e038889f49a809a4077ef7badc7d43184cd42 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 25 Mar 2026 12:04:47 +0100 Subject: [PATCH 13/17] fix index in test name --- packages/tailwindcss/src/canonicalize-candidates.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index cb44ca5f9..ad3fec4d4 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -650,8 +650,8 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', ) .join('\n') - for (let [candidate, expected] of deprecated) { - test(`\`${candidate}\` → \`${expected}\` (%#)`, { timeout }, async () => { + for (let [idx, [candidate, expected]] of deprecated.entries()) { + test(`\`${candidate}\` → \`${expected}\` (${idx})`, { timeout }, async () => { let input = css` @import 'tailwindcss'; ` @@ -660,7 +660,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', }) test( - `\`${candidate}\` → \`${candidate}\` because of custom implementation (%#)`, + `\`${candidate}\` → \`${candidate}\` because of custom implementation (${idx})`, { timeout }, async () => { let input = css` From c385fd36bcce707a02c229ebeb66ea88e12eb041 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 25 Mar 2026 12:08:14 +0100 Subject: [PATCH 14/17] use `test.each` instead of manual loop --- .../src/canonicalize-candidates.test.ts | 45 ++++++++++--------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index ad3fec4d4..4d53d80c1 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -612,7 +612,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', }) describe('deprecated utilities', () => { - let deprecated = [ + let deprecated: [string, string][] = [ ['order-none', 'order-0'], ['break-words', 'wrap-break-word'], ['overflow-ellipsis', 'text-ellipsis'], @@ -638,41 +638,42 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', ['-end-123', '-inset-e-123'], // Outside of default spacing scale ] - // Creating a shared CSS file such that we can re-use the same design system - // for all of these. - let customImplementations = deprecated - .map( - ([candidate]) => css` + test.each(deprecated)(testName, { timeout }, async (candidate, expected) => { + let input = css` + @import 'tailwindcss'; + ` + + await expectCanonicalization(input, candidate, expected) + }) + + describe('With custom implementation', () => { + // Creating a shared CSS file such that we can re-use the same design + // system for all of these. + let customImplementations = deprecated + .map( + ([candidate]) => css` @utility ${candidate} { --custom-${randomUUID()}: implementation; } `, - ) - .join('\n') + ) + .join('\n') - for (let [idx, [candidate, expected]] of deprecated.entries()) { - test(`\`${candidate}\` → \`${expected}\` (${idx})`, { timeout }, async () => { - let input = css` - @import 'tailwindcss'; - ` - - await expectCanonicalization(input, candidate, expected) - }) - - test( - `\`${candidate}\` → \`${candidate}\` because of custom implementation (${idx})`, + // Keep the current utility because of the custom implementation + test.each(deprecated.map(([candidate]) => [candidate, candidate]))( + testName, { timeout }, - async () => { + async (candidate, expected) => { let input = css` @import 'tailwindcss'; ${customImplementations} ` - await expectCanonicalization(input, candidate, candidate) + await expectCanonicalization(input, candidate, expected) }, ) - } + }) }) describe('arbitrary variants', () => { From 52fd421cc941aad650db769f04b77d08c56951df Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 25 Mar 2026 15:18:14 +0100 Subject: [PATCH 15/17] Small refactor of canonicalization tests (#19851) This are getting a little bit out of hand here, so this is an initial refactor. ## Test plan 1. All tests are still there 2. All tests are still passing --- .../src/canonicalize-candidates.test.ts | 778 +++++++++--------- 1 file changed, 390 insertions(+), 388 deletions(-) diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index 4d53d80c1..810232e55 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -93,30 +93,6 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', } async function expectCanonicalization( - input: string, - candidate: string, - expected: string, - options: CanonicalizeOptions = DEFAULT_CANONICALIZATION_OPTIONS, - ) { - candidate = prepare(candidate) - expected = prepare(expected) - - if (strategy === 'prefix') { - input = input.replace("@import 'tailwindcss';", "@import 'tailwindcss' prefix(tw);") - } - - let designSystem = await designSystems.get(__dirname).get(input) - let [actual] = designSystem.canonicalizeCandidates([candidate], options) - - try { - expect(actual).toBe(expected) - } catch (err) { - if (err instanceof Error) Error.captureStackTrace(err, expectCanonicalization) - throw err - } - } - - async function expectCombinedCanonicalization( input: string, candidates: string, expected: string, @@ -135,179 +111,190 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', try { expect(actual).toEqual(preparedExpected) } catch (err) { - if (err instanceof Error) Error.captureStackTrace(err, expectCombinedCanonicalization) + if (err instanceof Error) Error.captureStackTrace(err, expectCanonicalization) throw err } } /// ---------------------------------- - test.each([ - /// Legacy bg-gradient-* → bg-linear-* - ['bg-gradient-to-t', 'bg-linear-to-t'], - ['bg-gradient-to-tr', 'bg-linear-to-tr'], - ['bg-gradient-to-r', 'bg-linear-to-r'], - ['bg-gradient-to-br', 'bg-linear-to-br'], - ['bg-gradient-to-b', 'bg-linear-to-b'], - ['bg-gradient-to-bl', 'bg-linear-to-bl'], - ['bg-gradient-to-l', 'bg-linear-to-l'], - ['bg-gradient-to-tl', 'bg-linear-to-tl'], - - /// theme(…) to `var(…)` - // Keep candidates that don't contain `theme(…)` or `theme(…, …)` - ['[color:red]', 'text-[red]'], - - // Handle special cases around `.1` in the `theme(…)` - ['[--value:theme(spacing.1)]', '[--value:--spacing(1)]'], - ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'], - ['[--value:theme(spacing[1.25])]', '[--value:--spacing(1.25)]'], - - // Should not convert invalid spacing values to calc - ['[--value:theme(spacing[1.1])]', '[--value:theme(spacing[1.1])]'], - - // Convert to `var(…)` if we can resolve the path - ['[color:theme(colors.red.500)]', 'text-red-500'], // Arbitrary property - ['[color:theme(colors.red.500)]/50', 'text-red-500/50'], // Arbitrary property + modifier - ['bg-[theme(colors.red.500)]', 'bg-red-500'], // Arbitrary value - ['bg-[size:theme(spacing.4)]', 'bg-size-[--spacing(4)]'], // Arbitrary value + data type hint - - // Pretty print CSS functions preceded by an operator to prevent consecutive - // operator characters. - ['w-[calc(100dvh-theme(spacing.2))]', 'w-[calc(100dvh-(--spacing(2)))]'], - ['w-[calc(100dvh+theme(spacing.2))]', 'w-[calc(100dvh+(--spacing(2)))]'], - ['w-[calc(100dvh/theme(spacing.2))]', 'w-[calc(100dvh/(--spacing(2)))]'], - ['w-[calc(100dvh*theme(spacing.2))]', 'w-[calc(100dvh*(--spacing(2)))]'], - - // Convert to `var(…)` if we can resolve the path, but keep fallback values - ['bg-[theme(colors.red.500,red)]', 'bg-(--color-red-500,red)'], - - // Keep `theme(…)` if we can't resolve the path - ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'], - - // Keep `theme(…)` if we can't resolve the path, but still try to convert the - // fallback value. - ['bg-[theme(colors.foo.1000,theme(colors.red.500))]', 'bg-red-500'], - - // Use `theme(…)` (deeply nested) inside of a `calc(…)` function - ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'], - - // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)` - // - Can't convert to `var(…)` because that would lose the modifier. - // - Can't convert to a candidate modifier because there are multiple - // `theme(…)` calls. - // - // If we really want to, we can make a fancy migration that tries to move it - // to a candidate modifier _if_ all `theme(…)` calls use the same modifier. - [ - '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]', - 'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]', - ], - [ - '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50', - 'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]/50', - ], - - // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`), - // to a candidate modifier. - // Arbitrary property, with simple percentage modifier - ['[color:theme(colors.red.500/75%)]', 'text-red-500/75'], - - // Arbitrary property, with numbers (0-1) without a unit - ['[color:theme(colors.red.500/.12)]', 'text-red-500/12'], - ['[color:theme(colors.red.500/0.12)]', 'text-red-500/12'], - - // Arbitrary property, with more complex modifier (we only allow whole numbers - // as bare modifiers). Convert the complex numbers to arbitrary values instead. - ['[color:theme(colors.red.500/12.34%)]', 'text-red-500/[12.34%]'], - ['[color:theme(colors.red.500/var(--opacity))]', 'text-red-500/(--opacity)'], - ['[color:theme(colors.red.500/.12345)]', 'text-red-500/1234.5'], - ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/50.25'], - - // Arbitrary value - ['bg-[theme(colors.red.500/75%)]', 'bg-red-500/75'], - ['bg-[theme(colors.red.500/12.34%)]', 'bg-red-500/[12.34%]'], - - // Arbitrary property that already contains a modifier - ['[color:theme(colors.red.500/50%)]/50', 'text-[--theme(--color-red-500/50%)]/50'], - - // Values that don't contain only `theme(…)` calls should not be converted to - // use a modifier since the color is not the whole value. - [ - 'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]', - 'shadow-[inset_0px_1px_--theme(--color-white/15%)]', - ], - - // Arbitrary value, where the candidate already contains a modifier - // This should still migrate the `theme(…)` syntax to the modern syntax. - ['bg-[theme(colors.red.500/50%)]/50', 'bg-[--theme(--color-red-500/50%)]/50'], - - // Variants, we can't use `var(…)` especially inside of `@media(…)`. We can - // still upgrade the `theme(…)` to the modern syntax. - ['max-[theme(screens.lg)]:flex', 'max-[--theme(--breakpoint-lg)]:flex'], - // There are no variables for `--spacing` multiples, so we can't convert this - ['max-[theme(spacing.4)]:flex', 'max-[theme(spacing.4)]:flex'], - - // This test in itself doesn't make much sense. But we need to make sure - // that this doesn't end up as the modifier in the candidate itself. - ['max-[theme(spacing.4/50)]:flex', 'max-[theme(spacing.4/50)]:flex'], - - // `theme(…)` calls in another CSS function is replaced correctly. - // Additionally we remove unnecessary whitespace. - ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,--spacing(80))_auto]'], - - // `calc(var(--spacing)*…)` to `--spacing(…)` - ['pt-[min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'], - ['pt-[min(20%,calc(var(--spacing)*var(--other)))]', 'pt-[min(20%,--spacing(var(--other)))]'], - ['pt-[calc(var(--spacing)*8)]', 'pt-8'], - ['pt-[calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'], - - ['[padding-top:min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'], - [ - '[padding-top:min(20%,calc(var(--spacing)*var(--other)))]', - 'pt-[min(20%,--spacing(var(--other)))]', - ], - ['[padding-top:calc(var(--spacing)*8)]', 'pt-8'], - ['[padding-top:calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'], - - // `theme(…)` calls valid in v3, but not in v4 should still be converted. - ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'], - - // Renamed theme keys - ['max-w-[theme(screens.md)]', 'max-w-(--breakpoint-md)'], - ['w-[theme(maxWidth.md)]', 'w-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'], - - // Partially invalid cases - [ - '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]', - '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]', - ], - [ - '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]/50', - '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50', - ], - - // If a utility sets `property` and `--tw-{property}` with the same value, - // we can ignore the `--tw-{property}`. This is just here for composition. - // This means that we should be able to upgrade the one _without_ to the one - // _with_ the variable - ['[font-weight:400]', 'font-normal'], - ['[line-height:0]', 'leading-0'], - ['[border-style:solid]', 'border-solid'], - ])(testName, { timeout }, async (candidate, expected) => { - await expectCanonicalization( - css` + describe('deprecated utilities', () => { + test.each([ + /// Legacy bg-gradient-* → bg-linear-* + ['bg-gradient-to-t', 'bg-linear-to-t'], + ['bg-gradient-to-tr', 'bg-linear-to-tr'], + ['bg-gradient-to-r', 'bg-linear-to-r'], + ['bg-gradient-to-br', 'bg-linear-to-br'], + ['bg-gradient-to-b', 'bg-linear-to-b'], + ['bg-gradient-to-bl', 'bg-linear-to-bl'], + ['bg-gradient-to-l', 'bg-linear-to-l'], + ['bg-gradient-to-tl', 'bg-linear-to-tl'], + ])(testName, { timeout }, async (candidate, expected) => { + let input = css` @import 'tailwindcss'; - `, - candidate, - expected, - ) + ` + + await expectCanonicalization(input, candidate, expected) + }) + + let deprecated: [string, string][] = [ + ['order-none', 'order-0'], + ['break-words', 'wrap-break-word'], + ['overflow-ellipsis', 'text-ellipsis'], + + ['start-full', 'inset-s-full'], + ['-start-full', '-inset-s-full'], + ['start-auto', 'inset-s-auto'], + ['start-px', 'inset-s-px'], + ['-start-px', '-inset-s-px'], + ['start-8', 'inset-s-8'], // Within default spacing scale + ['-start-8', '-inset-s-8'], // Within default spacing scale + ['start-123', 'inset-s-123'], // Outside of default spacing scale + ['-start-123', '-inset-s-123'], // Outside of default spacing scale + + ['end-full', 'inset-e-full'], + ['-end-full', '-inset-e-full'], + ['end-auto', 'inset-e-auto'], + ['end-px', 'inset-e-px'], + ['-end-px', '-inset-e-px'], + ['end-8', 'inset-e-8'], // Within default spacing scale + ['-end-8', '-inset-e-8'], // Within default spacing scale + ['end-123', 'inset-e-123'], // Outside of default spacing scale + ['-end-123', '-inset-e-123'], // Outside of default spacing scale + ] + + test.each(deprecated)(testName, { timeout }, async (candidate, expected) => { + let input = css` + @import 'tailwindcss'; + ` + + await expectCanonicalization(input, candidate, expected) + }) + + describe('With custom implementation', () => { + // Creating a shared CSS file such that we can re-use the same design + // system for all of these. + let customImplementations = deprecated + .map( + ([candidate]) => css` + @utility ${candidate} { + --custom-${randomUUID()}: implementation; + } + `, + ) + .join('\n') + + // Keep the current utility because of the custom implementation + test.each(deprecated.map(([candidate]) => [candidate, candidate]))( + testName, + { timeout }, + async (candidate, expected) => { + let input = css` + @import 'tailwindcss'; + + ${customImplementations} + ` + + await expectCanonicalization(input, candidate, expected) + }, + ) + }) }) - describe('arbitrary utilities', () => { + describe('arbitrary properties', () => { + test.each([ + /// theme(…) to `var(…)` + // Keep candidates that don't contain `theme(…)` or `theme(…, …)` + ['[color:red]', 'text-[red]'], + + // Handle special cases around `.1` in the `theme(…)` + ['[--value:theme(spacing.1)]', '[--value:--spacing(1)]'], + ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'], + ['[--value:theme(spacing[1.25])]', '[--value:--spacing(1.25)]'], + + // Should not convert invalid spacing values to calc + ['[--value:theme(spacing[1.1])]', '[--value:theme(spacing[1.1])]'], + + // Convert to `var(…)` if we can resolve the path + ['[color:theme(colors.red.500)]', 'text-red-500'], // Arbitrary property + ['[color:theme(colors.red.500)]/50', 'text-red-500/50'], // Arbitrary property + modifier + + // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)` + // - Can't convert to `var(…)` because that would lose the modifier. + // - Can't convert to a candidate modifier because there are multiple + // `theme(…)` calls. + // + // If we really want to, we can make a fancy migration that tries to move it + // to a candidate modifier _if_ all `theme(…)` calls use the same modifier. + [ + '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]', + 'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]', + ], + [ + '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50', + 'text-[--theme(--color-red-500/50,--theme(--color-blue-500/50))]/50', + ], + + // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`), + // to a candidate modifier. + // Arbitrary property, with simple percentage modifier + ['[color:theme(colors.red.500/75%)]', 'text-red-500/75'], + + // Arbitrary property, with numbers (0-1) without a unit + ['[color:theme(colors.red.500/.12)]', 'text-red-500/12'], + ['[color:theme(colors.red.500/0.12)]', 'text-red-500/12'], + + // Arbitrary property, with more complex modifier (we only allow whole numbers + // as bare modifiers). Convert the complex numbers to arbitrary values instead. + ['[color:theme(colors.red.500/12.34%)]', 'text-red-500/[12.34%]'], + ['[color:theme(colors.red.500/var(--opacity))]', 'text-red-500/(--opacity)'], + ['[color:theme(colors.red.500/.12345)]', 'text-red-500/1234.5'], + ['[color:theme(colors.red.500/50.25%)]', 'text-red-500/50.25'], + + // Arbitrary property that already contains a modifier + ['[color:theme(colors.red.500/50%)]/50', 'text-[--theme(--color-red-500/50%)]/50'], + + // `calc(var(--spacing)*…)` to `--spacing(…)` + ['[padding-top:min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'], + [ + '[padding-top:min(20%,calc(var(--spacing)*var(--other)))]', + 'pt-[min(20%,--spacing(var(--other)))]', + ], + ['[padding-top:calc(var(--spacing)*8)]', 'pt-8'], + ['[padding-top:calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'], + + // `theme(…)` calls valid in v3, but not in v4 should still be converted. + ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'], + + // 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'], + + // Partially invalid cases + [ + '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]', + '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]', + ], + [ + '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]/50', + '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50', + ], + + // If a utility sets `property` and `--tw-{property}` with the same value, + // we can ignore the `--tw-{property}`. This is just here for composition. + // This means that we should be able to upgrade the one _without_ to the one + // _with_ the variable + ['[font-weight:400]', 'font-normal'], + ['[line-height:0]', 'leading-0'], + ['[border-style:solid]', 'border-solid'], + ])(testName, { timeout }, async (candidate, expected) => { + let input = css` + @import 'tailwindcss'; + ` + + await expectCanonicalization(input, candidate, expected) + }) + test.each([ // Arbitrary property to static utility ['[text-wrap:balance]', 'text-balance'], @@ -318,10 +305,6 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', ['[display:_flex]', 'flex'], ['[display:flex_]', 'flex'], - // Arbitrary property to static utility - // Map number to keyword-like value - ['leading-[1]', 'leading-none'], - // Arbitrary property to named functional utility ['[color:var(--color-red-500)]', 'text-red-500'], ['[background-color:var(--color-red-500)]', 'bg-red-500'], @@ -349,20 +332,6 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', ['[grid-column:2]', 'col-2'], ['[grid-column:1234]', 'col-1234'], - // Arbitrary value to bare value - ['border-[2px]', 'border-2'], - ['border-[1234px]', 'border-1234'], - - // Arbitrary value with data type, to more specific arbitrary value - ['bg-[position:123px]', 'bg-position-[123px]'], - ['bg-[size:123px]', 'bg-size-[123px]'], - - // Arbitrary value with inferred data type, to more specific arbitrary value - ['bg-[123px]', 'bg-position-[123px]'], - - // Arbitrary value with spacing mul - ['w-[64rem]', 'w-256'], - // Complex arbitrary property to arbitrary value [ '[grid-template-columns:repeat(2,minmax(100px,1fr))]', @@ -370,13 +339,6 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', ], // Complex arbitrary property to bare value ['[grid-template-columns:repeat(2,minmax(0,1fr))]', 'grid-cols-2'], - - // Arbitrary value to bare value with percentage - ['from-[25%]', 'from-25%'], - - // Arbitrary percentage value must be a whole number. Should not migrate to - // a bare value. - ['from-[2.5%]', 'from-[2.5%]'], ])(testName, { timeout }, async (candidate, expected) => { let input = css` @import 'tailwindcss'; @@ -393,7 +355,107 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', await expectCanonicalization(input, candidate, expected) }) + }) + describe('arbitrary values', () => { + test.each([ + // Convert to `var(…)` if we can resolve the path + ['bg-[theme(colors.red.500)]', 'bg-red-500'], // Arbitrary value + ['bg-[size:theme(spacing.4)]', 'bg-size-[--spacing(4)]'], // Arbitrary value + data type hint + + // Pretty print CSS functions preceded by an operator to prevent consecutive + // operator characters. + ['w-[calc(100dvh-theme(spacing.2))]', 'w-[calc(100dvh-(--spacing(2)))]'], + ['w-[calc(100dvh+theme(spacing.2))]', 'w-[calc(100dvh+(--spacing(2)))]'], + ['w-[calc(100dvh/theme(spacing.2))]', 'w-[calc(100dvh/(--spacing(2)))]'], + ['w-[calc(100dvh*theme(spacing.2))]', 'w-[calc(100dvh*(--spacing(2)))]'], + + // Convert to `var(…)` if we can resolve the path, but keep fallback values + ['bg-[theme(colors.red.500,red)]', 'bg-(--color-red-500,red)'], + + // Keep `theme(…)` if we can't resolve the path + ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'], + + // Keep `theme(…)` if we can't resolve the path, but still try to convert the + // fallback value. + ['bg-[theme(colors.foo.1000,theme(colors.red.500))]', 'bg-red-500'], + + // Use `theme(…)` (deeply nested) inside of a `calc(…)` function + ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'], + + // Arbitrary value + ['bg-[theme(colors.red.500/75%)]', 'bg-red-500/75'], + ['bg-[theme(colors.red.500/12.34%)]', 'bg-red-500/[12.34%]'], + + // Values that don't contain only `theme(…)` calls should not be converted to + // use a modifier since the color is not the whole value. + [ + 'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]', + 'shadow-[inset_0px_1px_--theme(--color-white/15%)]', + ], + + // Arbitrary value, where the candidate already contains a modifier + // This should still migrate the `theme(…)` syntax to the modern syntax. + ['bg-[theme(colors.red.500/50%)]/50', 'bg-[--theme(--color-red-500/50%)]/50'], + + // Variants, we can't use `var(…)` especially inside of `@media(…)`. We can + // still upgrade the `theme(…)` to the modern syntax. + ['max-[theme(screens.lg)]:flex', 'max-[--theme(--breakpoint-lg)]:flex'], + // There are no variables for `--spacing` multiples, so we can't convert this + ['max-[theme(spacing.4)]:flex', 'max-[theme(spacing.4)]:flex'], + + // This test in itself doesn't make much sense. But we need to make sure + // that this doesn't end up as the modifier in the candidate itself. + ['max-[theme(spacing.4/50)]:flex', 'max-[theme(spacing.4/50)]:flex'], + + // `theme(…)` calls in another CSS function is replaced correctly. + // Additionally we remove unnecessary whitespace. + ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,--spacing(80))_auto]'], + + // `calc(var(--spacing)*…)` to `--spacing(…)` + ['pt-[min(20%,calc(var(--spacing)*8))]', 'pt-[min(20%,--spacing(8))]'], + ['pt-[min(20%,calc(var(--spacing)*var(--other)))]', 'pt-[min(20%,--spacing(var(--other)))]'], + ['pt-[calc(var(--spacing)*8)]', 'pt-8'], + ['pt-[calc(var(--spacing)*var(--other))]', 'pt-[--spacing(var(--other))]'], + + // Renamed theme keys + ['max-w-[theme(screens.md)]', 'max-w-(--breakpoint-md)'], + ['w-[theme(maxWidth.md)]', 'w-md'], + + // Arbitrary property to static utility + // Map number to keyword-like value + ['leading-[1]', 'leading-none'], + + // Arbitrary value to bare value + ['border-[2px]', 'border-2'], + ['border-[1234px]', 'border-1234'], + + // Arbitrary value with data type, to more specific arbitrary value + ['bg-[position:123px]', 'bg-position-[123px]'], + ['bg-[size:123px]', 'bg-size-[123px]'], + + // Arbitrary value with inferred data type, to more specific arbitrary value + ['bg-[123px]', 'bg-position-[123px]'], + + // Arbitrary value with spacing mul + ['w-[64rem]', 'w-256'], + + // Arbitrary value to bare value with percentage + ['from-[25%]', 'from-25%'], + + // Arbitrary percentage value must be a whole number. Should not migrate to + // a bare value. + ['from-[2.5%]', 'from-[2.5%]'], + ])(testName, { timeout }, async (candidate, expected) => { + let input = css` + @import 'tailwindcss'; + ` + + await expectCanonicalization(input, candidate, expected) + }) + }) + + describe('arbitrary utilities', () => { test('migrate with custom static utility `@utility custom {…}`', { timeout }, async () => { let candidate = '[--key:value]' let expected = 'custom' @@ -611,71 +673,6 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', }) }) - describe('deprecated utilities', () => { - let deprecated: [string, string][] = [ - ['order-none', 'order-0'], - ['break-words', 'wrap-break-word'], - ['overflow-ellipsis', 'text-ellipsis'], - - ['start-full', 'inset-s-full'], - ['-start-full', '-inset-s-full'], - ['start-auto', 'inset-s-auto'], - ['start-px', 'inset-s-px'], - ['-start-px', '-inset-s-px'], - ['start-8', 'inset-s-8'], // Within default spacing scale - ['-start-8', '-inset-s-8'], // Within default spacing scale - ['start-123', 'inset-s-123'], // Outside of default spacing scale - ['-start-123', '-inset-s-123'], // Outside of default spacing scale - - ['end-full', 'inset-e-full'], - ['-end-full', '-inset-e-full'], - ['end-auto', 'inset-e-auto'], - ['end-px', 'inset-e-px'], - ['-end-px', '-inset-e-px'], - ['end-8', 'inset-e-8'], // Within default spacing scale - ['-end-8', '-inset-e-8'], // Within default spacing scale - ['end-123', 'inset-e-123'], // Outside of default spacing scale - ['-end-123', '-inset-e-123'], // Outside of default spacing scale - ] - - test.each(deprecated)(testName, { timeout }, async (candidate, expected) => { - let input = css` - @import 'tailwindcss'; - ` - - await expectCanonicalization(input, candidate, expected) - }) - - describe('With custom implementation', () => { - // Creating a shared CSS file such that we can re-use the same design - // system for all of these. - let customImplementations = deprecated - .map( - ([candidate]) => css` - @utility ${candidate} { - --custom-${randomUUID()}: implementation; - } - `, - ) - .join('\n') - - // Keep the current utility because of the custom implementation - test.each(deprecated.map(([candidate]) => [candidate, candidate]))( - testName, - { timeout }, - async (candidate, expected) => { - let input = css` - @import 'tailwindcss'; - - ${customImplementations} - ` - - await expectCanonicalization(input, candidate, expected) - }, - ) - }) - }) - describe('arbitrary variants', () => { let input = css` @import 'tailwindcss'; @@ -1096,7 +1093,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', let input = css` @import 'tailwindcss'; ` - await expectCombinedCanonicalization(input, candidates, expected) + await expectCanonicalization(input, candidates, expected) }) }) @@ -1130,7 +1127,7 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', let input = css` @import 'tailwindcss'; ` - await expectCombinedCanonicalization(input, candidates.trim(), expected) + await expectCanonicalization(input, candidates.trim(), expected) }) }) @@ -1242,115 +1239,120 @@ describe('options', () => { }) }) -// https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/321 -test('a subset of classes should be canonicalizable', { timeout }, async () => { - let designSystem = await designSystems.get(__dirname).get(css` - @import 'tailwindcss'; - `) +describe('regressions', () => { + // https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/321 + { + test('a subset of classes should be canonicalizable', { timeout }, async () => { + let designSystem = await designSystems.get(__dirname).get(css` + @import 'tailwindcss'; + `) - let options: CanonicalizeOptions = { - collapse: true, - logicalToPhysical: true, - rem: 16, + let options: CanonicalizeOptions = { + collapse: true, + logicalToPhysical: true, + rem: 16, + } + + expect( + designSystem.canonicalizeCandidates(['underline', 'h-4', 'w-4', 'text-sm'], options), + ).toEqual(['underline', 'text-sm', 'size-4']) + }) + + test('collapse canonicalization is not affected by previous calls', { timeout }, async () => { + let designSystem = await designSystems.get(__dirname).get(css` + @import 'tailwindcss'; + `) + + let options: CanonicalizeOptions = { + collapse: true, + logicalToPhysical: true, + rem: 16, + } + + let target = ['underline', 'h-4', 'w-4'] + + expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4']) + + designSystem.canonicalizeCandidates(['mb-4', 'text-sm'], options) + designSystem.canonicalizeCandidates(['underline', 'mb-4'], options) + + expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4']) + expect(designSystem.canonicalizeCandidates(target.concat('text-sm'), options)).toEqual([ + 'underline', + 'text-sm', + 'size-4', + ]) + }) } - expect( - designSystem.canonicalizeCandidates(['underline', 'h-4', 'w-4', 'text-sm'], options), - ).toEqual(['underline', 'text-sm', 'size-4']) + // https://github.com/tailwindlabs/tailwindcss/pull/19727 + test( + 'collapse does not crash when utilities with no standard properties are present', + { timeout }, + async () => { + let designSystem = await designSystems.get(__dirname).get(css` + @import 'tailwindcss'; + `) + + let options: CanonicalizeOptions = { + collapse: true, + logicalToPhysical: true, + rem: 16, + } + + // Shadow utilities use CSS custom properties and @property rules but may + // produce empty property maps in the collapse algorithm. This should not + // crash with "Cannot read properties of null" or "X is not iterable". + expect(() => + designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options), + ).not.toThrow() + + expect(() => designSystem.canonicalizeCandidates(['shadow-md', 'p-4'], options)).not.toThrow() + + expect(() => + designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options), + ).not.toThrow() + + // Verify the candidates are returned (not collapsed, since shadows can't + // meaningfully collapse with unrelated utilities) + expect(designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options)).toEqual( + expect.arrayContaining(['shadow-sm', 'border']), + ) + + expect(designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options)).toEqual( + expect.arrayContaining(['shadow-sm', 'shadow-md']), + ) + }, + ) + + // https://github.com/tailwindlabs/tailwindcss/issues/19835 + test.each([ + // Arbitrary values should be collapsed to another arbitrary value + [ + ['px-[1.2rem]', 'py-[1.2rem]', 'text-left'], + ['text-left', 'p-[1.2rem]'], + ], + + // Arbitrary values could also be collapsed into a bare value + [ + ['px-[30.75rem]', 'py-[30.75rem]', 'text-left'], + ['text-left', 'p-123'], + ], + ])( + 'collapse canonicalization works for arbitrary values', + { timeout }, + async (candidates, expected) => { + let designSystem = await designSystems.get(__dirname).get(css` + @import 'tailwindcss'; + `) + + let options: CanonicalizeOptions = { + collapse: true, + logicalToPhysical: true, + rem: 16, + } + + expect(designSystem.canonicalizeCandidates(candidates, options)).toEqual(expected) + }, + ) }) - -test('collapse canonicalization is not affected by previous calls', { timeout }, async () => { - let designSystem = await designSystems.get(__dirname).get(css` - @import 'tailwindcss'; - `) - - let options: CanonicalizeOptions = { - collapse: true, - logicalToPhysical: true, - rem: 16, - } - - let target = ['underline', 'h-4', 'w-4'] - - expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4']) - - designSystem.canonicalizeCandidates(['mb-4', 'text-sm'], options) - designSystem.canonicalizeCandidates(['underline', 'mb-4'], options) - - expect(designSystem.canonicalizeCandidates(target, options)).toEqual(['underline', 'size-4']) - expect(designSystem.canonicalizeCandidates(target.concat('text-sm'), options)).toEqual([ - 'underline', - 'text-sm', - 'size-4', - ]) -}) - -test( - 'collapse does not crash when utilities with no standard properties are present', - { timeout }, - async () => { - let designSystem = await designSystems.get(__dirname).get(css` - @import 'tailwindcss'; - `) - - let options: CanonicalizeOptions = { - collapse: true, - logicalToPhysical: true, - rem: 16, - } - - // Shadow utilities use CSS custom properties and @property rules but may - // produce empty property maps in the collapse algorithm. This should not - // crash with "Cannot read properties of null" or "X is not iterable". - expect(() => - designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options), - ).not.toThrow() - - expect(() => designSystem.canonicalizeCandidates(['shadow-md', 'p-4'], options)).not.toThrow() - - expect(() => - designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options), - ).not.toThrow() - - // Verify the candidates are returned (not collapsed, since shadows can't - // meaningfully collapse with unrelated utilities) - expect(designSystem.canonicalizeCandidates(['shadow-sm', 'border'], options)).toEqual( - expect.arrayContaining(['shadow-sm', 'border']), - ) - - expect(designSystem.canonicalizeCandidates(['shadow-sm', 'shadow-md'], options)).toEqual( - expect.arrayContaining(['shadow-sm', 'shadow-md']), - ) - }, -) - -// https://github.com/tailwindlabs/tailwindcss/issues/19835 -test.each([ - // Arbitrary values should be collapsed to another arbitrary value - [ - ['px-[1.2rem]', 'py-[1.2rem]', 'text-left'], - ['text-left', 'p-[1.2rem]'], - ], - - // Arbitrary values could also be collapsed into a bare value - [ - ['px-[30.75rem]', 'py-[30.75rem]', 'text-left'], - ['text-left', 'p-123'], - ], -])( - 'collapse canonicalization works for arbitrary values', - { timeout }, - async (candidates, expected) => { - let designSystem = await designSystems.get(__dirname).get(css` - @import 'tailwindcss'; - `) - - let options: CanonicalizeOptions = { - collapse: true, - logicalToPhysical: true, - rem: 16, - } - - expect(designSystem.canonicalizeCandidates(candidates, options)).toEqual(expected) - }, -) From df6209ab8b957e56e6e00042a3e4080c14a072ea Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 26 Mar 2026 14:44:09 +0100 Subject: [PATCH 16/17] Canonicalize negative arbitrary values (#19858) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds a few more canonicalizations for some cases I noticed on our templates. When dealing with arbitrary values, and the utility is a "negative" utility, then we will try to put the `-` inside of the arbitrary value: ```diff - -left-[9rem] + left-[-9rem] ``` The idea is that the arbitrary value is already an escape hatch for when a value is not available by default. The `-` in front uses an implicit `calc( * -1)` which might be confusion if you have an value like this already. This also can allow for some further optimizations. For example ```diff - -mt-[492px] ↓↓↓↓↓↓↓ Into a simpler arbitrary value + mt-[-492px] ↓↓↓↓↓↓↓ Into a bare value + mt-123 ``` This PR also improve the constant folding of calc expressions a bit more such that nested calc expressions with 2 constants and an unknown can be folded. Bit of a mouthful, but it allows us to handle this: ```diff - mt-[calc(-1*calc(-1*var(--foo)))] ↓↓↓↓↓↓↓ The -1 * -1 becomes a no-op + mt-[var(--foo)] ↓↓↓↓↓↓↓ Into the shorthand for CSS variables + mt-(--foo) ``` Now that we can handle moving the `-` into the arbitrary value, there are also cases where we can get the `-` _out_ of the arbitrary value: ```diff - mt-[calc(-1*var(--foo))] ↓↓↓↓↓↓↓ Simplify calc, move `-` to the front + -mt-[var(--foo)] ↓↓↓↓↓↓↓ Into the shorthand for CSS variables + -mt-(--foo) ``` Another missing piece that this PR adds is the concept of canonicalizing or normalizing calc expressions. This is a separate step used when calculating the signature for each utility. This allows us to normalize `calc(-1*var(--foo))` and `calc(var(--foo)*-1)`. Without this they would not be considered the same, but not it will. It's only used when comparing values, it won't unify the actual arbitrary values with this logic (at least for now). With the additional constant folding logic and the canonicalization when comparing signatures it unlocks the necessary power to perform the above transformations. ## Test plan 1. Existing tests still pass 2. Added additional tests for the constant folding logic 3. Added tests for the canonicalization of calc expressions 4. Added new tests where we move the `-` inside the value, or move the `-` outside of the arbitrary value. --- CHANGELOG.md | 2 + .../src/canonicalize-calc-expressions.test.ts | 24 +++ .../src/canonicalize-calc-expressions.ts | 82 +++++++++ .../src/canonicalize-candidates.test.ts | 22 +++ .../src/canonicalize-candidates.ts | 154 +++++++++++++++-- .../src/constant-fold-declaration.test.ts | 22 +++ .../src/constant-fold-declaration.ts | 156 +++++++++++++++++- 7 files changed, 438 insertions(+), 24 deletions(-) create mode 100644 packages/tailwindcss/src/canonicalize-calc-expressions.test.ts create mode 100644 packages/tailwindcss/src/canonicalize-calc-expressions.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 8bc36b4c7..89c462fc1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: migrate `overflow-ellipsis` into `text-ellipsis` ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) - Canonicalization: migrate `start-full` → `inset-s-full`, `start-auto` → `inset-s-auto`, `start-px` → `inset-s-px`, and `start-` → `inset-s-` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) - Canonicalization: migrate `end-full` → `inset-e-full`, `end-auto` → `inset-e-auto`, `end-px` → `inset-e-px`, and `end-` → `inset-e-` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) +- Canonicalization: move the `-` sign inside the arbitrary value `-left-[9rem]` → `left-[-9rem]` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858)) +- Canonicalization: move the `-` sign outside the arbitrary value `ml-[calc(-1*var(--width))]` → `-ml-(--width)` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858)) ## [4.2.2] - 2026-03-18 diff --git a/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts b/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts new file mode 100644 index 000000000..f612e5f7b --- /dev/null +++ b/packages/tailwindcss/src/canonicalize-calc-expressions.test.ts @@ -0,0 +1,24 @@ +import { expect, it } from 'vitest' +import { canonicalizeCalcExpressions } from './canonicalize-calc-expressions' + +it.each([ + ['calc(-1 * var(--foo))', 'calc(var(--foo) * -1)'], + ['calc(1rem + var(--foo))', 'calc(var(--foo) + 1rem)'], + ['calc(2rem * calc(3px * var(--foo)))', 'calc(calc(var(--foo) * 3px) * 2rem)'], + ['calc(var(--b) + var(--a))', 'calc(var(--a) + var(--b))'], + ['calc(3px * 2rem)', 'calc(2rem * 3px)'], + ['calc(5px * 3px)', 'calc(3px * 5px)'], + ['calc(1 * 1rem)', 'calc(1rem * 1)'], + ['calc(10 + 2)', 'calc(2 + 10)'], +])('`%s` → `%s` (%#)', (input, expected) => { + expect(canonicalizeCalcExpressions(input)).toBe(expected) +}) + +it.each([ + ['calc(1rem - var(--foo))'], + ['calc(1rem / 2)'], + ['calc(var(--a) + 1rem)'], + ['calc(2rem * 3px)'], +])('should keep `%s` (%#)', (input) => { + expect(canonicalizeCalcExpressions(input)).toBe(input) +}) diff --git a/packages/tailwindcss/src/canonicalize-calc-expressions.ts b/packages/tailwindcss/src/canonicalize-calc-expressions.ts new file mode 100644 index 000000000..7e08f8622 --- /dev/null +++ b/packages/tailwindcss/src/canonicalize-calc-expressions.ts @@ -0,0 +1,82 @@ +import { dimensions } from './utils/dimensions' +import * as ValueParser from './value-parser' +import { walk, WalkAction } from './walk' + +// Assumption: We already assume that we receive somewhat valid `calc()` +// expressions. So we will see `calc(1 + 1)` and not `calc(1+1)` +export function canonicalizeCalcExpressions(input: string): string { + let [canonicalized, valueAst] = canonicalizeCalcExpressionsAst(ValueParser.parse(input)) + + return canonicalized ? ValueParser.toCss(valueAst) : input +} + +export function canonicalizeCalcExpressionsAst( + ast: ValueParser.ValueAstNode[], +): [canonicalized: boolean, ast: ValueParser.ValueAstNode[]] { + let canonicalized = false + + walk(ast, { + exit(valueNode) { + // We are only interested in binary expressions in `calc(…)` and `(…)`, + // and only with the `*` or `+` operators. + if (valueNode.kind !== 'function') return + if (valueNode.value !== 'calc' && valueNode.value !== '') return + if (valueNode.nodes.length !== 5) return + if (valueNode.nodes[2].kind !== 'word') return + if (valueNode.nodes[2].value !== '*' && valueNode.nodes[2].value !== '+') return + + let lhs = valueNode.nodes[0] + let rhs = valueNode.nodes[4] + + if (shouldSwap(lhs, rhs)) { + canonicalized = true + + let replacement: ValueParser.ValueFunctionNode = { + kind: 'function', + value: valueNode.value, + nodes: [ + rhs, // Now lhs + valueNode.nodes[1], // Separator + valueNode.nodes[2], // Operator + valueNode.nodes[3], // Separator + lhs, // Now rhs + ], + } + + return WalkAction.ReplaceSkip(replacement) + } + }, + }) + + return [canonicalized, ast] +} + +function shouldSwap(lhs: ValueParser.ValueAstNode, rhs: ValueParser.ValueAstNode): boolean { + let lhsDimension = lhs.kind === 'word' ? dimensions.get(lhs.value) : null + let rhsDimension = rhs.kind === 'word' ? dimensions.get(rhs.value) : null + + if (lhsDimension !== null && rhsDimension === null) return true + if (lhsDimension === null && rhsDimension !== null) return false + + if (lhsDimension !== null && rhsDimension !== null) { + let [lhsValue, lhsUnit] = lhsDimension + let [rhsValue, rhsUnit] = rhsDimension + + // Within dimensions, keep unit-bearing values ahead of unitless numbers so + // `1rem` sorts before `1`. + if (lhsUnit === null && rhsUnit !== null) return true + if (lhsUnit !== null && rhsUnit === null) return false + + // Then sort dimensions numerically, and finally by unit for ties. + if (lhsValue !== rhsValue) { + return lhsValue - rhsValue > 0 + } + + if (lhsUnit !== rhsUnit) { + return (lhsUnit ?? '').localeCompare(rhsUnit ?? '') > 0 + } + } + + // Both nodes are unknown values (not dimensions), sort them as strings + return ValueParser.toCss([lhs]).localeCompare(ValueParser.toCss([rhs])) > 0 +} diff --git a/packages/tailwindcss/src/canonicalize-candidates.test.ts b/packages/tailwindcss/src/canonicalize-candidates.test.ts index 810232e55..df029834f 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.test.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.test.ts @@ -446,6 +446,28 @@ describe.each([['default'], ['with-variant'], ['important'], ['prefix']])('%s', // Arbitrary percentage value must be a whole number. Should not migrate to // a bare value. ['from-[2.5%]', 'from-[2.5%]'], + + // Negative arbitrary values can be simplified + // 1. Try to move the sign _inside_ the arbitrary value + // 2. Try to move the sign _out_ of the arbitrary value + ['-mt-[12rem]', '-mt-48'], // Arbitrary value → bare value + ['-mt-[-12rem]', 'mt-48'], // Double negation + ['-mt-[12.34rem]', 'mt-[-12.34rem]'], // Move `-` inside + ['-mt-[-12.34rem]', 'mt-[12.34rem]'], // Move `-` inside, double negation + ['-mt-[12.34px]', 'mt-[-12.34px]'], + ['-mt-[-12.34px]', 'mt-[12.34px]'], + ['-mt-[492px]', '-mt-123'], // Moving inside, allows us to migrate to a bare value + ['-mt-[calc(-1*492px)]', 'mt-123'], // Double negation and constant folding into bare value + ['-mt-[-492px]', 'mt-123'], + ['-mt-[calc(-1*-492px)]', '-mt-123'], // Constant folding with calc expressions + ['-mt-(--my-var)', '-mt-(--my-var)'], // Keep as-is + ['-mt-[var(--my-var)]', '-mt-(--my-var)'], // Keep as-is, but convert to shorthand + ['mt-[calc(var(--my-var)*-1)]', '-mt-(--my-var)'], // Move `-` out + ['mt-[calc(-1*var(--my-var))]', '-mt-(--my-var)'], // Move `-` out + ['-mt-[calc(var(--my-var)*-1)]', 'mt-(--my-var)'], // Move `-` out + ['-mt-[calc(-1*var(--my-var))]', 'mt-(--my-var)'], // Move `-` out + ['mt-[calc(-1*calc(-1*var(--my-var)))]', 'mt-(--my-var)'], // Move `-` out + ['-mt-[calc(-1*calc(-1*var(--my-var)))]', '-mt-(--my-var)'], // Move `-` out ])(testName, { timeout }, async (candidate, expected) => { let input = css` @import 'tailwindcss'; diff --git a/packages/tailwindcss/src/canonicalize-candidates.ts b/packages/tailwindcss/src/canonicalize-candidates.ts index c9f0274b3..f7f49e3a3 100644 --- a/packages/tailwindcss/src/canonicalize-candidates.ts +++ b/packages/tailwindcss/src/canonicalize-candidates.ts @@ -11,8 +11,9 @@ import { type NamedUtilityValue, type Variant, } from './candidate' +import { canonicalizeCalcExpressionsAst } from './canonicalize-calc-expressions' import { keyPathToCssProperty } from './compat/apply-config-to-theme' -import { constantFoldDeclaration } from './constant-fold-declaration' +import { constantFoldDeclaration, constantFoldDeclarationAst } from './constant-fold-declaration' import type { DesignSystem as BaseDesignSystem } from './design-system' import { CompileAstFlags } from './design-system' import { expandDeclaration } from './expand-declaration' @@ -77,6 +78,10 @@ interface DesignSystem extends BaseDesignSystem { number | null, // Rem value DefaultMap > + [COMPARE_CANDIDATES_KEY]: DefaultMap< + SignatureOptions, + (a: Candidate | string, b: Candidate | string) => boolean + > [INTERNAL_OPTIONS_KEY]: DefaultMap< SignatureOptions, DefaultMap @@ -126,6 +131,7 @@ export function prepareDesignSystemStorage( designSystem.storage[PRE_COMPUTED_UTILITIES_KEY] ??= createPreComputedUtilitiesCache(designSystem) designSystem.storage[VARIANT_SIGNATURE_KEY] ??= createVariantSignatureCache(designSystem) designSystem.storage[PRE_COMPUTED_VARIANTS_KEY] ??= createPreComputedVariantsCache(designSystem) + designSystem.storage[COMPARE_CANDIDATES_KEY] ??= createSignatureComparison(designSystem) return designSystem } @@ -139,6 +145,25 @@ function createSignatureOptionsCache(): DesignSystem['storage'][typeof SIGNATURE }) } +const COMPARE_CANDIDATES_KEY = Symbol() +function createSignatureComparison(designSystem: DesignSystem) { + return new DefaultMap((options: SignatureOptions) => { + let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options) + + return function hasSameSignature(a: Candidate | string, b: Candidate | string): boolean { + let aCandidateString = typeof a === 'string' ? a : designSystem.printCandidate(a) + let aSignature = signatures.get(aCandidateString) + if (typeof aSignature !== 'string') return false + + let bCandidateString = typeof b === 'string' ? b : designSystem.printCandidate(b) + let bSignature = signatures.get(bCandidateString) + if (typeof bSignature !== 'string') return false + + return aSignature === bSignature + } + }) +} + export function createSignatureOptions( baseDesignSystem: BaseDesignSystem, options?: CanonicalizeOptions, @@ -574,6 +599,7 @@ const UTILITY_CANONICALIZATIONS: UtilityCanonicalizationFunction[] = [ bgGradientToLinear, themeToVarUtility, calcToSpacingFunction, + optimizeArbitraryValueExpressions, arbitraryUtilities, bareValueUtilities, deprecatedUtilities, @@ -1092,6 +1118,7 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO let designSystem = options.designSystem let utilities = designSystem.storage[PRE_COMPUTED_UTILITIES_KEY].get(options.signatureOptions) let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions) + let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions) let targetCandidateString = designSystem.printCandidate(candidate) @@ -1101,9 +1128,7 @@ function arbitraryUtilities(candidate: Candidate, options: InternalCanonicalizeO // Try a few options to find a suitable replacement utility for (let replacementCandidate of tryReplacements(targetSignature, candidate)) { - let replacementString = designSystem.printCandidate(replacementCandidate) - let replacementSignature = signatures.get(replacementString) - if (replacementSignature !== targetSignature) { + if (!hasSameSignature(candidate, replacementCandidate)) { continue } @@ -1340,6 +1365,7 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO let designSystem = options.designSystem let utilities = designSystem.storage[PRE_COMPUTED_UTILITIES_KEY].get(options.signatureOptions) let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions) + let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions) let targetCandidateString = designSystem.printCandidate(candidate) @@ -1349,9 +1375,7 @@ function bareValueUtilities(candidate: Candidate, options: InternalCanonicalizeO // Try a few options to find a suitable replacement utility for (let replacementCandidate of tryReplacements(targetSignature, candidate)) { - let replacementString = designSystem.printCandidate(replacementCandidate) - let replacementSignature = signatures.get(replacementString) - if (replacementSignature !== targetSignature) { + if (!hasSameSignature(candidate, replacementCandidate)) { continue } @@ -1454,19 +1478,14 @@ function deprecatedUtilities( options: InternalCanonicalizeOptions, ): Candidate { let designSystem = options.designSystem - let signatures = designSystem.storage[UTILITY_SIGNATURE_KEY].get(options.signatureOptions) + let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions) let targetCandidateString = printUnprefixedCandidate(designSystem, candidate) - let legacySignature = signatures.get(targetCandidateString) - if (typeof legacySignature !== 'string') return candidate - for (let replacementString of tryDeprecatedUtilities(targetCandidateString)) { - let replacementSignature = signatures.get(replacementString) - if (typeof replacementSignature !== 'string') continue - - // Not the same signature, not safe to migrate - if (legacySignature !== replacementSignature) continue + if (!hasSameSignature(candidate, replacementString)) { + continue + } let [replacement] = parseCandidate(designSystem, replacementString) return replacement @@ -2081,6 +2100,95 @@ function modernizeArbitraryValuesVariant( return result } +// --- + +function optimizeArbitraryValueExpressions( + candidate: Candidate, + options: InternalCanonicalizeOptions, +): Candidate { + if (candidate.kind !== 'functional' || candidate.value?.kind !== 'arbitrary') { + return candidate + } + + let designSystem = options.designSystem + let hasSameSignature = designSystem.storage[COMPARE_CANDIDATES_KEY].get(options.signatureOptions) + + let valueAst = ValueParser.parse(candidate.value.value) + + // Start by constant folding the value expression, when dealing with `calc(…)` + if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'calc') { + let [folded, foldedValueAst] = constantFoldDeclarationAst(valueAst) + if (folded) { + let replacement = cloneCandidate(candidate) + replacement.value!.value = ValueParser.toCss(foldedValueAst) + + if (hasSameSignature(candidate, replacement)) { + candidate = replacement + valueAst = foldedValueAst + } + } + } + + // Move `-` sign into the arbitrary value itself + if (candidate.root[0] === '-') { + // We're dealing with a `var(…)`, keep as-is + if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'var') { + return candidate + } + + // Move `* -1` inside, and try to constant fold to see if it's even worth + // updating the candidate or not. + let expressionAst = ValueParser.parse(`calc(${candidate.value!.value} * -1)`) + let [folded, foldedExpressionAst] = constantFoldDeclarationAst(expressionAst) + if (folded) { + let replacement = cloneCandidate(candidate) + + replacement.root = replacement.root.slice(1) // Drop the leading `-` + replacement.value!.value = ValueParser.toCss(foldedExpressionAst) + + if (hasSameSignature(candidate, replacement)) { + candidate = replacement + valueAst = foldedExpressionAst + } + } + } + + // Move `-` sign out of the arbitrary value + if (valueAst.length === 1 && valueAst[0].kind === 'function' && valueAst[0].value === 'calc') { + let calcArgs = valueAst[0].nodes + + // `calc(arg * -1)` or `calc(-1 * arg)` + if ( + calcArgs.length === 5 && + calcArgs[1].kind === 'separator' && + calcArgs[1].value === ' ' && + calcArgs[2].kind === 'word' && + calcArgs[2].value === '*' && + calcArgs[3].kind === 'separator' && + calcArgs[3].value === ' ' + ) { + let arg = + calcArgs[4].kind === 'word' && calcArgs[4].value === '-1' + ? calcArgs[0] + : calcArgs[0].kind === 'word' && calcArgs[0].value === '-1' + ? calcArgs[4] + : null + + if (arg) { + let replacement = cloneCandidate(candidate) + replacement.root = `-${candidate.root}` + replacement.value!.value = ValueParser.toCss([arg]) + + if (hasSameSignature(candidate, replacement)) { + candidate = replacement + } + } + } + } + + return candidate +} + // ---- // Optimize the modifier @@ -2274,6 +2382,8 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si node.value = resolveVariablesInValue(node.value, designSystem) } + let valueAst = ValueParser.parse(node.value) + // Very basic `calc(…)` constant folding to handle the spacing scale // multiplier: // @@ -2282,7 +2392,17 @@ function canonicalizeAst(designSystem: DesignSystem, ast: AstNode[], options: Si // → `calc(0.25rem * 4)` ← this is the case we will see // after inlining the variable // → `1rem` - node.value = constantFoldDeclaration(node.value, rem) + let [folded, foldedValueAst] = constantFoldDeclarationAst(valueAst, rem) + + // Normalize `calc(…)` expressions such that arguments that are + // associatively equivalent are rendered in the same way. + // + // `calc(var(--foo) * -1)` === `calc(-1 * var(--foo))` + let [normalized, canonicalizedValueAst] = canonicalizeCalcExpressionsAst(foldedValueAst) + + if (folded || normalized) { + node.value = ValueParser.toCss(canonicalizedValueAst) + } // We will normalize the `node.value`, this is the same kind of logic // we use when printing arbitrary values. It will remove unnecessary diff --git a/packages/tailwindcss/src/constant-fold-declaration.test.ts b/packages/tailwindcss/src/constant-fold-declaration.test.ts index b95ed74a3..c87eb4dd6 100644 --- a/packages/tailwindcss/src/constant-fold-declaration.test.ts +++ b/packages/tailwindcss/src/constant-fold-declaration.test.ts @@ -24,9 +24,30 @@ it.each([ ['calc(3rem * 6)', '18rem'], ['calc(5rem / 2)', '2.5rem'], + // Negating with units + ['calc(2rem * -1)', '-2rem'], + ['calc(-1 * 2rem)', '-2rem'], + // Nested partial evaluation ['calc(calc(1 + 2) + 2rem)', 'calc(3 + 2rem)'], + // Nested multiplication with unknown values + ['calc(2 * calc(3 * var(--foo)))', 'calc(6 * var(--foo))'], + ['calc(calc(3 * var(--foo)) * 2)', 'calc(6 * var(--foo))'], + ['calc(2rem * calc(3 * var(--foo)))', 'calc(6rem * var(--foo))'], + + // Nested addition with unknown values + ['calc(1rem + calc(2rem + var(--foo)))', 'calc(3rem + var(--foo))'], + ['calc(calc(2rem + var(--foo)) + 1rem)', 'calc(3rem + var(--foo))'], + + // Nested multiplication can collapse away entirely + ['calc(-1 * calc(-1 * var(--foo)))', 'var(--foo)'], + ['calc(calc(-1 * var(--foo)) * -1)', 'var(--foo)'], + ['calc(-1 * calc(var(--foo) * -1))', 'var(--foo)'], + ['calc(-1 * (-1 * var(--foo)))', 'var(--foo)'], + ['calc(1 * var(--foo))', 'var(--foo)'], + ['calc(var(--foo) * 1)', 'var(--foo)'], + // Evaluation only handles two operands right now, this can change in the future ['calc(1 + 2 + 3)', 'calc(1 + 2 + 3)'], ])('should constant fold `%s` into `%s`', (input, expected) => { @@ -40,6 +61,7 @@ it.each([ ['calc(3rem * 3dvw)'], ['calc(3rem * 2dvh)'], ['calc(5rem / 17px)'], + ['calc(2rem * calc(3px * var(--foo)))'], ])('should not constant fold different units `%s`', (input) => { expect(constantFoldDeclaration(input)).toBe(input) }) diff --git a/packages/tailwindcss/src/constant-fold-declaration.ts b/packages/tailwindcss/src/constant-fold-declaration.ts index 9c33e73e9..bd401989a 100644 --- a/packages/tailwindcss/src/constant-fold-declaration.ts +++ b/packages/tailwindcss/src/constant-fold-declaration.ts @@ -6,10 +6,18 @@ import { walk, WalkAction } from './walk' // Assumption: We already assume that we receive somewhat valid `calc()` // expressions. So we will see `calc(1 + 1)` and not `calc(1+1)` export function constantFoldDeclaration(input: string, rem: number | null = null): string { - let folded = false - let valueAst = ValueParser.parse(input) + let [folded, valueAst] = constantFoldDeclarationAst(ValueParser.parse(input), rem) - walk(valueAst, { + return folded ? ValueParser.toCss(valueAst) : input +} + +export function constantFoldDeclarationAst( + ast: ValueParser.ValueAstNode[], + rem: number | null = null, +): [folded: boolean, ast: ValueParser.ValueAstNode[]] { + let folded = false + + walk(ast, { exit(valueNode) { // Canonicalize dimensions to their simplest form. This includes: // - Convert `-0`, `+0`, `0.0`, … to `0` @@ -40,10 +48,14 @@ export function constantFoldDeclaration(input: string, rem: number | null = null // { kind: 'word', value: '256' } 4 // ] if (valueNode.nodes.length !== 5) return + if (valueNode.nodes[2].kind !== 'word') return - let lhs = dimensions.get(valueNode.nodes[0].value) + let lhsNode = valueNode.nodes[0] let operator = valueNode.nodes[2].value - let rhs = dimensions.get(valueNode.nodes[4].value) + let rhsNode = valueNode.nodes[4] + + let lhs = lhsNode.kind === 'word' ? dimensions.get(lhsNode.value) : null + let rhs = rhsNode.kind === 'word' ? dimensions.get(rhsNode.value) : null // Nullify entire expression when multiplying by `0`, e.g.: `calc(0 * 100vw)` -> `0` // @@ -57,6 +69,134 @@ export function constantFoldDeclaration(input: string, rem: number | null = null return WalkAction.ReplaceSkip(ValueParser.word('0')) } + if (operator === '*') { + // Multiplying by `1` can always unwrap the other side, even when that + // side is an expression like `var(--foo)` that we can't fully fold. + if (lhs?.[0] === 1 && lhs?.[1] === null) { + folded = true + return WalkAction.ReplaceSkip(rhsNode) + } + + if (rhs?.[0] === 1 && rhs?.[1] === null) { + folded = true + return WalkAction.ReplaceSkip(lhsNode) + } + } + + if (operator === '*' || operator === '+') { + // If only one side is known, and the unknown side is itself another + // binary expression with the same operator, try to combine the two + // known parts and keep the unknown part in place. + // + // E.g.: + // + // - `calc(2rem * calc(3 * var(--foo)))` → `calc(6rem * var(--foo))` + // - `calc(2rem + calc(3rem + var(--foo)))` → `calc(5rem + var(--foo))` + // + // At this point `lhs` and `rhs` are dimensions ([value, unit] | + // null). The `null` one is the unknown node. + let constant = lhs ?? rhs + let nestedNode = lhs === null ? lhsNode : rhs === null ? rhsNode : null + + if ( + constant !== null && + nestedNode !== null && + nestedNode.kind === 'function' && + (nestedNode.value === 'calc' || nestedNode.value === '') && + nestedNode.nodes.length === 5 && + nestedNode.nodes[2].kind === 'word' && + nestedNode.nodes[2].value === operator + ) { + let nestedLhsNode = nestedNode.nodes[0] + let nestedRhsNode = nestedNode.nodes[4] + let nestedLhs = + nestedLhsNode.kind === 'word' ? dimensions.get(nestedLhsNode.value) : null + let nestedRhs = + nestedRhsNode.kind === 'word' ? dimensions.get(nestedRhsNode.value) : null + + let known = nestedLhs ?? nestedRhs + let unknown = + nestedLhs === null ? nestedLhsNode : nestedRhs === null ? nestedRhsNode : null + + if (known !== null && unknown !== null) { + // `*` requires both values being unitless, or one of them. Both + // values having a unit is invalid. + // + // - `2 * 3` → valid + // - `4rem * 5` → valid + // - `6 * 7rem` → valid + // - `8rem * 9rem` → invalid + if ( + operator === '*' && + !( + (constant[1] === null && known[1] === null) || // Both can be unitless + (constant[1] === null && known[1] !== null) || // One of them can be unitless, but the other can't + (constant[1] !== null && known[1] === null) // One of them can be unitless, but the other can't + ) + ) { + return + } + + // `+` requires that the units are the same. Adding a unitless + // value to a value with a unit is not allowed. + // + // - `2 + 3` → valid + // - `4rem + 5` → invalid + // - `6 + 7rem` → invalid + // - `8rem + 9rem` → valid + if ( + operator === '+' && + !( + (constant[1] === known[1]) // Only same unit is allowed + ) + ) { + return + } + + // Re-associate nested expressions so we can still fold the known + // part of `x op (y op z)` when `z` is unknown. + // + // Examples: + // - `calc(2 * calc(3 * var(--foo)))` -> `calc(6 * var(--foo))` + // - `calc(1rem + calc(2rem + var(--foo)))` -> `calc(3rem + var(--foo))` + let combined: string + switch (operator) { + case '*': { + combined = `${constant[0] * known[0]}${constant[1] ?? known[1] ?? ''}` + break + } + case '+': { + combined = `${constant[0] + known[0]}${constant[1] ?? known[1] ?? ''}` + break + } + + default: + return + } + + folded = true + + if (operator === '*' && combined === '1') { + return WalkAction.ReplaceSkip(unknown) + } + + let replacement: ValueParser.ValueFunctionNode = { + kind: 'function', + value: valueNode.value, + nodes: [ + ValueParser.word(combined), + valueNode.nodes[1], + valueNode.nodes[2], + valueNode.nodes[3], + unknown, + ], + } + + return WalkAction.ReplaceSkip(replacement) + } + } + } + // We're not dealing with dimensions, so we can't fold this if (lhs === null || rhs === null) { return @@ -70,7 +210,9 @@ export function constantFoldDeclaration(input: string, rem: number | null = null (lhs[1] !== null && rhs[1] === null) // Unit * Unitless, e.g.: `1rem * 2` ) { folded = true - return WalkAction.ReplaceSkip(ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? ''}`)) + return WalkAction.ReplaceSkip( + ValueParser.word(`${lhs[0] * rhs[0]}${lhs[1] ?? rhs[1] ?? ''}`), + ) } break } @@ -111,7 +253,7 @@ export function constantFoldDeclaration(input: string, rem: number | null = null }, }) - return folded ? ValueParser.toCss(valueAst) : input + return [folded, ast] } function canonicalizeDimension(input: string, rem: number | null = null): string | null { From d7fc281a0e678bf92f0e82f4ab1b8edfd7cb1675 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 26 Mar 2026 18:42:03 -0400 Subject: [PATCH 17/17] Use `json` preprocessor for new-line delimited JSON files (#19862) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary This specializes the `.jsonl` and `.ndjson` file extensions so they're preprocessed like JSON instead of by the standard scanner. This prevents them from creating thousands of sub machines and reduces scanning time (see #17125 where this was done for `.json` files). It seems reasonable to handle new-line delimited JSON files as well otherwise scanning these files can take quite a long time. It's quite unlikely that these will contain classes so, alternatively, these *could* go in the binary extensions list so they get ignored entirely. ## Test plan I ran manual tests inside the `oxide` crate against some large-ish JSONL files (5MB–15MB). These changes bring down scanning time from 2s–3s on my M3 Max (via `cargo test --release …`) to less than 20ms. I also ran tests through a full CLI build pipeline on a low-spec linux box. This change brought scanning time down from ~90s to ~300ms for a single ~15MB file. --- CHANGELOG.md | 1 + crates/oxide/src/scanner/mod.rs | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89c462fc1..cdebce6d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Canonicalization: migrate `end-full` → `inset-e-full`, `end-auto` → `inset-e-auto`, `end-px` → `inset-e-px`, and `end-` → `inset-e-` as well as negative versions ([#19849](https://github.com/tailwindlabs/tailwindcss/pull/19849)) - Canonicalization: move the `-` sign inside the arbitrary value `-left-[9rem]` → `left-[-9rem]` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858)) - Canonicalization: move the `-` sign outside the arbitrary value `ml-[calc(-1*var(--width))]` → `-ml-(--width)` ([#19858](https://github.com/tailwindlabs/tailwindcss/pull/19858)) +- Improve performance when scanning JSONL / NDJSON files ([#19862](https://github.com/tailwindlabs/tailwindcss/pull/19862)) ## [4.2.2] - 2026-03-18 diff --git a/crates/oxide/src/scanner/mod.rs b/crates/oxide/src/scanner/mod.rs index 6d6cabc2a..30724f162 100644 --- a/crates/oxide/src/scanner/mod.rs +++ b/crates/oxide/src/scanner/mod.rs @@ -474,7 +474,7 @@ pub fn pre_process_input(content: Vec, extension: &str) -> Vec { "heex" | "eex" | "ex" | "exs" => Elixir.process(&content), "cshtml" | "razor" => Razor.process(&content), "haml" => Haml.process(&content), - "json" => Json.process(&content), + "json" | "jsonl" | "ndjson" => Json.process(&content), "md" | "mdx" => Markdown.process(&content), "pug" => Pug.process(&content), "rb" | "erb" => Ruby.process(&content),