Don't register properties with types unless necessary (#15215)

This PR updates many of our `@property` rules to use `syntax: "*"`
instead of a specific type.

Registering custom properties with types triggers all sorts of obscure
edge-case bugs in different browsers (mostly Safari, sometimes Firefox),
but using `"*"` always seems to work. So unless we know we actually need
to animate a custom property, it's safer to register is as `"*"`.

Many of the places our custom properties are used are already inherently
animatable (like the `translate`, `scale`, and `transform`) even when
the underlying properties are not typed, so removing types for things
like `--tw-scale-x` doesn't actually stop the `scale-*` utilities from
being animateable.

I've also updated the `--tw-gradient-from/via/to-position` properties to
use `<length-percentage>` instead of `<length> | <percentage>` because
for some reason I don't understand, only `<length-percentage>` works
correctly when using `calc(…)` in arbitrary values.

Fixes #15188,
#14277.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -20,12 +20,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix scanning classes delimited by tab characters ([#15169](https://github.com/tailwindlabs/tailwindcss/pull/15169))
 - Ensure opacity modifiers and semi-transparent gradients render correctly by default in Safari ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
 - Fix element size thrashing when transitioning gradients on elements with a defined font-size in Safari ([#15216](https://github.com/tailwindlabs/tailwindcss/pull/15216))
+- Ensure `translate-*` utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
+- Ensure gradient stop position utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
 
 ### Changed
 
 - Interpolate gradients using OKLAB instead of OKLCH by default ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
 - Error when `layer(…)` in `@import` is not first in the list of functions/conditions ([#15109](https://github.com/tailwindlabs/tailwindcss/pull/15109))
 - Use unitless line-height values for font-size variables in default theme ([#15216](https://github.com/tailwindlabs/tailwindcss/pull/15216))
+- Don't register custom properties with explicit types unless those custom properties need to be animateable ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
 
 ## [4.0.0-beta.2] - 2024-11-22
 

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

@@ -127,7 +127,7 @@ exports[`border-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -260,7 +260,7 @@ exports[`border-b-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -393,7 +393,7 @@ exports[`border-e-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -526,7 +526,7 @@ exports[`border-l-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -659,7 +659,7 @@ exports[`border-r-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -792,7 +792,7 @@ exports[`border-s-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -925,7 +925,7 @@ exports[`border-t-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -1058,7 +1058,7 @@ exports[`border-x-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"
@@ -1191,7 +1191,7 @@ exports[`border-y-* 1`] = `
 }
 
 @property --tw-border-style {
-  syntax: "<custom-ident>";
+  syntax: "*";
   inherits: false;
   initial-value: solid;
 }"

packages/tailwindcss/src/index.test.ts

@@ -302,19 +302,19 @@ describe('@apply', () => {
       }
 
       @property --tw-translate-x {
-        syntax: "<length> | <percentage>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }
 
       @property --tw-translate-y {
-        syntax: "<length> | <percentage>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }
 
       @property --tw-translate-z {
-        syntax: "<length>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }"
@@ -717,7 +717,7 @@ describe('sorting', () => {
       }
 
       @property --tw-space-x-reverse {
-        syntax: "<number>";
+        syntax: "*";
         inherits: false;
         initial-value: 0;
       }"