fix: reanimated v4 animations

example/src/App.tsx

@@ -6,7 +6,7 @@ export default function App() {
   return (
     <>
       <View className="justify-center items-center h-full">
-        <Text className="shadow-red-500 shadow-2xl">Test Component</Text>
+        <Text className="text-blue-500">Test Component</Text>
       </View>
     </>
   );

src/compiler/compiler.types.ts

@@ -1,4 +1,5 @@
 /* eslint-disable */
+import type { Debugger } from "debug";
 import type {
   AnimationDirection,
   AnimationFillMode,
@@ -14,7 +15,7 @@ export interface CompilerOptions {
   selectorPrefix?: string;
   stylesheetOrder?: number;
   features?: FeatureFlagRecord;
-  logger?: (message: string) => void;
+  logger?: (message: string) => void | Debugger;
   /** Strip unused variables declarations. Defaults: false */
   stripUnusedVariables?: boolean;
   /** @internal */

src/compiler/declarations.ts

@@ -974,6 +974,8 @@ export function parseUnparsed(
         case "hsla":
         case "linear-gradient":
         case "radial-gradient":
+        case "cubic-bezier":
+        case "steps":
           return unparsedFunction(tokenOrValue, builder);
         case "hairlineWidth":
           return [{}, tokenOrValue.value.name, []];
@@ -999,31 +1001,29 @@ export function parseUnparsed(
     case "token":
       switch (tokenOrValue.value.type) {
         case "string":
-        case "number":
         case "ident": {
           const value = tokenOrValue.value.value;
-          if (typeof value === "string") {
-            if (!allowAuto && value === "auto") {
-              builder.addWarning("value", value);
-              return;
-            }
+          if (!allowAuto && value === "auto") {
+            builder.addWarning("value", value);
+            return;
+          }
 
-            if (value === "inherit") {
-              builder.addWarning("value", value);
-              return;
-            }
+          if (value === "inherit") {
+            builder.addWarning("value", value);
+            return;
+          }
 
-            if (value === "true") {
-              return true;
-            } else if (value === "false") {
-              return false;
-            } else {
-              return value;
-            }
+          if (value === "true") {
+            return true;
+          } else if (value === "false") {
+            return false;
           } else {
             return value;
           }
         }
+        case "number": {
+          return round(tokenOrValue.value.value);
+        }
         case "function":
           builder.addWarning("value", tokenOrValue.value.value);
           return;

src/compiler/keyframes.ts

@@ -53,7 +53,7 @@ export function extractKeyFrames(
       switch (selector.type) {
         case "percentage":
           return frame.selectors.length > 1
-            ? `${selector.value}%`
+            ? `${selector.value * 100}%`
             : selector.value;
         case "from":
         case "to":

src/compiler/stylesheet.ts

@@ -196,6 +196,9 @@ export class StylesheetBuilder {
       const [delayed, usesVariables] = postProcessStyleFunction(value);
 
       this.rule.d ??= [];
+      if (value[1] === "@animation") {
+        this.rule.a ??= true;
+      }
 
       if (usesVariables) {
         this.rule.dv = 1;
@@ -209,6 +212,10 @@ export class StylesheetBuilder {
         delayed || usesVariables,
       );
     } else {
+      if (property.startsWith("animation-")) {
+        this.rule.a ??= true;
+      }
+
       this.rule.d ??= [];
       this.pushDescriptor(property, value, this.rule.d);
     }
@@ -370,7 +377,7 @@ export class StylesheetBuilder {
     }
 
     this.animationDeclarations = [];
-    this.staticDeclarations = {};
+    this.staticDeclarations = undefined;
     this.animationFrames.push([progress, this.animationDeclarations]);
   }
 }

src/runtime/native/conditions/guards.ts

@@ -40,10 +40,6 @@ export function testGuards(
         break;
     }
 
-    // if (result) {
-    //   console.log(`Guard ${guard[0]}:${guard[1]} failed`);
-    // }
-
     return result;
   });
 }

src/runtime/native/react/rules.ts

@@ -221,7 +221,7 @@ export function updateRules(
   }
 
   // Generate a StyleObservable for this unique set of rules / variables
-  const stylesObs = stylesFamily(generateHash(state, rules), rules);
+  const stylesObs = stylesFamily(generateStateHash(state, rules), rules);
 
   // Get the guards without subscribing to the observable
   // We will subscribe within the render using the StyleEffect
@@ -277,21 +277,12 @@ function pushInlineRule(
 let hashKeyCount = 0;
 const hashKeyFamily = weakFamily(() => hashKeyCount++);
 
-/**
- * Quickly generate a unique hash for a set of numbers.
- * This is not a cryptographic hash, but it is fast and has a low chance of collision.
- */
-const MOD = 9007199254740871; // Largest prime within safe integer range 2^53
-const PRIME = 31; // A smaller prime for mixing
-export function generateHash(
+export function generateStateHash(
   state: ComponentState,
   iterableKeys?: Iterable<WeakKey>,
   variables?: WeakKey,
   inlineVars?: Set<WeakKey>,
 ): string {
-  let hash = 0;
-  let product = 1; // Used for mixing to enhance uniqueness
-
   if (!iterableKeys) {
     return "";
   }
@@ -306,6 +297,19 @@ export function generateHash(
     keys.push(...inlineVars);
   }
 
+  return generateHash(keys);
+}
+
+/**
+ * Quickly generate a unique hash for a set of numbers.
+ * This is not a cryptographic hash, but it is fast and has a low chance of collision.
+ */
+const MOD = 9007199254740871; // Largest prime within safe integer range 2^53
+const PRIME = 31; // A smaller prime for mixing
+export function generateHash(keys: WeakKey[]): string {
+  let hash = 0;
+  let product = 1; // Used for mixing to enhance uniqueness
+
   for (const key of keys) {
     if (!key) continue; // Skip if key is undefined