feat: Prioritize pseudoselectors over renders (#9775)

## Summary

Currently changing the style of an object with pseudoselector during
render will overwrite the effect of pseudoselector. It's not something
that happens on web - pseudoselector (tagged with !important as in our
web implementation) should be more important.

This PR tries to fix that.
## Test plan
<img width="351" height="97" alt="image"
src="https://github.com/user-attachments/assets/376ec1fc-13ad-47ac-87c9-5fa7bb2b68f0"
/>

---------

Co-authored-by: Mateusz Łopaciński <lop.mateusz.2001@gmail.com>

Author: wisniewskij

apps/common-app/src/apps/css/examples/transitions/routes.ts

@@ -100,6 +100,10 @@ const routes = {
         name: ':active',
         Component: pseudoSelectors.Active,
       },
+      PseudoActiveBlocksRender: {
+        name: 'selectors block render transition',
+        Component: pseudoSelectors.ActiveBlocksRender,
+      },
       PseudoActiveDeepest: {
         name: ':active-deepest',
         Component: pseudoSelectors.ActiveDeepest,

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/ActiveBlocksRender.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import {
+  Screen,
+  Scroll,
+  Section,
+  VerticalExampleCard,
+} from '@/apps/css/components';
+import { colors, radius, sizes, spacing } from '@/theme';
+
+export default function ActiveBlocksRender() {
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhase((prev) => (prev + 1) % 2);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const renderColor = phase === 0 ? colors.danger : colors.primaryLight;
+
+  return (
+    <Screen>
+      <Scroll contentContainerStyle={styles.content} withBottomBarSpacing>
+        <Section
+          description="backgroundColor is driven by two sources at once: a render-driven transition that toggles red <-> light blue every 1000ms via the 'default' value, and a ':active' selector that sets dark navy. Press and hold the box: while ':active' is active, the incoming render transitions on backgroundColor should be blocked and the box should hold dark navy (no red/blue flicker). Release and the looping render transition resumes."
+          title="Selector blocks render transition">
+          <VerticalExampleCard
+            title="backgroundColor: render loop vs :active"
+            code={`const renderColor = phase === 0 ? colors.danger : colors.primaryLight;
+<Animated.View
+  style={{
+    backgroundColor: {
+      default: renderColor,
+      ':active': colors.primaryDark,
+    },
+    transitionDuration: '900ms',
+    transitionTimingFunction: 'linear',
+  }}
+  onStartShouldSetResponder={() => true}
+/>`}
+            collapsedCode={`backgroundColor: {
+  default: renderColor,
+  ':active': colors.primaryDark,
+},`}>
+            <Animated.View
+              style={[
+                styles.box,
+                {
+                  backgroundColor: {
+                    ':active': colors.primaryDark,
+                    default: renderColor,
+                  },
+                  transitionDuration: '900ms',
+                  transitionTimingFunction: 'linear',
+                },
+              ]}
+              onStartShouldSetResponder={() => true}
+            />
+          </VerticalExampleCard>
+        </Section>
+      </Scroll>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    borderRadius: radius.md,
+    height: sizes.md,
+    width: sizes.md,
+  },
+  content: {
+    gap: spacing.xs,
+  },
+});

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/index.ts

@@ -1,4 +1,5 @@
 import Active from './Active';
+import ActiveBlocksRender from './ActiveBlocksRender';
 import ActiveDeepest from './ActiveDeepest';
 import ArbitraryWebSelectors from './ArbitraryWebSelectors';
 import Focus from './Focus';
@@ -11,6 +12,7 @@ import Planets from './Planets';
 
 export default {
   Active,
+  ActiveBlocksRender,
   ActiveDeepest,
   ArbitraryWebSelectors,
   Focus,

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp

@@ -32,6 +32,12 @@ TransitionProperties CSSTransition::getProperties() const {
 folly::dynamic CSSTransition::run(jsi::Runtime &rt, CSSTransitionConfig &&config, const folly::dynamic &lastUpdates) {
   const auto timestamp = loop_->resolveTimestamp();
 
+  for (const auto &propertyName : pseudoLockedProperties_) {
+    config.changedPropertiesSettings.erase(propertyName);
+    config.changedProperties.erase(propertyName);
+    std::erase(config.removedProperties, propertyName);
+  }
+
   auto loopConfig = platformTransitionProxy_->processConfig(rt, getViewTag(), config, routing_, timestamp);
   if (loopConfig.empty()) {
     return folly::dynamic::object();
@@ -72,6 +78,10 @@ folly::dynamic CSSTransition::computeCurrentLoopStyle() {
   return loopTransition_->computeCurrentStyle(shadowNode_);
 }
 
+void CSSTransition::setPseudoLockedProperties(TransitionProperties properties) {
+  pseudoLockedProperties_ = std::move(properties);
+}
+
 void CSSTransition::cancel() {
   if (loopTransition_) {
     loop_->remove(loopTransition_);

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.h

@@ -52,6 +52,8 @@ class CSSTransition {
   folly::dynamic run(const PropertyValueDynamicDiffsMap &propertyDiffs, const folly::dynamic &lastUpdates);
   void cancel();
 
+  void setPseudoLockedProperties(TransitionProperties properties);
+
  private:
   const std::shared_ptr<const ShadowNode> shadowNode_;
   const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
@@ -60,6 +62,7 @@ class CSSTransition {
   Observer &observer_;
 
   CSSTransitionRouting routing_;
+  TransitionProperties pseudoLockedProperties_;
   std::shared_ptr<CSSLoopTransition> loopTransition_;
 
   CSSLoopTransition &ensureLoopTransition();

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/ValueInterpolator.cpp

@@ -55,7 +55,9 @@ bool ValueInterpolator::updateKeyframes(jsi::Runtime &rt, const jsi::Value &from
   auto to = toValue.isUndefined() ? defaultStyleValue_ : createValue(rt, toValue);
 
   const auto equalsReversingAdjustedStartValue = reversingAdjustedStartValue_ && (*to == *reversingAdjustedStartValue_);
-  reversingAdjustedStartValue_ = keyframes_.empty() ? from : keyframes_[1].value.value();
+  // https://drafts.csswg.org/css-transitions/#reversing
+  reversingAdjustedStartValue_ =
+      (equalsReversingAdjustedStartValue && !keyframes_.empty()) ? keyframes_[1].value.value() : from;
 
   keyframes_ = {ValueKeyframe{0, std::move(from)}, ValueKeyframe{1, std::move(to)}};
 
@@ -67,7 +69,8 @@ bool ValueInterpolator::updateKeyframes(const folly::dynamic &fromValue, const f
   auto to = toValue.isNull() ? defaultStyleValue_ : createValue(toValue);
 
   const auto equalsReversingAdjustedStartValue = reversingAdjustedStartValue_ && (*to == *reversingAdjustedStartValue_);
-  reversingAdjustedStartValue_ = keyframes_.empty() ? from : keyframes_[1].value.value();
+  reversingAdjustedStartValue_ =
+      (equalsReversingAdjustedStartValue && !keyframes_.empty()) ? keyframes_[1].value.value() : from;
 
   keyframes_ = {ValueKeyframe{0, std::move(from)}, ValueKeyframe{1, std::move(to)}};
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.cpp

@@ -39,6 +39,14 @@ void CSSTransitionsRegistry::run(
   recordInitialUpdate(transition, initialUpdate);
 }
 
+void CSSTransitionsRegistry::setPseudoLockedProperties(const Tag viewTag, const TransitionProperties &properties) {
+  react_native_assert(UpdatesRegistryManager::isLockedByCurrentThread());
+  const auto it = registry_.find(viewTag);
+  if (it != registry_.end()) {
+    it->second->setPseudoLockedProperties(properties);
+  }
+}
+
 void CSSTransitionsRegistry::flushUpdates(UpdatesBatch &updatesBatch) {
   react_native_assert(UpdatesRegistryManager::isLockedByCurrentThread());
   const auto tags = std::exchange(updatedTags_, {});

packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.h

@@ -28,6 +28,8 @@ class CSSTransitionsRegistry : public UpdatesRegistry {
       CSSTransitionConfig &&config);
   void run(const std::shared_ptr<const ShadowNode> &shadowNode, const PropertyValueDynamicDiffsMap &propertyDiffs);
 
+  void setPseudoLockedProperties(Tag viewTag, const TransitionProperties &properties);
+
   void flushUpdates(UpdatesBatch &updatesBatch);
 #if REACT_NATIVE_VERSION_MINOR >= 85
   void flushUpdates(UpdatesBatchAnimatedProps &updatesBatch);

packages/react-native-reanimated/Common/cpp/reanimated/PseudoStyles/PseudoStylesRegistry.cpp

@@ -50,13 +50,16 @@ void PseudoStylesRegistry::registerPseudoStyles(
   auto &entry = registry_[tag];
   entry.shadowNode = shadowNode;
   entry.defaults = defaults;
+  std::vector<PseudoSelector> newSelectors;
   for (const auto &registration : selectors) {
+    if (!entry.selectors.contains(registration.selector)) {
+      newSelectors.push_back(registration.selector);
+    }
     entry.selectors[registration.selector] = {registration.selectorStyle};
   }
   entry.precomputedStyles = recomputeAllStyles(entry);
 
-  for (const auto &registration : selectors) {
-    const auto selector = registration.selector;
+  for (const auto selector : newSelectors) {
     attachFn_(
         tag,
         selector,
@@ -100,9 +103,23 @@ void PseudoStylesRegistry::onSelectorStateChanged(Tag tag, PseudoSelector select
   const auto &fromStyle = entry.precomputedStyles[oldMask];
   const auto &toStyle = entry.precomputedStyles[entry.activeMask];
 
+  css::TransitionProperties lockedProperties;
+  for (const auto &[sel, data] : entry.selectors) {
+    if (!(entry.activeMask & (1u << static_cast<int>(sel)))) {
+      continue;
+    }
+    for (const auto &[propKey, val] : data.selectorStyle.items()) {
+      if (!val.isNull()) {
+        lockedProperties.insert(propKey.asString());
+      }
+    }
+  }
+  cssTransitionsRegistry_->setPseudoLockedProperties(tag, lockedProperties);
+
   css::PropertyValueDynamicDiffsMap valueChanges;
   for (const auto &[propKey, toVal] : toStyle.items()) {
     const auto propName = propKey.asString();
+    // Fallback only - the platform/loop prefer the live current value when one exists.
     const folly::dynamic &fromVal = fromStyle.count(propName) ? fromStyle[propName] : toVal;
     valueChanges.emplace(propName, std::make_pair(fromVal, toVal));
   }

packages/react-native-reanimated/apple/reanimated/apple/CSS/REACSSPlatformTransitions.mm

@@ -27,7 +27,8 @@
 // and the reversing snapshot handle interruptions; settings are reused by the
 // toggle path.
 struct ActiveTransition {
-  PlatformValue adjustedStart;
+  // Unset after a mid-flight interruption - the live start value can't match any target.
+  std::optional<PlatformValue> adjustedStart;
   PlatformValue adjustedEnd;
   ReversingState reversing;
   CSSTransitionPropertySettings settings;
@@ -65,24 +66,36 @@ - (void)applyForTag:(Tag)viewTag
             toValue:(const PlatformValue &)toValue
            settings:(const CSSTransitionPropertySettings &)settings
           timestamp:(double)timestamp
+         persistent:(BOOL)persistent
 {
   auto &properties = _active[viewTag];
   const auto activeIt = properties.find(propertyName);
   // Targeting the in-flight transition's start value means this is a reversal.
   const ActiveTransition *previous =
-      (activeIt != properties.end() && toValue == activeIt->second.adjustedStart) ? &activeIt->second : nullptr;
+      (activeIt != properties.end() && activeIt->second.adjustedStart && toValue == *activeIt->second.adjustedStart)
+      ? &activeIt->second
+      : nullptr;
   ReversingState reversing = previous
       ? reverseShorten(previous->reversing, timestamp, settings.duration, settings.delay, settings.easingConfig)
       : makeReversingState(timestamp, settings.duration, settings.delay, settings.easingConfig);
 
-  const PlatformValue adjustedStart = previous ? previous->adjustedEnd : fromValue;
+  // https://drafts.csswg.org/css-transitions/#reversing
+  std::optional<PlatformValue> adjustedStart;
+  if (previous) {
+    adjustedStart = previous->adjustedEnd;
+  } else if (activeIt == properties.end()) {
+    adjustedStart = fromValue;
+  } else if (timestamp >= activeIt->second.reversing.startTimestamp + activeIt->second.reversing.duration) {
+    adjustedStart = activeIt->second.adjustedEnd;
+  }
   [self animateTag:viewTag
       propertyName:propertyName
          fromValue:fromValue
            toValue:toValue
         durationMs:reversing.duration
        startTimeMs:reversing.startTimestamp
-            easing:settings.easingConfig];
+            easing:settings.easingConfig
+        persistent:persistent];
   properties[propertyName] = ActiveTransition{adjustedStart, toValue, std::move(reversing), settings};
 }
 
@@ -104,7 +117,8 @@ - (BOOL)applyTransitionForTag:(Tag)viewTag
           fromValue:*from
             toValue:*to
            settings:settings
-          timestamp:timestamp];
+          timestamp:timestamp
+         persistent:NO];
   return YES;
 }
 
@@ -135,7 +149,8 @@ - (BOOL)applyDynamicTransitionForTag:(Tag)viewTag
           fromValue:*from
             toValue:*to
            settings:settings
-          timestamp:timestamp];
+          timestamp:timestamp
+         persistent:YES];
   return YES;
 }
 
@@ -146,6 +161,7 @@ - (void)animateTag:(Tag)viewTag
         durationMs:(double)durationMs
        startTimeMs:(double)startTimeMs
             easing:(const EasingConfig &)easing
+        persistent:(BOOL)persistent
 {
   // Capture everything up front; CALayer access must happen on the main thread.
   NSString *keyPath = caLayerKeyPathForCSSProperty(propertyName);
@@ -167,11 +183,11 @@ - (void)animateTag:(Tag)viewTag
     }
 
     CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:keyPath];
-    // On interruption, start from the live presentation value; the implicit
-    // fromValue would race RN's model commit.
+    // On interruption, continue from the live presentation value, falling back to the
+    // model - never to fromId, which would snap a quick tap to the settled pseudo target.
     if ([[layer animationForKey:keyPath] isKindOfClass:[CABasicAnimation class]]) {
       id presentationValue = [[layer presentationLayer] valueForKeyPath:keyPath];
-      anim.fromValue = presentationValue ?: fromId;
+      anim.fromValue = presentationValue ?: [layer valueForKeyPath:keyPath];
     } else {
       anim.fromValue = fromId;
     }
@@ -181,17 +197,16 @@ - (void)animateTag:(Tag)viewTag
     // speed/timeOffset (e.g. RN Screens during navigation) from shifting it.
     anim.beginTime = [layer convertTime:beginTime fromLayer:nil];
     anim.timingFunction = timing;
-    // Backwards fill paints fromValue during the delay window; the animation
-    // self-removes on completion and the layer reads the model below.
-    anim.fillMode = kCAFillModeBackwards;
-    anim.removedOnCompletion = YES;
-
-    // Commit toValue to the model and add the animation in one transaction
-    // (implicit actions off): on auto-removal the layer shows the final model
-    // value with no snap, and recycled layers carry no stale animated state.
+    anim.fillMode = persistent ? kCAFillModeBoth : kCAFillModeBackwards;
+    anim.removedOnCompletion = persistent ? NO : YES;
+
+    // Non-persistent transitions commit toValue to the model so the layer settles there on
+    // self-removal; persistent (pseudo) ones hold their value via fillMode and keep the base model.
     [CATransaction begin];
     [CATransaction setDisableActions:YES];
-    [layer setValue:toId forKeyPath:keyPath];
+    if (!persistent) {
+      [layer setValue:toId forKeyPath:keyPath];
+    }
     [layer addAnimation:anim forKey:keyPath];
     [CATransaction commit];
   });