react-native-unistyles 3.0.0-alpha.14 → 3.0.0-alpha.16

package/cxx/core/UnistylesCommitHook.cpp

@@ -17,30 +17,30 @@ RootShadowNode::Unshared core::UnistylesCommitHook::shadowTreeWillCommit(
 ) noexcept {
     RootShadowNode::Unshared rootNode = newRootShadowNode;
     auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootShadowNode);
-    
+
     // skip only unistyles commits
     if (unistylesRootNode->hasUnistylesCommitTrait()) {
         unistylesRootNode->removeUnistylesCommitTrait();
         unistylesRootNode->addUnistylesMountTrait();
-        
+
         return newRootShadowNode;
     }
 
     auto& registry = core::UnistylesRegistry::get();
-    
+
     if (!registry.trafficController.hasUnistylesCommit()) {
         return newRootShadowNode;
     }
-    
+
     auto shadowLeafUpdates = this->getUnistylesUpdates();
-    
+
     if (shadowLeafUpdates.size() == 0) {
         return newRootShadowNode;
     }
 
     // this is required, otherwise we end up with old shadow tree in mount hook
     registry.trafficController.stopUnistylesTraffic();
-    
+
     auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(*rootNode, shadowLeafUpdates);
 
     return std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
@@ -55,8 +55,8 @@ shadow::ShadowLeafUpdates core::UnistylesCommitHook::getUnistylesUpdates() {
     auto& registry = core::UnistylesRegistry::get();
     auto parser = parser::Parser(this->_unistylesRuntime);
     auto dependencyMap = registry.buildDependencyMap(*this->_rt);
-    
-    parser.rebuildUnistylesInDependencyMap(*this->_rt, dependencyMap);
-    
+
+    // don't rebuild dependency map, at this point it's already done
+
     return parser.dependencyMapToShadowLeafUpdates(dependencyMap);
 }

package/cxx/core/UnistylesMountHook.cpp

@@ -19,27 +19,11 @@ void core::UnistylesMountHook::shadowTreeDidMount(RootShadowNode::Shared const &
         return;
     }
 
-    // this is React Native commit
+    // React Native commit did mount
     auto& registry = core::UnistylesRegistry::get();
 
+    // so, resume Unistyles commits
     registry.trafficController.resumeUnistylesTraffic();
-
-    // this will prevent crash when re-rendering view
-    // as Unistyles has nothing to commit yet, but dependency map
-    // will build all the shadow nodes
-    if (!registry.trafficController.hasUnistylesCommit()) {
-        return;
-    }
-
-    registry.trafficController.setHasUnistylesCommit(false);
-
-    auto shadowLeafUpdates = this->getUnistylesUpdates();
-
-    if (shadowLeafUpdates.size() == 0) {
-        return;
-    }
-
-    shadow::ShadowTreeManager::updateShadowTree(*this->_rt, shadowLeafUpdates);
 }
 
 shadow::ShadowLeafUpdates core::UnistylesMountHook::getUnistylesUpdates() {
@@ -47,7 +31,7 @@ shadow::ShadowLeafUpdates core::UnistylesMountHook::getUnistylesUpdates() {
     auto parser = parser::Parser(this->_unistylesRuntime);
     auto dependencyMap = registry.buildDependencyMap(*this->_rt);
 
-    parser.rebuildUnistylesInDependencyMap(*this->_rt, dependencyMap);
+    // don't rebuild dependency map, at this point it's already done
 
     return parser.dependencyMapToShadowLeafUpdates(dependencyMap);
 }

package/cxx/core/UnistylesState.cpp

@@ -88,8 +88,14 @@ int core::UnistylesState::parseColor(jsi::Value& maybeColor) {
         return 0;
     }
     
-    // we must convert it to uint32_t first, otherwise color will be broken
-    uint32_t color = this->_processColorFn.get()->call(*_rt, maybeColor.asString(*_rt)).asNumber();
-
-    return color ? color : 0;
+    auto colorString = maybeColor.asString(*_rt);
+    
+    if (!this->_colorCache.contains(colorString.utf8(*_rt).c_str())) {
+        // we must convert it to uint32_t first, otherwise color will be broken
+        uint32_t color = this->_processColorFn.get()->call(*_rt, colorString).asNumber();
+        
+        this->_colorCache[colorString.utf8(*_rt).c_str()] = color ? color : 0;
+    }
+    
+    return this->_colorCache[colorString.utf8(*_rt).c_str()];
 }

package/cxx/core/UnistylesState.h

@@ -43,6 +43,7 @@ private:
     std::vector<std::string> _registeredThemeNames{};
     std::optional<std::string> _currentThemeName = std::nullopt;
     std::shared_ptr<jsi::Function> _processColorFn;
+    std::unordered_map<std::string, uint32_t> _colorCache{};
 
     friend class UnistylesRegistry;
 };

package/cxx/hybridObjects/HybridStyleSheet.cpp

@@ -236,6 +236,9 @@ void HybridStyleSheet::onPlatformDependenciesChange(std::vector<UnistyleDependen
 
     parser.rebuildUnistylesInDependencyMap(rt, dependencyMap);
 
+    // this is required, otherwise shadow tree will ignore Unistyles commit
+    registry.trafficController.setHasUnistylesCommit(true);
+
     auto shadowLeafUpdates = parser.dependencyMapToShadowLeafUpdates(dependencyMap);
 
     shadow::ShadowTreeManager::updateShadowTree(rt, shadowLeafUpdates);

package/cxx/parser/Parser.cpp

@@ -100,20 +100,24 @@ void parser::Parser::rebuildUnistylesWithVariants(jsi::Runtime& rt, std::shared_
 
 // rebuild all unistyles that are affected by platform event
 void parser::Parser::rebuildUnistylesInDependencyMap(jsi::Runtime& rt, DependencyMap& dependencyMap) {
+    std::unordered_map<std::shared_ptr<StyleSheet>, jsi::Value> parsedStyleSheets{};
+
     for (auto& [shadowNode, unistyles] : dependencyMap) {
         auto styleSheet = unistyles.begin()->get()->unistyle->parent;
-        
-        jsi::Object unwrappedStyleSheet = this->unwrapStyleSheet(rt, styleSheet);
+
+        if (!parsedStyleSheets.contains(styleSheet)) {
+            parsedStyleSheets.emplace(styleSheet, this->unwrapStyleSheet(rt, styleSheet));
+        }
 
         for (auto& unistyleData : unistyles) {
             auto& unistyle = unistyleData->unistyle;
 
             // StyleSheet might have styles that are not affected
-            if (!unwrappedStyleSheet.hasProperty(rt, unistyle->styleKey.c_str())) {
+            if (!parsedStyleSheets[styleSheet].asObject(rt).hasProperty(rt, unistyle->styleKey.c_str())) {
                 continue;
             }
 
-            unistyle->rawValue = unwrappedStyleSheet.getProperty(rt, unistyle->styleKey.c_str()).asObject(rt);
+            unistyle->rawValue = parsedStyleSheets[styleSheet].asObject(rt).getProperty(rt, unistyle->styleKey.c_str()).asObject(rt);
             this->rebuildUnistyle(rt, styleSheet, unistyle, unistyleData->variants, unistyleData->dynamicFunctionMetadata);
             unistyleData->parsedStyle = jsi::Value(rt, unistyle->parsedStyle.value()).asObject(rt);
         }
@@ -162,10 +166,10 @@ void parser::Parser::rebuildUnistyle(jsi::Runtime& rt, std::shared_ptr<StyleShee
 shadow::ShadowLeafUpdates parser::Parser::dependencyMapToShadowLeafUpdates(core::DependencyMap& dependencyMap) {
     shadow::ShadowLeafUpdates updates;
     auto& rt = this->_unistylesRuntime->getRuntime();
-    
+
     for (const auto& [shadowNode, unistyles] : dependencyMap) {
         auto rawProps = this->parseStylesToShadowTreeStyles(rt, unistyles);
-        
+
         updates.emplace(shadowNode, std::move(rawProps));
     }
 
@@ -285,7 +289,7 @@ jsi::Function parser::Parser::createDynamicFunctionProxy(jsi::Runtime& rt, Unist
         [this, unistylesRuntime, unistyle](jsi::Runtime& rt, const jsi::Value& thisVal, const jsi::Value* args, size_t count) {
             auto thisObject = thisVal.asObject(rt);
             auto parser = parser::Parser(unistylesRuntime);
-            
+
             // call user function
             auto result = unistyle->rawValue.asFunction(rt).call(rt, args, count);
 
@@ -300,7 +304,7 @@ jsi::Function parser::Parser::createDynamicFunctionProxy(jsi::Runtime& rt, Unist
             std::optional<Variants> variants = rawVariants.isUndefined()
                 ? std::nullopt
                 : std::optional<Variants>(helpers::variantsToPairs(rt, rawVariants.asObject(rt)));
-            
+
             unistyleFn->parsedStyle = this->parseFirstLevel(rt, unistyleFn, variants);
             unistyleFn->seal();
 
@@ -615,8 +619,13 @@ jsi::Value parser::Parser::parseSecondLevel(jsi::Runtime &rt, Unistyle::Shared u
 RawProps parser::Parser::parseStylesToShadowTreeStyles(jsi::Runtime& rt, const std::vector<std::shared_ptr<UnistyleData>>& unistyles) {
     jsi::Object convertedStyles = jsi::Object(rt);
     auto& state = core::UnistylesRegistry::get().getState(rt);
-    
+
     for (const auto& unistyleData : unistyles) {
+        if (!unistyleData->parsedStyle.has_value()) {
+            // todo this something happens with large dataset, debug it
+            continue;
+        }
+        
         helpers::enumerateJSIObject(rt, unistyleData->parsedStyle.value(), [&](const std::string& propertyName, jsi::Value& propertyValue){
             if (this->isColor(propertyName)) {
                 return convertedStyles.setProperty(rt, propertyName.c_str(), jsi::Value(state.parseColor(propertyValue)));

package/cxx/shadowTree/ShadowTreeManager.cpp

@@ -10,10 +10,10 @@ void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt, sha
     auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
     const auto &shadowTreeRegistry = uiManager.getShadowTreeRegistry();
     auto& registry = core::UnistylesRegistry::get();
-    
+
     if (registry.trafficController.shouldStop()) {
         registry.trafficController.setHasUnistylesCommit(true);
-        
+
         return;
     }
 
@@ -29,10 +29,10 @@ void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt, sha
                 updates,
                 affectedNodes
             ));
-            
+
             // set unistyles commit trait
             auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootNode);
-            
+
             unistylesRootNode->addUnistylesCommitTrait();
 
             return newRootNode;
@@ -43,7 +43,7 @@ void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt, sha
         // enableStateReconciliation: https://reactnative.dev/architecture/render-pipeline#react-native-renderer-state-updates
         // mountSynchronously: must be true as this is update from C++ not React
         shadowTree.commit(transaction, {false, true});
-        
+
 
         // for now we're assuming single surface, can be improved in the future
         // stop = true means stop enumerating next shadow tree

package/lib/commonjs/web/variants/useVariants.js

@@ -26,12 +26,29 @@ const createUseVariants = (styles, setSelectedVariants) => {
     }, [lastSelectedVariantsRef.current]);
     combinedVariantStyles.forEach(([key]) => {
       const styleEntry = styles[key];
+      if (!styleEntry) {
+        return;
+      }
       const selectedVariantStyles = selectedVariantStylesMap.get(key);
       Object.defineProperties(styleEntry, (0, _utils.reduceObject)(selectedVariantStyles ?? {}, value => ({
         value,
         enumerable: false,
         configurable: true
       })));
+
+      // Add __uni__variants to static styles
+      Object.keys(styleEntry).forEach(key => {
+        if (!key.startsWith('__uni__secrets__')) {
+          return;
+        }
+        const secret = (0, _utils.keyInObject)(styleEntry, key) ? styleEntry[key] : undefined;
+        if (!secret) {
+          return;
+        }
+        Object.defineProperty(secret, '__uni__variants', {
+          value: selectedVariants
+        });
+      });
     });
   };
   Object.defineProperty(styles, 'useVariants', {

package/lib/commonjs/web/variants/useVariants.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","_getVariants","createUseVariants","styles","setSelectedVariants","useVariants","selectedVariants","selectedVariantStylesMap","useState","Map","lastSelectedVariantsRef","useRef","variantsChanged","equal","current","combinedVariantStyles","useMemo","result","getVariants","forEach","key","value","set","styleEntry","selectedVariantStyles","get","Object","defineProperties","reduceObject","enumerable","configurable","defineProperty","exports"],"sourceRoot":"../../../../src","sources":["web/variants/useVariants.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAEO,MAAMG,iBAAiB,GAAGA,CAACC,MAAyC,EAAEC,mBAA4D,KAAK;EAC1I,MAAMC,WAAW,GAAIC,gBAAqC,IAAK;IAC3D,MAAM,CAACC,wBAAwB,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM,IAAIC,GAAG,CAA8B,CAAC,CAAC;IACzF,MAAMC,uBAAuB,GAAG,IAAAC,aAAM,EAAsB,CAAC;IAC7D;IACA,MAAMC,eAAe,GAAG,CAAC,IAAAC,YAAK,EAACH,uBAAuB,CAACI,OAAO,EAAER,gBAAgB,CAAC;IAEjF,IAAIM,eAAe,EAAE;MACjBF,uBAAuB,CAACI,OAAO,GAAGR,gBAAgB;MAClDF,mBAAmB,CAACE,gBAAgB,CAAC;IACzC;IAEA,MAAMS,qBAAqB,GAAG,IAAAC,cAAO,EAAC,MAAM;MACxC,MAAMC,MAAM,GAAG,IAAAC,wBAAW,EAACf,MAAM,EAAEG,gBAAgB,CAAC;MAEpDW,MAAM,CAACE,OAAO,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;QAC7Bd,wBAAwB,CAACe,GAAG,CAACF,GAAG,EAAEC,KAAK,CAAC;MAC5C,CAAC,CAAC;MAEF,OAAOJ,MAAM;IACjB,CAAC,EAAE,CAACP,uBAAuB,CAACI,OAAO,CAAC,CAAC;IAErCC,qBAAqB,CAACI,OAAO,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK;MACrC,MAAMG,UAAU,GAAGpB,MAAM,CAACiB,GAAG,CAAC;MAC9B,MAAMI,qBAAqB,GAAGjB,wBAAwB,CAACkB,GAAG,CAACL,GAAG,CAAC;MAE/DM,MAAM,CAACC,gBAAgB,CAACJ,UAAU,EAAE,IAAAK,mBAAY,EAACJ,qBAAqB,IAAI,CAAC,CAAC,EAAEH,KAAK,KAAK;QACpFA,KAAK;QACLQ,UAAU,EAAE,KAAK;QACjBC,YAAY,EAAE;MAClB,CAAC,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;EACN,CAAC;EAEDJ,MAAM,CAACK,cAAc,CAAC5B,MAAM,EAAE,aAAa,EAAE;IACzCkB,KAAK,EAAEhB;EACX,CAAC,CAAC;AACN,CAAC;AAAA2B,OAAA,CAAA9B,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","_utils","_getVariants","createUseVariants","styles","setSelectedVariants","useVariants","selectedVariants","selectedVariantStylesMap","useState","Map","lastSelectedVariantsRef","useRef","variantsChanged","equal","current","combinedVariantStyles","useMemo","result","getVariants","forEach","key","value","set","styleEntry","selectedVariantStyles","get","Object","defineProperties","reduceObject","enumerable","configurable","keys","startsWith","secret","keyInObject","undefined","defineProperty","exports"],"sourceRoot":"../../../../src","sources":["web/variants/useVariants.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AAEO,MAAMG,iBAAiB,GAAGA,CAACC,MAAyC,EAAEC,mBAA4D,KAAK;EAC1I,MAAMC,WAAW,GAAIC,gBAAqC,IAAK;IAC3D,MAAM,CAACC,wBAAwB,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM,IAAIC,GAAG,CAA8B,CAAC,CAAC;IACzF,MAAMC,uBAAuB,GAAG,IAAAC,aAAM,EAAsB,CAAC;IAC7D;IACA,MAAMC,eAAe,GAAG,CAAC,IAAAC,YAAK,EAACH,uBAAuB,CAACI,OAAO,EAAER,gBAAgB,CAAC;IAEjF,IAAIM,eAAe,EAAE;MACjBF,uBAAuB,CAACI,OAAO,GAAGR,gBAAgB;MAClDF,mBAAmB,CAACE,gBAAgB,CAAC;IACzC;IAEA,MAAMS,qBAAqB,GAAG,IAAAC,cAAO,EAAC,MAAM;MACxC,MAAMC,MAAM,GAAG,IAAAC,wBAAW,EAACf,MAAM,EAAEG,gBAAgB,CAAC;MAEpDW,MAAM,CAACE,OAAO,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;QAC7Bd,wBAAwB,CAACe,GAAG,CAACF,GAAG,EAAEC,KAAK,CAAC;MAC5C,CAAC,CAAC;MAEF,OAAOJ,MAAM;IACjB,CAAC,EAAE,CAACP,uBAAuB,CAACI,OAAO,CAAC,CAAC;IAErCC,qBAAqB,CAACI,OAAO,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK;MACrC,MAAMG,UAAU,GAAGpB,MAAM,CAACiB,GAAG,CAAC;MAE9B,IAAI,CAACG,UAAU,EAAE;QACb;MACJ;MAEA,MAAMC,qBAAqB,GAAGjB,wBAAwB,CAACkB,GAAG,CAACL,GAAG,CAAC;MAE/DM,MAAM,CAACC,gBAAgB,CAACJ,UAAU,EAAE,IAAAK,mBAAY,EAACJ,qBAAqB,IAAI,CAAC,CAAC,EAAEH,KAAK,KAAK;QACpFA,KAAK;QACLQ,UAAU,EAAE,KAAK;QACjBC,YAAY,EAAE;MAClB,CAAC,CAAC,CAAC,CAAC;;MAEJ;MACAJ,MAAM,CAACK,IAAI,CAACR,UAAU,CAAC,CAACJ,OAAO,CAACC,GAAG,IAAI;QACnC,IAAI,CAACA,GAAG,CAACY,UAAU,CAAC,kBAAkB,CAAC,EAAE;UACrC;QACJ;QAEA,MAAMC,MAAM,GAAG,IAAAC,kBAAW,EAACX,UAAU,EAAEH,GAAG,CAAC,GAAGG,UAAU,CAACH,GAAG,CAAC,GAAGe,SAAS;QAEzE,IAAI,CAACF,MAAM,EAAE;UACT;QACJ;QAEAP,MAAM,CAACU,cAAc,CAACH,MAAM,EAAE,iBAAiB,EAAE;UAC7CZ,KAAK,EAAEf;QACX,CAAC,CAAC;MACN,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC;EAEDoB,MAAM,CAACU,cAAc,CAACjC,MAAM,EAAE,aAAa,EAAE;IACzCkB,KAAK,EAAEhB;EACX,CAAC,CAAC;AACN,CAAC;AAAAgC,OAAA,CAAAnC,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/module/web/variants/useVariants.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useMemo, useRef, useState } from 'react';
-import { equal, reduceObject } from '../utils';
+import { equal, keyInObject, reduceObject } from '../utils';
 import { getVariants } from './getVariants';
 export const createUseVariants = (styles, setSelectedVariants) => {
   const useVariants = selectedVariants => {
@@ -22,12 +22,29 @@ export const createUseVariants = (styles, setSelectedVariants) => {
     }, [lastSelectedVariantsRef.current]);
     combinedVariantStyles.forEach(([key]) => {
       const styleEntry = styles[key];
+      if (!styleEntry) {
+        return;
+      }
       const selectedVariantStyles = selectedVariantStylesMap.get(key);
       Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
         value,
         enumerable: false,
         configurable: true
       })));
+
+      // Add __uni__variants to static styles
+      Object.keys(styleEntry).forEach(key => {
+        if (!key.startsWith('__uni__secrets__')) {
+          return;
+        }
+        const secret = keyInObject(styleEntry, key) ? styleEntry[key] : undefined;
+        if (!secret) {
+          return;
+        }
+        Object.defineProperty(secret, '__uni__variants', {
+          value: selectedVariants
+        });
+      });
     });
   };
   Object.defineProperty(styles, 'useVariants', {

package/lib/module/web/variants/useVariants.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useRef","useState","equal","reduceObject","getVariants","createUseVariants","styles","setSelectedVariants","useVariants","selectedVariants","selectedVariantStylesMap","Map","lastSelectedVariantsRef","variantsChanged","current","combinedVariantStyles","result","forEach","key","value","set","styleEntry","selectedVariantStyles","get","Object","defineProperties","enumerable","configurable","defineProperty"],"sourceRoot":"../../../../src","sources":["web/variants/useVariants.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEjD,SAASC,KAAK,EAAEC,YAAY,QAAQ,UAAU;AAC9C,SAASC,WAAW,QAAQ,eAAe;AAE3C,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,MAAyC,EAAEC,mBAA4D,KAAK;EAC1I,MAAMC,WAAW,GAAIC,gBAAqC,IAAK;IAC3D,MAAM,CAACC,wBAAwB,CAAC,GAAGT,QAAQ,CAAC,MAAM,IAAIU,GAAG,CAA8B,CAAC,CAAC;IACzF,MAAMC,uBAAuB,GAAGZ,MAAM,CAAsB,CAAC;IAC7D;IACA,MAAMa,eAAe,GAAG,CAACX,KAAK,CAACU,uBAAuB,CAACE,OAAO,EAAEL,gBAAgB,CAAC;IAEjF,IAAII,eAAe,EAAE;MACjBD,uBAAuB,CAACE,OAAO,GAAGL,gBAAgB;MAClDF,mBAAmB,CAACE,gBAAgB,CAAC;IACzC;IAEA,MAAMM,qBAAqB,GAAGhB,OAAO,CAAC,MAAM;MACxC,MAAMiB,MAAM,GAAGZ,WAAW,CAACE,MAAM,EAAEG,gBAAgB,CAAC;MAEpDO,MAAM,CAACC,OAAO,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;QAC7BT,wBAAwB,CAACU,GAAG,CAACF,GAAG,EAAEC,KAAK,CAAC;MAC5C,CAAC,CAAC;MAEF,OAAOH,MAAM;IACjB,CAAC,EAAE,CAACJ,uBAAuB,CAACE,OAAO,CAAC,CAAC;IAErCC,qBAAqB,CAACE,OAAO,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK;MACrC,MAAMG,UAAU,GAAGf,MAAM,CAACY,GAAG,CAAC;MAC9B,MAAMI,qBAAqB,GAAGZ,wBAAwB,CAACa,GAAG,CAACL,GAAG,CAAC;MAE/DM,MAAM,CAACC,gBAAgB,CAACJ,UAAU,EAAElB,YAAY,CAACmB,qBAAqB,IAAI,CAAC,CAAC,EAAEH,KAAK,KAAK;QACpFA,KAAK;QACLO,UAAU,EAAE,KAAK;QACjBC,YAAY,EAAE;MAClB,CAAC,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;EACN,CAAC;EAEDH,MAAM,CAACI,cAAc,CAACtB,MAAM,EAAE,aAAa,EAAE;IACzCa,KAAK,EAAEX;EACX,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"names":["useMemo","useRef","useState","equal","keyInObject","reduceObject","getVariants","createUseVariants","styles","setSelectedVariants","useVariants","selectedVariants","selectedVariantStylesMap","Map","lastSelectedVariantsRef","variantsChanged","current","combinedVariantStyles","result","forEach","key","value","set","styleEntry","selectedVariantStyles","get","Object","defineProperties","enumerable","configurable","keys","startsWith","secret","undefined","defineProperty"],"sourceRoot":"../../../../src","sources":["web/variants/useVariants.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEjD,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,UAAU;AAC3D,SAASC,WAAW,QAAQ,eAAe;AAE3C,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,MAAyC,EAAEC,mBAA4D,KAAK;EAC1I,MAAMC,WAAW,GAAIC,gBAAqC,IAAK;IAC3D,MAAM,CAACC,wBAAwB,CAAC,GAAGV,QAAQ,CAAC,MAAM,IAAIW,GAAG,CAA8B,CAAC,CAAC;IACzF,MAAMC,uBAAuB,GAAGb,MAAM,CAAsB,CAAC;IAC7D;IACA,MAAMc,eAAe,GAAG,CAACZ,KAAK,CAACW,uBAAuB,CAACE,OAAO,EAAEL,gBAAgB,CAAC;IAEjF,IAAII,eAAe,EAAE;MACjBD,uBAAuB,CAACE,OAAO,GAAGL,gBAAgB;MAClDF,mBAAmB,CAACE,gBAAgB,CAAC;IACzC;IAEA,MAAMM,qBAAqB,GAAGjB,OAAO,CAAC,MAAM;MACxC,MAAMkB,MAAM,GAAGZ,WAAW,CAACE,MAAM,EAAEG,gBAAgB,CAAC;MAEpDO,MAAM,CAACC,OAAO,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;QAC7BT,wBAAwB,CAACU,GAAG,CAACF,GAAG,EAAEC,KAAK,CAAC;MAC5C,CAAC,CAAC;MAEF,OAAOH,MAAM;IACjB,CAAC,EAAE,CAACJ,uBAAuB,CAACE,OAAO,CAAC,CAAC;IAErCC,qBAAqB,CAACE,OAAO,CAAC,CAAC,CAACC,GAAG,CAAC,KAAK;MACrC,MAAMG,UAAU,GAAGf,MAAM,CAACY,GAAG,CAAC;MAE9B,IAAI,CAACG,UAAU,EAAE;QACb;MACJ;MAEA,MAAMC,qBAAqB,GAAGZ,wBAAwB,CAACa,GAAG,CAACL,GAAG,CAAC;MAE/DM,MAAM,CAACC,gBAAgB,CAACJ,UAAU,EAAElB,YAAY,CAACmB,qBAAqB,IAAI,CAAC,CAAC,EAAEH,KAAK,KAAK;QACpFA,KAAK;QACLO,UAAU,EAAE,KAAK;QACjBC,YAAY,EAAE;MAClB,CAAC,CAAC,CAAC,CAAC;;MAEJ;MACAH,MAAM,CAACI,IAAI,CAACP,UAAU,CAAC,CAACJ,OAAO,CAACC,GAAG,IAAI;QACnC,IAAI,CAACA,GAAG,CAACW,UAAU,CAAC,kBAAkB,CAAC,EAAE;UACrC;QACJ;QAEA,MAAMC,MAAM,GAAG5B,WAAW,CAACmB,UAAU,EAAEH,GAAG,CAAC,GAAGG,UAAU,CAACH,GAAG,CAAC,GAAGa,SAAS;QAEzE,IAAI,CAACD,MAAM,EAAE;UACT;QACJ;QAEAN,MAAM,CAACQ,cAAc,CAACF,MAAM,EAAE,iBAAiB,EAAE;UAC7CX,KAAK,EAAEV;QACX,CAAC,CAAC;MACN,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC;EAEDe,MAAM,CAACQ,cAAc,CAAC1B,MAAM,EAAE,aAAa,EAAE;IACzCa,KAAK,EAAEX;EACX,CAAC,CAAC;AACN,CAAC","ignoreList":[]}

package/lib/typescript/src/web/variants/useVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVariants.d.ts","sourceRoot":"","sources":["../../../../../src/web/variants/useVariants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIpE,eAAO,MAAM,iBAAiB,WAAY,qBAAqB,CAAC,UAAU,CAAC,uBAAuB,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,SAqCxI,CAAA"}
+{"version":3,"file":"useVariants.d.ts","sourceRoot":"","sources":["../../../../../src/web/variants/useVariants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIpE,eAAO,MAAM,iBAAiB,WAAY,qBAAqB,CAAC,UAAU,CAAC,uBAAuB,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,SA2DxI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.14",
+  "version": "3.0.0-alpha.16",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/plugin/index.js

@@ -42,6 +42,37 @@ module.exports = function ({ types: t }) {
                     }
                 }
             },
+            FunctionDeclaration(path, state) {
+                const componentName = path.node.id
+                    ? path.node.id.name
+                    : null
+
+                if (componentName) {
+                    state.file.hasVariants = false
+                }
+            },
+            ClassDeclaration(path, state) {
+                const componentName = path.node.id
+                    ? path.node.id.name
+                    : null
+
+                if (componentName) {
+                    state.file.hasVariants = false
+                }
+            },
+            VariableDeclaration(path, state) {
+                path.node.declarations.forEach((declaration) => {
+                    if (t.isArrowFunctionExpression(declaration.init) || t.isFunctionExpression(declaration.init)) {
+                        const componentName = declaration.id
+                            ? declaration.id.name
+                            : null
+
+                        if (componentName) {
+                            state.file.hasVariants = false
+                        }
+                    }
+                })
+            },
             ImportDeclaration(path, state) {
                 const importSource = path.node.source.value
 

package/src/web/variants/useVariants.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef, useState } from 'react'
 import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
-import { equal, reduceObject } from '../utils'
+import { equal, keyInObject, reduceObject } from '../utils'
 import { getVariants } from './getVariants'
 
 export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
@@ -27,6 +27,11 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, set
 
         combinedVariantStyles.forEach(([key]) => {
             const styleEntry = styles[key]
+
+            if (!styleEntry) {
+                return
+            }
+
             const selectedVariantStyles = selectedVariantStylesMap.get(key)
 
             Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
@@ -34,6 +39,23 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, set
                 enumerable: false,
                 configurable: true
             })))
+
+            // Add __uni__variants to static styles
+            Object.keys(styleEntry).forEach(key => {
+                if (!key.startsWith('__uni__secrets__')) {
+                    return
+                }
+
+                const secret = keyInObject(styleEntry, key) ? styleEntry[key] : undefined
+
+                if (!secret) {
+                    return
+                }
+
+                Object.defineProperty(secret, '__uni__variants', {
+                    value: selectedVariants
+                })
+            })
         })
     }