Remove @property fallbacks for Firefox (#15622)

This PR removes the `@property` fallbacks added in #13655. This is
possible because we're targeting a minimum Firefox version of 128 which
[includes support for \`@property\`
rules](https://developer.mozilla.org/de/docs/Web/CSS/@property).

<img width="1284" alt="Screenshot 2025-01-14 at 11 36 44"
src="https://github.com/user-attachments/assets/ae070781-35c1-4165-be51-baa63f28db5b"
/>

Author: philipp-spiess

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Remove `--container-prose` in favor of a deprecated `--max-width-prose` theme variable so that `*-prose` is only available for max-width utilities and only for backward compatibility ([#15439](https://github.com/tailwindlabs/tailwindcss/pull/15439))
 - Use Vite post-processor APIs for processing Svelte `<style>` blocks ([#15436](https://github.com/tailwindlabs/tailwindcss/pull/15436))
+- Remove `@property` fallback rules for Firefox ([#15622](https://github.com/tailwindlabs/tailwindcss/pull/15622))
 
 ## [4.0.0-beta.8] - 2024-12-17
 

integrations/cli/index.test.ts

@@ -530,13 +530,6 @@ test(
         --tw-content: "src/nested/index.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -775,13 +768,6 @@ test(
         --tw-content: 'project-e/nested/index.html';
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -981,13 +967,6 @@ test(
         --tw-content: "pages/nested/foo.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;

integrations/postcss/index.test.ts

@@ -761,13 +761,6 @@ test(
         --tw-content: "src/nested/index.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -997,13 +990,6 @@ test(
         --tw-content: 'project-d/src/index.html';
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -1227,13 +1213,6 @@ test(
         --tw-content: "pages/nested/foo.html";
         content: var(--tw-content);
       }
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, ::before, ::after, ::backdrop {
-            --tw-content: "";
-          }
-        }
-      }
       @property --tw-content {
         syntax: "*";
         inherits: false;

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -630,14 +630,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-font-weight: initial;
-    }
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -387,25 +387,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   }
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);

packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap

@@ -118,14 +118,6 @@ exports[`border-* 1`] = `
   border-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -251,14 +243,6 @@ exports[`border-b-* 1`] = `
   border-bottom-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -384,14 +368,6 @@ exports[`border-e-* 1`] = `
   border-inline-end-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -517,14 +493,6 @@ exports[`border-l-* 1`] = `
   border-left-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -650,14 +618,6 @@ exports[`border-r-* 1`] = `
   border-right-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -783,14 +743,6 @@ exports[`border-s-* 1`] = `
   border-inline-start-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -916,14 +868,6 @@ exports[`border-t-* 1`] = `
   border-top-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1049,14 +993,6 @@ exports[`border-x-* 1`] = `
   border-inline-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1182,14 +1118,6 @@ exports[`border-y-* 1`] = `
   border-block-color: #0000;
 }
 
-@supports (-moz-orient: inline) {
-  @layer base {
-    *, :before, :after, ::backdrop {
-      --tw-border-style: solid;
-    }
-  }
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

packages/tailwindcss/src/ast.ts

@@ -240,8 +240,6 @@ export function walkDepth(
 export function optimizeAst(ast: AstNode[]) {
   let atRoots: AstNode[] = []
   let seenAtProperties = new Set<string>()
-  let propertyFallbacksRoot: Declaration[] = []
-  let propertyFallbacksUniversal: Declaration[] = []
 
   function transform(
     node: AstNode,
@@ -272,28 +270,6 @@ export function optimizeAst(ast: AstNode[]) {
         return
       }
 
-      // Collect fallbacks for `@property` rules for Firefox support
-      // We turn these into rules on `:root` or `*` and some pseudo-elements
-      // based on the value of `inherits``
-      let property = node.params
-      let initialValue = null
-      let inherits = false
-
-      for (let prop of node.nodes) {
-        if (prop.kind !== 'declaration') continue
-        if (prop.property === 'initial-value') {
-          initialValue = prop.value
-        } else if (prop.property === 'inherits') {
-          inherits = prop.value === 'true'
-        }
-      }
-
-      if (inherits) {
-        propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
-      } else {
-        propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
-      }
-
       seenAtProperties.add(node.params)
 
       let copy = { ...node, nodes: [] }
@@ -351,25 +327,6 @@ export function optimizeAst(ast: AstNode[]) {
     transform(node, newAst, 0)
   }
 
-  // Fallbacks
-  {
-    let fallbackAst = []
-
-    if (propertyFallbacksRoot.length > 0) {
-      fallbackAst.push(rule(':root', propertyFallbacksRoot))
-    }
-
-    if (propertyFallbacksUniversal.length > 0) {
-      fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
-    }
-
-    if (fallbackAst.length > 0) {
-      newAst.push(
-        atRule('@supports', '(-moz-orient: inline)', [atRule('@layer', 'base', fallbackAst)]),
-      )
-    }
-  }
-
   return newAst.concat(atRoots)
 }
 

packages/tailwindcss/src/compat/config.test.ts

@@ -352,13 +352,6 @@ describe('theme callbacks', () => {
           --tw-leading: 201rem;
           line-height: 201rem;
         }
-        @supports (-moz-orient: inline) {
-          @layer base {
-            *, ::before, ::after, ::backdrop {
-              --tw-leading: initial;
-            }
-          }
-        }
         @property --tw-leading {
           syntax: "*";
           inherits: false;