Use initial for @property fallbacks instead of (#13949)

* Use `initial` for `@property` fallbacks instead of ` ` * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
tailwindlabs · Jul 4, 2024 · 407de01 · 407de01
1 parent 62de02a
commit 407de01
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Support combining arbitrary shadows without a color with shadow color utilities ([#13876](https://github.com/tailwindlabs/tailwindcss/pull/13876))
+- Ensure `@property` fallbacks work correctly with properties with no `initial-value` ([#13949](https://github.com/tailwindlabs/tailwindcss/pull/13949))
 
 ## [4.0.0-alpha.16] - 2024-06-07
 

diff --git a/packages/tailwindcss/playwright.config.ts b/packages/tailwindcss/playwright.config.ts
@@ -36,11 +36,14 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
 
     /* Test against mobile viewports. */
     // {

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -431,11 +431,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
       --tw-shadow-colored: 0 0 #0000;
       --tw-inset-shadow: 0 0 #0000;
       --tw-inset-shadow-colored: 0 0 #0000;
-      --tw-ring-color: ;
+      --tw-ring-color: initial;
       --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: ;
+      --tw-inset-ring-color: initial;
       --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: ;
+      --tw-ring-inset: initial;
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;

diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
@@ -148,9 +148,9 @@ export function toCss(ast: AstNode[]) {
         }
 
         if (inherits) {
-          propertyFallbacksRoot.push(decl(property, initialValue ?? ' '))
+          propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
         } else {
-          propertyFallbacksUniversal.push(decl(property, initialValue ?? ' '))
+          propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
         }
 
         seenAtProperties.add(node.selector)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -3824,9 +3824,9 @@ test('touch-pan', () => {
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
-          --tw-pan-x: ;
-          --tw-pan-y: ;
-          --tw-pinch-zoom: ;
+          --tw-pan-x: initial;
+          --tw-pan-y: initial;
+          --tw-pinch-zoom: initial;
         }
       }
     }
@@ -3868,9 +3868,9 @@ test('touch-pinch-zoom', () => {
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
-          --tw-pan-x: ;
-          --tw-pan-y: ;
-          --tw-pinch-zoom: ;
+          --tw-pan-x: initial;
+          --tw-pan-y: initial;
+          --tw-pinch-zoom: initial;
         }
       }
     }
@@ -8239,8 +8239,8 @@ test('from', () => {
           --tw-gradient-from: #0000;
           --tw-gradient-to: #0000;
           --tw-gradient-via: transparent;
-          --tw-gradient-stops: ;
-          --tw-gradient-via-stops: ;
+          --tw-gradient-stops: initial;
+          --tw-gradient-via-stops: initial;
           --tw-gradient-from-position: 0%;
           --tw-gradient-via-position: 50%;
           --tw-gradient-to-position: 100%;
@@ -8476,8 +8476,8 @@ test('via', () => {
           --tw-gradient-from: #0000;
           --tw-gradient-to: #0000;
           --tw-gradient-via: transparent;
-          --tw-gradient-stops: ;
-          --tw-gradient-via-stops: ;
+          --tw-gradient-stops: initial;
+          --tw-gradient-via-stops: initial;
           --tw-gradient-from-position: 0%;
           --tw-gradient-via-position: 50%;
           --tw-gradient-to-position: 100%;
@@ -8701,8 +8701,8 @@ test('to', () => {
           --tw-gradient-from: #0000;
           --tw-gradient-to: #0000;
           --tw-gradient-via: transparent;
-          --tw-gradient-stops: ;
-          --tw-gradient-via-stops: ;
+          --tw-gradient-stops: initial;
+          --tw-gradient-via-stops: initial;
           --tw-gradient-from-position: 0%;
           --tw-gradient-via-position: 50%;
           --tw-gradient-to-position: 100%;
@@ -10477,15 +10477,15 @@ test('filter', () => {
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
-          --tw-blur: ;
-          --tw-brightness: ;
-          --tw-contrast: ;
-          --tw-grayscale: ;
-          --tw-hue-rotate: ;
-          --tw-invert: ;
-          --tw-opacity: ;
-          --tw-saturate: ;
-          --tw-sepia: ;
+          --tw-blur: initial;
+          --tw-brightness: initial;
+          --tw-contrast: initial;
+          --tw-grayscale: initial;
+          --tw-hue-rotate: initial;
+          --tw-invert: initial;
+          --tw-opacity: initial;
+          --tw-saturate: initial;
+          --tw-sepia: initial;
         }
       }
     }
@@ -10787,15 +10787,15 @@ test('backdrop-filter', () => {
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
-          --tw-backdrop-blur: ;
-          --tw-backdrop-brightness: ;
-          --tw-backdrop-contrast: ;
-          --tw-backdrop-grayscale: ;
-          --tw-backdrop-hue-rotate: ;
-          --tw-backdrop-invert: ;
-          --tw-backdrop-opacity: ;
-          --tw-backdrop-saturate: ;
-          --tw-backdrop-sepia: ;
+          --tw-backdrop-blur: initial;
+          --tw-backdrop-brightness: initial;
+          --tw-backdrop-contrast: initial;
+          --tw-backdrop-grayscale: initial;
+          --tw-backdrop-hue-rotate: initial;
+          --tw-backdrop-invert: initial;
+          --tw-backdrop-opacity: initial;
+          --tw-backdrop-saturate: initial;
+          --tw-backdrop-sepia: initial;
         }
       }
     }
@@ -11157,10 +11157,10 @@ test('contain', () => {
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
-          --tw-contain-size: ;
-          --tw-contain-layout: ;
-          --tw-contain-paint: ;
-          --tw-contain-style: ;
+          --tw-contain-size: initial;
+          --tw-contain-layout: initial;
+          --tw-contain-paint: initial;
+          --tw-contain-style: initial;
         }
       }
     }
@@ -11378,11 +11378,11 @@ test('font-variant-numeric', () => {
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
-          --tw-ordinal: ;
-          --tw-slashed-zero: ;
-          --tw-numeric-figure: ;
-          --tw-numeric-spacing: ;
-          --tw-numeric-fraction: ;
+          --tw-ordinal: initial;
+          --tw-slashed-zero: initial;
+          --tw-numeric-figure: initial;
+          --tw-numeric-spacing: initial;
+          --tw-numeric-fraction: initial;
         }
       }
     }
@@ -12104,11 +12104,11 @@ test('shadow', () => {
           --tw-shadow-colored: 0 0 #0000;
           --tw-inset-shadow: 0 0 #0000;
           --tw-inset-shadow-colored: 0 0 #0000;
-          --tw-ring-color: ;
+          --tw-ring-color: initial;
           --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: ;
+          --tw-inset-ring-color: initial;
           --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: ;
+          --tw-ring-inset: initial;
           --tw-ring-offset-width: 0px;
           --tw-ring-offset-color: #fff;
           --tw-ring-offset-shadow: 0 0 #0000;
@@ -12356,11 +12356,11 @@ test('inset-shadow', () => {
           --tw-shadow-colored: 0 0 #0000;
           --tw-inset-shadow: 0 0 #0000;
           --tw-inset-shadow-colored: 0 0 #0000;
-          --tw-ring-color: ;
+          --tw-ring-color: initial;
           --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: ;
+          --tw-inset-ring-color: initial;
           --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: ;
+          --tw-ring-inset: initial;
           --tw-ring-offset-width: 0px;
           --tw-ring-offset-color: #fff;
           --tw-ring-offset-shadow: 0 0 #0000;
@@ -12604,11 +12604,11 @@ test('ring', () => {
           --tw-shadow-colored: 0 0 #0000;
           --tw-inset-shadow: 0 0 #0000;
           --tw-inset-shadow-colored: 0 0 #0000;
-          --tw-ring-color: ;
+          --tw-ring-color: initial;
           --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: ;
+          --tw-inset-ring-color: initial;
           --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: ;
+          --tw-ring-inset: initial;
           --tw-ring-offset-width: 0px;
           --tw-ring-offset-color: #fff;
           --tw-ring-offset-shadow: 0 0 #0000;
@@ -12853,11 +12853,11 @@ test('inset-ring', () => {
           --tw-shadow-colored: 0 0 #0000;
           --tw-inset-shadow: 0 0 #0000;
           --tw-inset-shadow-colored: 0 0 #0000;
-          --tw-ring-color: ;
+          --tw-ring-color: initial;
           --tw-ring-shadow: 0 0 #0000;
-          --tw-inset-ring-color: ;
+          --tw-inset-ring-color: initial;
           --tw-inset-ring-shadow: 0 0 #0000;
-          --tw-ring-inset: ;
+          --tw-ring-inset: initial;
           --tw-ring-offset-width: 0px;
           --tw-ring-offset-color: #fff;
           --tw-ring-offset-shadow: 0 0 #0000;