fix: wip recursive style resolvers

Author: marklawlor

README.md

@@ -39,9 +39,8 @@ These are the features that are "done", in that they pass basic testing. More co
 - [ ] Metro
 - [ ] Update compiler to new syntax (switch tuples to objects)
 - [x] Upgrading elements
-- [ ] Upgrading elements warning
 - [ ] Animations
-- [ ] Transitions
+- [x] Transitions
 - [ ] Important styles
 - [ ] Important props
 - [ ] Shorthand runtime styles

cpp/StyledComputedFactory.cpp

@@ -74,7 +74,7 @@ namespace margelo::nitro::cssnitro {
 
                     // Now process the sorted style rules
                     for (const HybridStyleRule &styleRule: allStyleRules) {
-                        // Skip rule if its media conditions don't pass
+                        // Skip rule if its conditions are not valid
                         if (!Rules::testRule(styleRule, get, componentId, containerScope,
                                              validAttributeQueries)) {
                             continue;

cpp/StyledResolver.cpp

@@ -0,0 +1,35 @@
+//
+// Created on October 19, 2025.
+//
+
+#include "StyledResolver.hpp"
+#include "StyleFunction.hpp"
+#include <variant>
+
+namespace margelo::nitro::cssnitro {
+
+    AnyValue StyledResolver::resolveStyle(
+            const AnyValue &value,
+            const std::string &variableScope,
+            typename reactnativecss::Effect::GetProxy &get
+    ) {
+        // Check if value is an array
+        if (std::holds_alternative<AnyArray>(value)) {
+            const auto &arr = std::get<AnyArray>(value);
+
+            // Check if array has at least one element and first element is "fn"
+            if (!arr.empty() &&
+                std::holds_alternative<std::string>(arr[0]) &&
+                std::get<std::string>(arr[0]) == "fn") {
+
+                // Resolve the function
+                return StyleFunction::resolveStyleFn(arr, get, variableScope);
+            }
+        }
+
+        // Otherwise return the value as-is
+        return value;
+    }
+
+} // namespace margelo::nitro::cssnitro
+

cpp/StyledResolver.hpp

@@ -0,0 +1,39 @@
+//
+// Created on October 19, 2025.
+//
+
+#pragma once
+
+#include <string>
+#include "Effect.hpp"
+#include <NitroModules/AnyMap.hpp>
+
+namespace margelo::nitro {
+    struct AnyValue;
+    using AnyArray = std::vector<AnyValue>;
+}
+
+namespace margelo::nitro::cssnitro {
+
+    using AnyValue = ::margelo::nitro::AnyValue;
+    using AnyArray = ::margelo::nitro::AnyArray;
+
+    class StyledResolver {
+    public:
+        /**
+         * Resolve a style value, checking if it's a function that needs to be resolved.
+         *
+         * @param value The value to resolve
+         * @param variableScope The variable scope context for resolving variables
+         * @param get The Effect::GetProxy for reactive dependencies
+         * @return The resolved style value
+         */
+        static AnyValue resolveStyle(
+                const AnyValue &value,
+                const std::string &variableScope,
+                typename reactnativecss::Effect::GetProxy &get
+        );
+    };
+
+} // namespace margelo::nitro::cssnitro
+

cpp/VariableContext.cpp

@@ -1,5 +1,6 @@
 #include "VariableContext.hpp"
 #include "Rules.hpp"
+#include "StyledResolver.hpp"
 
 namespace margelo::nitro::cssnitro {
 
@@ -56,11 +57,8 @@ namespace margelo::nitro::cssnitro {
             auto &valueMap = contextIt->second.values;
             auto varIt = valueMap.find(name);
             if (varIt != valueMap.end()) {
-                auto result = getValue(varIt->second, get);
-                // If the value is not nullopt, return it
-                if (!std::holds_alternative<std::monostate>(result)) {
-                    return result;
-                }
+                AnyValue value = getValue(varIt->second, get);
+                return StyledResolver::resolveStyle(value, contextKey, get);
             } else {
                 // Variable doesn't exist in this context
                 // Check if this is a root or universal context
@@ -71,10 +69,8 @@ namespace margelo::nitro::cssnitro {
                     valueMap[name] = computed;
 
                     // Get the initial value from the computed
-                    auto result = get(*computed);
-                    if (!std::holds_alternative<std::monostate>(result)) {
-                        return result;
-                    }
+                    AnyValue value = getValue(computed, get);
+                    return StyledResolver::resolveStyle(value, contextKey, get);
                 } else {
                     // For other contexts, create a new Observable with nullptr
                     auto observable = reactnativecss::Observable<AnyValue>::create(AnyValue());

example/src/App.tsx

@@ -13,21 +13,29 @@ StyleRegistry.addStyleSheet({
           d: [
             {
               color: "red",
-              transitionProperty: "color",
-              transitionDuration: "5s",
+              // transitionProperty: "color",
+              // transitionDuration: "5s",
+            },
+            {
+              selectionColor: "green",
             },
           ],
         },
-        {
-          s: specificity({ className: 4 }),
-          d: [{ color: "purple" }],
-          aq: { a: [["true", "disabled"]] },
-        },
+        // {
+        //   s: specificity({ className: 4 }),
+        //   d: [{ color: ["fn", "var", "my-custom-color"] }, { color: "blue" }],
+        //   aq: { a: [["true", "disabled"]] },
+        // },
       ],
     ],
   ],
 });
 
+// StyleRegistry.setRootVariables({
+//   "my-custom-color": ["fn", "var", "second-color"],
+//   "second-color": "green",
+// });
+
 export default function App() {
   return (
     <View style={styles.container}>