Clarify dynamic animation docs

Author: cray0000

docs/api/babel.md

@@ -21,7 +21,6 @@ module.exports = {
 |--------|------|---------|-------------|
 | `platform` | `'web'` \| `'ios'` \| `'android'` | `'web'` | Target platform |
 | `reactType` | `'react-native'` \| `'web'` | auto | React target type |
-| `cache` | `'teamplay'` | auto | Legacy compatibility alias |
 | `transformPug` | `boolean` | `true` | Enable Pug transformation |
 | `transformCss` | `boolean` | `true` | Enable CSS transformation |
 
@@ -32,8 +31,7 @@ module.exports = {
 module.exports = {
   presets: [
     ['cssxjs/babel', {
-      transformPug: false,      // Disable pug if not using it
-      cache: 'teamplay'         // Legacy compatibility alias
+      transformPug: false      // Disable pug if not using it
     }]
   ]
 }
@@ -61,9 +59,7 @@ You can also set platform-specific variables in your Stylus code:
 
 ## Caching
 
-CSSX uses the built-in resolver cache by default. The old `cache: 'teamplay'`
-option is still accepted so existing configs do not break, but CSSX no longer
-imports Teamplay and components do not need `observer()`.
+CSSX uses the built-in resolver cache by default.
 
 See the [Caching guide](/guide/caching) for more details.
 

docs/guide/animations.md

@@ -323,9 +323,11 @@ CSSX compiles animations in a way Reanimated v4 expects:
 
 This means you write standard CSS and get native-compatible animations automatically.
 
-Animation and transition values are static-only. Use class changes, CSS
-variables, or template interpolation to change the surrounding styles at
-runtime; keyframe definitions themselves are compiled from static CSS.
+Animation and transition declarations use the same value resolver as other CSSX
+styles, so values may use `var()` and local template interpolation wherever CSS
+values are supported. Animation names, keyframe names, and the `@keyframes`
+block structure must remain statically knowable so CSSX can inline the matching
+keyframes for Reanimated.
 
 ## Next Steps
 

docs/guide/caching.md

@@ -1,7 +1,7 @@
 # Caching
 
-CSSX caches resolved style props by default. There is no `observer()` wrapper and
-no Teamplay dependency required.
+CSSX caches resolved style props by default and tracks the runtime dependencies
+used by each element.
 
 ## How It Works
 
@@ -165,12 +165,6 @@ Most applications only need `styleName`. Use these helpers when CSS arrives as a
 runtime string or when building lower-level components that do not use Babel's
 `styleName` transform.
 
-## Legacy `cache: 'teamplay'`
-
-The Babel option `cache: 'teamplay'` is still accepted for older configs, but it
-is now a compatibility alias. CSSX owns its cache internally and does not import
-Teamplay.
-
 ## Next Steps
 
 - [CSS Variables](/guide/variables) - Runtime theming

packages/babel-plugin-rn-stylename-to-style/README.md

@@ -131,9 +131,7 @@ so these files shouldn't frequently change.
 
 **Default:** `undefined`
 
-Legacy compatibility option. `"teamplay"` is still accepted for older configs,
-but style caching is owned by CSSX internally and does not require Teamplay or
-`observer()`.
+Legacy compatibility option. New projects should omit it.
 
 #### `platform`
 

packages/css-to-rn/test/engine/resolve.test.ts

@@ -284,4 +284,54 @@ describe('@cssxjs/css-to-rn resolver', () => {
       animationPlayState: 'running'
     })
   })
+
+  it('resolves variables and interpolation inside animation and transition values', () => {
+    const sheet = compileCssTemplate(`
+      @keyframes fade {
+        from { opacity: var(--from-opacity, 0); }
+        to { opacity: var(--target-opacity, 1); }
+      }
+      .button {
+        animation: var(--animation-name, fade) var(--__cssx_dynamic_0) ease;
+        transition: opacity var(--transition-duration, 150ms);
+      }
+    `)
+
+    const result = resolveCssx({
+      styleName: 'button',
+      layers: {
+        sheet,
+        values: ['300ms']
+      },
+      variables: {
+        '--from-opacity': 0.25,
+        '--target-opacity': 0.75,
+        '--transition-duration': '250ms'
+      }
+    })
+
+    assert.deepEqual(result.dependencies.vars, [
+      '--animation-name',
+      '--from-opacity',
+      '--target-opacity',
+      '--transition-duration'
+    ])
+    assert.deepEqual(result.props.style, {
+      animationName: {
+        from: { opacity: 0.25 },
+        to: { opacity: 0.75 }
+      },
+      animationDuration: '300ms',
+      animationTimingFunction: 'ease',
+      animationDelay: '0s',
+      animationIterationCount: 1,
+      animationDirection: 'normal',
+      animationFillMode: 'none',
+      animationPlayState: 'running',
+      transitionProperty: 'opacity',
+      transitionDuration: '250ms',
+      transitionTimingFunction: 'ease',
+      transitionDelay: '0s'
+    })
+  })
 })