feat: style functions

Author: marklawlor

cpp/HybridStyleRegistry.cpp

@@ -168,14 +168,18 @@ namespace margelo::nitro::cssnitro {
     }
 
     void HybridStyleRegistry::Impl::set(const std::string &className,
-                                        const std::vector<HybridStyleRule> &styleRule) {
+                                        const std::vector<HybridStyleRule> &styleRules) {
+        // Reverse the style rules, this way later on we can bail early if values are already set
+        auto reversedRules = styleRules;
+        std::reverse(reversedRules.begin(), reversedRules.end());
+
         auto it = styleRuleMap_.find(className);
         if (it == styleRuleMap_.end()) {
             auto observable = reactnativecss::Observable<std::vector<HybridStyleRule>>::create(
-                    styleRule);
+                    reversedRules);
             styleRuleMap_.emplace(className, std::move(observable));
         } else if (it->second) {
-            it->second->set(styleRule);
+            it->second->set(reversedRules);
         }
     }
 

cpp/StyleFunction.cpp

@@ -0,0 +1,23 @@
+//
+// Created on October 15, 2025.
+//
+
+#include "StyleFunction.hpp"
+#include <NitroModules/AnyMap.hpp>
+
+namespace margelo::nitro::cssnitro {
+
+    AnyValue StyleFunction::resolveStyleFn(
+            const std::string &fnName,
+            const AnyArray &fnArgs,
+            typename reactnativecss::Effect::GetProxy &get
+    ) {
+        (void) fnName;
+        (void) fnArgs;
+        (void) get;
+
+
+        return AnyValue("purple");
+    }
+
+} // namespace margelo::nitro::cssnitro

cpp/StyleFunction.hpp

@@ -0,0 +1,41 @@
+//
+// Created on October 15, 2025.
+//
+
+#pragma once
+
+#include <string>
+#include <unordered_map>
+#include <vector>
+#include <variant>
+#include "Effect.hpp"
+
+namespace margelo::nitro {
+    struct AnyValue;
+    using AnyArray = std::vector<AnyValue>;
+    using AnyObject = std::unordered_map<std::string, AnyValue>;
+}
+
+namespace margelo::nitro::cssnitro {
+
+    using AnyValue = ::margelo::nitro::AnyValue;
+    using AnyArray = ::margelo::nitro::AnyArray;
+
+    class StyleFunction {
+    public:
+        /**
+         * Resolve a style function by name with the given arguments.
+         *
+         * @param fnName The name of the function to resolve
+         * @param fnArgs The arguments to pass to the function
+         * @param get The Effect::GetProxy for reactive dependencies
+         * @return The resolved style value
+         */
+        static AnyValue resolveStyleFn(
+                const std::string &fnName,
+                const AnyArray &fnArgs,
+                typename reactnativecss::Effect::GetProxy &get
+        );
+    };
+
+} // namespace margelo::nitro::cssnitro

cpp/StyledComputedFactory.cpp

@@ -3,6 +3,7 @@
 #include "ShadowTreeUpdateManager.hpp"
 #include "Rules.hpp"
 #include "Helpers.hpp"
+#include "StyleFunction.hpp"
 
 #include <regex>
 #include <variant>
@@ -57,13 +58,34 @@ namespace margelo::nitro::cssnitro {
                             }
 
                             if (styleRule.d.has_value()) {
-                                // Get the tuple from styleRule.d
-                                const auto &dTuple = styleRule.d.value();
-
-                                // Merge styleRule.d[0] into mergedStyles
-                                const auto &firstMap = std::get<0>(std::get<0>(dTuple));
-                                for (const auto &kv: firstMap->getMap()) {
-                                    mergedStyles[kv.first] = kv.second;
+                                const auto declarations = styleRule.d.value();
+                                const auto &dStyles = std::get<0>(std::get<0>(declarations));
+                                for (const auto &kv: dStyles->getMap()) {
+                                    // Only set if key doesn't already exist
+                                    if (mergedStyles.count(kv.first) == 0) {
+                                        // if kv.second is an array with "fn" as the first key, resolve it
+                                        if (dStyles->isArray(kv.first)) {
+                                            const auto &arr = dStyles->getArray(kv.first);
+                                            if (!arr.empty() &&
+                                                std::holds_alternative<std::string>(arr[0]) &&
+                                                std::get<std::string>(arr[0]) == "fn") {
+                                                // arr[1] is the function name, arr[2] is the arguments array
+                                                if (arr.size() == 3 &&
+                                                    std::holds_alternative<std::string>(
+                                                            arr[1]) &&
+                                                    std::holds_alternative<AnyArray>(arr[2])) {
+                                                    const auto &fnName = std::get<std::string>(
+                                                            arr[1]);
+                                                    const auto &fnArgs = std::get<AnyArray>(
+                                                            arr[2]);
+                                                    mergedStyles[kv.first] = StyleFunction::resolveStyleFn(
+                                                            fnName, fnArgs, get);
+                                                    continue;
+                                                }
+                                            }
+                                        }
+                                        mergedStyles[kv.first] = kv.second;
+                                    }
                                 }
                                 // Ignore the other entries for now
 

example/src/App.tsx

@@ -6,6 +6,7 @@ import { Text } from "react-native-css-nitro/components/Text";
 StyleRegistry.set("text-red-500", [
   { s: [], d: [{ color: "red" }] },
   { s: [], d: [{ color: "green" }], m: { orientation: ["=", "landscape"] } },
+  { s: [], d: [{ color: ["fn", "test", []] }] },
 ]);
 
 export default function App() {

src/specs/StyleRegistry/HybridStyleRegistry.nitro.ts

@@ -107,7 +107,7 @@ interface HybridStyleRule {
   v?: HybridVariableDescriptor[];
 
   /** Declarations */
-  d?: [AnyMap] | [AnyMap, AnyMap] | [AnyMap, AnyMap | undefined, AnyMap];
+  d?: [AnyMap] | [AnyMap, AnyMap?];
 
   /** MediaQuery */
   m?: AnyMap;