feat: addStyleSHeet

Author: marklawlor

cpp/HybridStyleRegistry.cpp

@@ -29,6 +29,8 @@ namespace margelo::nitro::cssnitro {
 
         void set(const std::string &className, const std::vector<HybridStyleRule> &styleRule);
 
+        void addStyleSheet(const HybridStyleSheet &stylesheet);
+
         Declarations
         getDeclarations(const std::string &componentId, const std::string &classNames,
                         const std::string &variableScope, const std::string &containerScope);
@@ -100,6 +102,10 @@ namespace margelo::nitro::cssnitro {
         impl_->set(className, styleRule);
     }
 
+    void HybridStyleRegistry::addStyleSheet(const HybridStyleSheet &stylesheet) {
+        impl_->addStyleSheet(stylesheet);
+    }
+
     Declarations HybridStyleRegistry::getDeclarations(const std::string &componentId,
                                                       const std::string &classNames,
                                                       const std::string &variableScope,
@@ -183,6 +189,24 @@ namespace margelo::nitro::cssnitro {
         }
     }
 
+    void HybridStyleRegistry::Impl::addStyleSheet(const HybridStyleSheet &stylesheet) {
+        // Create an Effect batch to process all style updates together
+        reactnativecss::Effect::batch([this, &stylesheet]() {
+            // If the key "s" exists, loop over every entry
+            if (stylesheet.s.has_value()) {
+                const auto &styles = stylesheet.s.value();
+                for (const auto &entry: styles) {
+                    // entry is a tuple<string, HybridStyleRule>
+                    // entry[0] is the className, entry[1] is the styleRule
+                    const std::string &className = std::get<0>(entry);
+                    const std::vector<HybridStyleRule> &styleRule = std::get<1>(entry);
+
+                    // Call set with a vector containing the single styleRule
+                    set(className, styleRule);
+                }
+            }
+        });
+    }
 
     Declarations HybridStyleRegistry::Impl::getDeclarations(const std::string &componentId,
                                                             const std::string &classNames,

cpp/HybridStyleRegistry.hpp

@@ -39,6 +39,8 @@ namespace margelo::nitro::cssnitro {
         void set(const std::string &className,
                  const std::vector<HybridStyleRule> &styleRule) override;
 
+        void addStyleSheet(const HybridStyleSheet &stylesheet) override;
+
         Declarations getDeclarations(const std::string &componentId, const std::string &classNames,
                                      const std::string &variableScope,
                                      const std::string &containerScope) override;

cpp/VariableContext.hpp

@@ -3,7 +3,7 @@
 #include <string>
 #include <unordered_map>
 #include <memory>
-#include <NitroModules/AnyValue.hpp>
+#include <NitroModules/AnyMap.hpp>
 #include "Observable.hpp"
 #include "Effect.hpp"
 

example/src/App.tsx

@@ -3,11 +3,22 @@ import { StyleSheet, View } from "react-native";
 import { multiply, StyleRegistry } from "react-native-css-nitro";
 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", []] }] },
-]);
+StyleRegistry.addStyleSheet({
+  s: [
+    [
+      "text-red-500",
+      [
+        { s: [], d: [{ color: "red" }] },
+        {
+          s: [],
+          d: [{ color: "green" }],
+          m: { orientation: ["=", "landscape"] },
+        },
+        { s: [], d: [{ color: ["fn", "test", []] }] },
+      ],
+    ],
+  ],
+});
 
 export default function App() {
   return (

src/specs/StyleRegistry/HybridStyleRegistry.nitro.ts

@@ -7,6 +7,7 @@ export type HybridStyleRegistry = StyleRegistry & RawStyleRegistry;
 export interface StyleRegistry
   extends HybridObject<{ ios: "c++"; android: "c++" }> {
   set(className: string, styleRule: HybridStyleRule[]): void;
+  addStyleSheet(stylesheet: HybridStyleSheet): void;
   getDeclarations(
     componentId: string,
     classNames: string,
@@ -100,11 +101,26 @@ export type StyleConfig = [
 ];
 export type StyleConfigNativeStyleToProp = [string, string[]];
 
+/******************************    StyleSheet   *******************************/
+
+export interface HybridStyleSheet {
+  /** rem */
+  r?: number;
+  /** StyleRuleSets */
+  s?: (readonly [string, HybridStyleRule[]])[];
+  // /** KeyFrames */
+  // k?: Animation[];
+  // /** Root Variables */
+  vr?: AnyMap;
+  // /** Universal Variables */
+  // vu?: RootVariables;
+}
+
 /******************************    StyleRule    *******************************/
 
 interface HybridStyleRule {
   s: SpecificityArray;
-  v?: HybridVariableDescriptor[];
+  v?: AnyMap;
 
   /** Declarations */
   d?: [AnyMap] | [AnyMap, AnyMap?];
@@ -114,10 +130,3 @@ interface HybridStyleRule {
 }
 
 type SpecificityArray = number[];
-
-/******************************    Variables    *******************************/
-
-type HybridVariableDescriptor = [
-  string,
-  AnyMap | AnyMap[] | string | number | boolean,
-];