Add fallbacks for @property rules for Firefox (#13655)

* Add `@property` fallbacks for Firefox * Update tests * Update changelog
tailwindlabs · May 8, 2024 · aceec2e · aceec2e
1 parent 3a59340
commit aceec2e
Show file tree

Hide file tree

Showing 7 changed files with 723 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
 - Support unbalanced parentheses and braces in quotes in arbitrary values and variants ([#13608](https://github.com/tailwindlabs/tailwindcss/pull/13608))
+- Add fallbacks for `@property` rules for Firefox ([#13655](https://github.com/tailwindlabs/tailwindcss/pull/13655))
 
 ## Changed
 

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -423,6 +423,25 @@ 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-colored: 0 0 #0000;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-colored: 0 0 #0000;
+      --tw-ring-color: ;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: ;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: ;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -106,6 +106,14 @@ exports[`border-* 1`] = `
   border-color: #0000;
 }
 
+@supports (-moz-orient: inline) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
 @property --tw-border-style {
   syntax: "<custom-ident>";
   inherits: false;
@@ -219,6 +227,14 @@ 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: "<custom-ident>";
   inherits: false;
@@ -332,6 +348,14 @@ 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: "<custom-ident>";
   inherits: false;
@@ -445,6 +469,14 @@ 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: "<custom-ident>";
   inherits: false;
@@ -558,6 +590,14 @@ 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: "<custom-ident>";
   inherits: false;
@@ -671,6 +711,14 @@ 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: "<custom-ident>";
   inherits: false;
@@ -784,6 +832,14 @@ 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: "<custom-ident>";
   inherits: false;
@@ -929,6 +985,14 @@ exports[`border-x-* 1`] = `
   border-right-color: #0000;
 }
 
+@supports (-moz-orient: inline) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
 @property --tw-border-style {
   syntax: "<custom-ident>";
   inherits: false;
@@ -1074,6 +1138,14 @@ exports[`border-y-* 1`] = `
   border-bottom-color: #0000;
 }
 
+@supports (-moz-orient: inline) {
+  @layer base {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
 @property --tw-border-style {
   syntax: "<custom-ident>";
   inherits: false;

diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
@@ -90,6 +90,8 @@ export function walk(
 export function toCss(ast: AstNode[]) {
   let atRoots: string = ''
   let seenAtProperties = new Set<string>()
+  let propertyFallbacksRoot: Declaration[] = []
+  let propertyFallbacksUniversal: Declaration[] = []
 
   function stringify(node: AstNode, depth = 0): string {
     let css = ''
@@ -129,6 +131,28 @@ export function toCss(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.selector.replace(/@property\s*/g, '')
+        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 ?? ' '))
+        } else {
+          propertyFallbacksUniversal.push(decl(property, initialValue ?? ' '))
+        }
+
         seenAtProperties.add(node.selector)
       }
 
@@ -153,12 +177,31 @@ export function toCss(ast: AstNode[]) {
   }
 
   let css = ''
+
   for (let node of ast) {
     let result = stringify(node)
     if (result !== '') {
       css += result
     }
   }
 
-  return `${css}${atRoots}`
+  let fallbackAst = []
+
+  if (propertyFallbacksRoot.length) {
+    fallbackAst.push(rule(':root', propertyFallbacksRoot))
+  }
+
+  if (propertyFallbacksUniversal.length) {
+    fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
+  }
+
+  let fallback = ''
+
+  if (fallbackAst.length) {
+    fallback = stringify(
+      rule('@supports (-moz-orient: inline)', [rule('@layer base', fallbackAst)]),
+    )
+  }
+
+  return `${css}${fallback}${atRoots}`
 }
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
@@ -211,6 +211,16 @@ describe('@apply', () => {
         }
       }
 
+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-translate-x: 0;
+            --tw-translate-y: 0;
+            --tw-translate-z: 0;
+          }
+        }
+      }
+
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -257,6 +267,14 @@ describe('@apply', () => {
         content: var(--tw-content);
       }
 
+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -372,6 +390,14 @@ describe('variant stacking', () => {
         display: flex;
       }
 
+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-content: "";
+          }
+        }
+      }
+
       @property --tw-content {
         syntax: "*";
         inherits: false;
@@ -538,6 +564,14 @@ describe('sorting', () => {
         margin-inline-end: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
       }
 
+      @supports (-moz-orient: inline) {
+        @layer base {
+          *, :before, :after, ::backdrop {
+            --tw-space-x-reverse: 0;
+          }
+        }
+      }
+
       @property --tw-space-x-reverse {
         syntax: "<number>";
         inherits: false;