react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/nitrogen/generated/shared/c++/Orientation.hpp

@@ -48,7 +48,7 @@ namespace margelo::nitro {
         case hashString("portrait"): return Orientation::PORTRAIT;
         case hashString("landscape"): return Orientation::LANDSCAPE;
         default: [[unlikely]]
-          throw std::runtime_error("Cannot convert \"" + unionValue + "\" to enum Orientation - invalid value!");
+          throw std::invalid_argument("Cannot convert \"" + unionValue + "\" to enum Orientation - invalid value!");
       }
     }
     static inline jsi::Value toJSI(jsi::Runtime& runtime, Orientation arg) {
@@ -56,7 +56,7 @@ namespace margelo::nitro {
         case Orientation::PORTRAIT: return JSIConverter<std::string>::toJSI(runtime, "portrait");
         case Orientation::LANDSCAPE: return JSIConverter<std::string>::toJSI(runtime, "landscape");
         default: [[unlikely]]
-          throw std::runtime_error("Cannot convert Orientation to JS - invalid value: "
+          throw std::invalid_argument("Cannot convert Orientation to JS - invalid value: "
                                     + std::to_string(static_cast<int>(arg)) + "!");
       }
     }

package/nitrogen/generated/shared/c++/UnistyleDependency.hpp

@@ -39,6 +39,7 @@ namespace margelo::nitro::unistyles {
     FONTSCALE      SWIFT_NAME(fontscale) = 11,
     STATUSBAR      SWIFT_NAME(statusbar) = 12,
     NAVIGATIONBAR      SWIFT_NAME(navigationbar) = 13,
+    IME      SWIFT_NAME(ime) = 14,
   } CLOSED_ENUM;
 
 } // namespace margelo::nitro::unistyles
@@ -69,7 +70,7 @@ namespace margelo::nitro {
         return false;
       }
       // Check if we are within the bounds of the enum.
-      return integer >= 0 && integer <= 13;
+      return integer >= 0 && integer <= 14;
     }
   };
 

package/nitrogen/generated/shared/c++/UnistylesCxxMiniRuntime.hpp

@@ -18,8 +18,6 @@
 #error NitroModules cannot be found! Are you sure you installed NitroModules properly?
 #endif
 
-// Forward declaration of `Orientation` to properly resolve imports.
-namespace margelo::nitro::unistyles { enum class Orientation; }
 // Forward declaration of `ColorScheme` to properly resolve imports.
 namespace margelo::nitro::unistyles { enum class ColorScheme; }
 // Forward declaration of `Dimensions` to properly resolve imports.
@@ -29,7 +27,6 @@ namespace margelo::nitro::unistyles { struct Insets; }
 
 #include <optional>
 #include <string>
-#include "Orientation.hpp"
 #include "ColorScheme.hpp"
 #include "Dimensions.hpp"
 #include "Insets.hpp"
@@ -43,7 +40,6 @@ namespace margelo::nitro::unistyles {
   public:
     std::optional<std::string> themeName     SWIFT_PRIVATE;
     std::optional<std::string> breakpoint     SWIFT_PRIVATE;
-    Orientation orientation     SWIFT_PRIVATE;
     bool hasAdaptiveThemes     SWIFT_PRIVATE;
     ColorScheme colorScheme     SWIFT_PRIVATE;
     Dimensions screen     SWIFT_PRIVATE;
@@ -54,9 +50,11 @@ namespace margelo::nitro::unistyles {
     bool rtl     SWIFT_PRIVATE;
     Dimensions statusBar     SWIFT_PRIVATE;
     Dimensions navigationBar     SWIFT_PRIVATE;
+    bool isPortrait     SWIFT_PRIVATE;
+    bool isLandscape     SWIFT_PRIVATE;
 
   public:
-    explicit UnistylesCxxMiniRuntime(std::optional<std::string> themeName, std::optional<std::string> breakpoint, Orientation orientation, bool hasAdaptiveThemes, ColorScheme colorScheme, Dimensions screen, std::string contentSizeCategory, Insets insets, double pixelRatio, double fontScale, bool rtl, Dimensions statusBar, Dimensions navigationBar): themeName(themeName), breakpoint(breakpoint), orientation(orientation), hasAdaptiveThemes(hasAdaptiveThemes), colorScheme(colorScheme), screen(screen), contentSizeCategory(contentSizeCategory), insets(insets), pixelRatio(pixelRatio), fontScale(fontScale), rtl(rtl), statusBar(statusBar), navigationBar(navigationBar) {}
+    explicit UnistylesCxxMiniRuntime(std::optional<std::string> themeName, std::optional<std::string> breakpoint, bool hasAdaptiveThemes, ColorScheme colorScheme, Dimensions screen, std::string contentSizeCategory, Insets insets, double pixelRatio, double fontScale, bool rtl, Dimensions statusBar, Dimensions navigationBar, bool isPortrait, bool isLandscape): themeName(themeName), breakpoint(breakpoint), hasAdaptiveThemes(hasAdaptiveThemes), colorScheme(colorScheme), screen(screen), contentSizeCategory(contentSizeCategory), insets(insets), pixelRatio(pixelRatio), fontScale(fontScale), rtl(rtl), statusBar(statusBar), navigationBar(navigationBar), isPortrait(isPortrait), isLandscape(isLandscape) {}
   };
 
 } // namespace margelo::nitro::unistyles
@@ -73,7 +71,6 @@ namespace margelo::nitro {
       return UnistylesCxxMiniRuntime(
         JSIConverter<std::optional<std::string>>::fromJSI(runtime, obj.getProperty(runtime, "themeName")),
         JSIConverter<std::optional<std::string>>::fromJSI(runtime, obj.getProperty(runtime, "breakpoint")),
-        JSIConverter<Orientation>::fromJSI(runtime, obj.getProperty(runtime, "orientation")),
         JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "hasAdaptiveThemes")),
         JSIConverter<ColorScheme>::fromJSI(runtime, obj.getProperty(runtime, "colorScheme")),
         JSIConverter<Dimensions>::fromJSI(runtime, obj.getProperty(runtime, "screen")),
@@ -83,14 +80,15 @@ namespace margelo::nitro {
         JSIConverter<double>::fromJSI(runtime, obj.getProperty(runtime, "fontScale")),
         JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "rtl")),
         JSIConverter<Dimensions>::fromJSI(runtime, obj.getProperty(runtime, "statusBar")),
-        JSIConverter<Dimensions>::fromJSI(runtime, obj.getProperty(runtime, "navigationBar"))
+        JSIConverter<Dimensions>::fromJSI(runtime, obj.getProperty(runtime, "navigationBar")),
+        JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "isPortrait")),
+        JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "isLandscape"))
       );
     }
     static inline jsi::Value toJSI(jsi::Runtime& runtime, const UnistylesCxxMiniRuntime& arg) {
       jsi::Object obj(runtime);
       obj.setProperty(runtime, "themeName", JSIConverter<std::optional<std::string>>::toJSI(runtime, arg.themeName));
       obj.setProperty(runtime, "breakpoint", JSIConverter<std::optional<std::string>>::toJSI(runtime, arg.breakpoint));
-      obj.setProperty(runtime, "orientation", JSIConverter<Orientation>::toJSI(runtime, arg.orientation));
       obj.setProperty(runtime, "hasAdaptiveThemes", JSIConverter<bool>::toJSI(runtime, arg.hasAdaptiveThemes));
       obj.setProperty(runtime, "colorScheme", JSIConverter<ColorScheme>::toJSI(runtime, arg.colorScheme));
       obj.setProperty(runtime, "screen", JSIConverter<Dimensions>::toJSI(runtime, arg.screen));
@@ -101,6 +99,8 @@ namespace margelo::nitro {
       obj.setProperty(runtime, "rtl", JSIConverter<bool>::toJSI(runtime, arg.rtl));
       obj.setProperty(runtime, "statusBar", JSIConverter<Dimensions>::toJSI(runtime, arg.statusBar));
       obj.setProperty(runtime, "navigationBar", JSIConverter<Dimensions>::toJSI(runtime, arg.navigationBar));
+      obj.setProperty(runtime, "isPortrait", JSIConverter<bool>::toJSI(runtime, arg.isPortrait));
+      obj.setProperty(runtime, "isLandscape", JSIConverter<bool>::toJSI(runtime, arg.isLandscape));
       return obj;
     }
     static inline bool canConvert(jsi::Runtime& runtime, const jsi::Value& value) {
@@ -110,7 +110,6 @@ namespace margelo::nitro {
       jsi::Object obj = value.getObject(runtime);
       if (!JSIConverter<std::optional<std::string>>::canConvert(runtime, obj.getProperty(runtime, "themeName"))) return false;
       if (!JSIConverter<std::optional<std::string>>::canConvert(runtime, obj.getProperty(runtime, "breakpoint"))) return false;
-      if (!JSIConverter<Orientation>::canConvert(runtime, obj.getProperty(runtime, "orientation"))) return false;
       if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "hasAdaptiveThemes"))) return false;
       if (!JSIConverter<ColorScheme>::canConvert(runtime, obj.getProperty(runtime, "colorScheme"))) return false;
       if (!JSIConverter<Dimensions>::canConvert(runtime, obj.getProperty(runtime, "screen"))) return false;
@@ -121,6 +120,8 @@ namespace margelo::nitro {
       if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "rtl"))) return false;
       if (!JSIConverter<Dimensions>::canConvert(runtime, obj.getProperty(runtime, "statusBar"))) return false;
       if (!JSIConverter<Dimensions>::canConvert(runtime, obj.getProperty(runtime, "navigationBar"))) return false;
+      if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "isPortrait"))) return false;
+      if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "isLandscape"))) return false;
       return true;
     }
   };

package/nitrogen/generated/shared/c++/UnistylesNativeMiniRuntime.hpp

@@ -24,14 +24,11 @@ namespace margelo::nitro::unistyles { enum class ColorScheme; }
 namespace margelo::nitro::unistyles { struct Dimensions; }
 // Forward declaration of `Insets` to properly resolve imports.
 namespace margelo::nitro::unistyles { struct Insets; }
-// Forward declaration of `Orientation` to properly resolve imports.
-namespace margelo::nitro::unistyles { enum class Orientation; }
 
 #include "ColorScheme.hpp"
 #include "Dimensions.hpp"
 #include <string>
 #include "Insets.hpp"
-#include "Orientation.hpp"
 
 namespace margelo::nitro::unistyles {
 
@@ -49,10 +46,11 @@ namespace margelo::nitro::unistyles {
     bool rtl     SWIFT_PRIVATE;
     Dimensions statusBar     SWIFT_PRIVATE;
     Dimensions navigationBar     SWIFT_PRIVATE;
-    Orientation orientation     SWIFT_PRIVATE;
+    bool isPortrait     SWIFT_PRIVATE;
+    bool isLandscape     SWIFT_PRIVATE;
 
   public:
-    explicit UnistylesNativeMiniRuntime(ColorScheme colorScheme, Dimensions screen, std::string contentSizeCategory, Insets insets, double pixelRatio, double fontScale, bool rtl, Dimensions statusBar, Dimensions navigationBar, Orientation orientation): colorScheme(colorScheme), screen(screen), contentSizeCategory(contentSizeCategory), insets(insets), pixelRatio(pixelRatio), fontScale(fontScale), rtl(rtl), statusBar(statusBar), navigationBar(navigationBar), orientation(orientation) {}
+    explicit UnistylesNativeMiniRuntime(ColorScheme colorScheme, Dimensions screen, std::string contentSizeCategory, Insets insets, double pixelRatio, double fontScale, bool rtl, Dimensions statusBar, Dimensions navigationBar, bool isPortrait, bool isLandscape): colorScheme(colorScheme), screen(screen), contentSizeCategory(contentSizeCategory), insets(insets), pixelRatio(pixelRatio), fontScale(fontScale), rtl(rtl), statusBar(statusBar), navigationBar(navigationBar), isPortrait(isPortrait), isLandscape(isLandscape) {}
   };
 
 } // namespace margelo::nitro::unistyles
@@ -76,7 +74,8 @@ namespace margelo::nitro {
         JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "rtl")),
         JSIConverter<Dimensions>::fromJSI(runtime, obj.getProperty(runtime, "statusBar")),
         JSIConverter<Dimensions>::fromJSI(runtime, obj.getProperty(runtime, "navigationBar")),
-        JSIConverter<Orientation>::fromJSI(runtime, obj.getProperty(runtime, "orientation"))
+        JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "isPortrait")),
+        JSIConverter<bool>::fromJSI(runtime, obj.getProperty(runtime, "isLandscape"))
       );
     }
     static inline jsi::Value toJSI(jsi::Runtime& runtime, const UnistylesNativeMiniRuntime& arg) {
@@ -90,7 +89,8 @@ namespace margelo::nitro {
       obj.setProperty(runtime, "rtl", JSIConverter<bool>::toJSI(runtime, arg.rtl));
       obj.setProperty(runtime, "statusBar", JSIConverter<Dimensions>::toJSI(runtime, arg.statusBar));
       obj.setProperty(runtime, "navigationBar", JSIConverter<Dimensions>::toJSI(runtime, arg.navigationBar));
-      obj.setProperty(runtime, "orientation", JSIConverter<Orientation>::toJSI(runtime, arg.orientation));
+      obj.setProperty(runtime, "isPortrait", JSIConverter<bool>::toJSI(runtime, arg.isPortrait));
+      obj.setProperty(runtime, "isLandscape", JSIConverter<bool>::toJSI(runtime, arg.isLandscape));
       return obj;
     }
     static inline bool canConvert(jsi::Runtime& runtime, const jsi::Value& value) {
@@ -107,7 +107,8 @@ namespace margelo::nitro {
       if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "rtl"))) return false;
       if (!JSIConverter<Dimensions>::canConvert(runtime, obj.getProperty(runtime, "statusBar"))) return false;
       if (!JSIConverter<Dimensions>::canConvert(runtime, obj.getProperty(runtime, "navigationBar"))) return false;
-      if (!JSIConverter<Orientation>::canConvert(runtime, obj.getProperty(runtime, "orientation"))) return false;
+      if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "isPortrait"))) return false;
+      if (!JSIConverter<bool>::canConvert(runtime, obj.getProperty(runtime, "isLandscape"))) return false;
       return true;
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.31",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -27,7 +27,7 @@
     "web",
     "react-native.config.js",
     "Unistyles.podspec",
-    "!lib/typescript/examples",
+    "!plugin/__tests__",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -60,45 +60,33 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "7.25.7",
-    "@biomejs/biome": "1.8.3",
-    "@commitlint/config-conventional": "19.2.2",
-    "@react-native/normalize-colors": "0.75.2",
-    "@release-it/conventional-changelog": "8.0.1",
+    "@babel/plugin-syntax-jsx": "7.25.9",
+    "@biomejs/biome": "1.9.4",
+    "@commitlint/config-conventional": "19.5.0",
+    "@react-native/normalize-colors": "0.76.0",
+    "@release-it/conventional-changelog": "8.0.2",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.12",
-    "@types/react": "18.3.4",
+    "@types/jest": "29.5.14",
+    "@types/react": "18.3.12",
     "babel-plugin-tester": "11.0.4",
-    "commitlint": "19.4.0",
+    "commitlint": "19.5.0",
     "concurrently": "8.2.2",
-    "husky": "9.1.5",
+    "husky": "9.1.6",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
-    "nitro-codegen": "0.10.0",
+    "nitro-codegen": "0.14.0",
     "react": "18.3.1",
-    "react-native": "0.75.2",
-    "react-native-builder-bob": "0.30.0",
-    "react-native-nitro-modules": "0.10.0",
-    "react-native-web": "0.19.12",
+    "react-native": "0.76.0",
+    "react-native-builder-bob": "0.30.2",
+    "react-native-nitro-modules": "0.14.0",
     "react-test-renderer": "18.3.1",
-    "release-it": "17.6.0",
-    "typescript": "5.5.4",
-    "typestyle": "2.4.0"
+    "release-it": "17.10.0",
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
     "react": "*",
-    "react-native": "*",
-    "react-native-web": "*",
-    "typestyle": ">=2.4.0"
-  },
-  "peerDependenciesMeta": {
-    "react-native-web": {
-      "optional": true
-    },
-    "typestyle": {
-      "optional": true
-    }
+    "react-native": "*"
   },
   "workspaces": [
     "example",

package/plugin/common.js

@@ -34,7 +34,8 @@ function getIdentifierNameFromExpression(t, memberExpression) {
             getIdentifierNameFromExpression(t, memberExpression.test.left),
             getIdentifierNameFromExpression(t, memberExpression.test.right),
             getIdentifierNameFromExpression(t, memberExpression.alternate),
-            getIdentifierNameFromExpression(t,memberExpression.consequent),
+            getIdentifierNameFromExpression(t, memberExpression.consequent),
+            getIdentifierNameFromExpression(t, memberExpression.test)
         ].flat()
     }
 
@@ -66,6 +67,7 @@ function getSecondPropertyName(t, memberExpression) {
             getSecondPropertyName(t, memberExpression.test.right),
             getSecondPropertyName(t, memberExpression.alternate),
             getSecondPropertyName(t, memberExpression.consequent),
+            getSecondPropertyName(t, memberExpression.test)
         ].flat()
     }
 
@@ -102,6 +104,15 @@ function getSecondPropertyName(t, memberExpression) {
         current = current.object
     }
 
+    // special case for IME
+    if (propertyName && t.isIdentifier(propertyName) && propertyName.name === 'insets') {
+        if (t.isIdentifier(memberExpression.property) && memberExpression.property.name === "ime") {
+            return [memberExpression.property.name]
+        }
+
+        return [propertyName.name]
+    }
+
     if (propertyName && t.isIdentifier(propertyName)) {
         return [propertyName.name]
     }

package/plugin/index.js

@@ -1,7 +1,28 @@
 const addShadowRegistryImport = require('./import')
-const { getStyleObjectPath, getStyleAttribute } = require('./style')
+const { getStyleMetadata, getStyleAttribute, styleAttributeToArray } = require('./style')
 const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
-const { isUnistylesStyleSheet, analyzeDependencies } = require('./stylesheet')
+const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
+const { isUsingVariants, extractVariants } = require('./variants')
+
+const reactNativeComponentNames = [
+    'View',
+    'Text',
+    'Image',
+    'ImageBackground',
+    'KeyboardAvoidingView',
+    'Modal',
+    'Pressable',
+    'ScrollView',
+    'FlatList',
+    'SectionList',
+    'Switch',
+    'Text',
+    'TextInput',
+    'TouchableHighlight',
+    'TouchableOpacity',
+    'TouchableWithoutFeedback',
+    'VirtualizedList'
+]
 
 module.exports = function ({ types: t }) {
     return {
@@ -12,7 +33,9 @@ module.exports = function ({ types: t }) {
                     state.file.hasAnyUnistyle = false
                     state.file.hasUnistylesImport = false
                     state.file.styleSheetLocalName = ''
-                    state.file.webDynamicFunctions = {}
+                    state.file.tagNumber = 0
+                    state.file.isClassComponent = false
+                    state.reactNativeImports = {}
                 },
                 exit(path, state) {
                     if (state.file.hasAnyUnistyle) {
@@ -20,6 +43,38 @@ 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
+                    state.file.isClassComponent = true
+                }
+            },
+            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
 
@@ -32,9 +87,30 @@ module.exports = function ({ types: t }) {
                         }
                     })
                 }
+
+                if (importSource.includes('react-native')) {
+                    path.node.specifiers.forEach(specifier => {
+                        if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
+                            state.reactNativeImports[specifier.local.name] = true
+                        }
+                    })
+                }
             },
             JSXElement(path, state) {
-                if (!state.file.hasUnistylesImport) {
+                if (state.file.isClassComponent) {
+                    return
+                }
+
+                const openingElement = path.node.openingElement
+                const openingElementName = openingElement.name.name
+                const isReactNativeComponent = Boolean(state.reactNativeImports[openingElementName])
+                const isAnimatedComponent = (
+                    !isReactNativeComponent &&
+                    openingElement.name.object &&
+                    openingElement.name.object.name === 'Animated'
+                )
+
+                if (!isReactNativeComponent && !isAnimatedComponent) {
                     return
                 }
 
@@ -45,43 +121,52 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                const stylePath = getStyleObjectPath(t, styleAttr.value.expression, state)
+                const metadata = getStyleMetadata(t, styleAttr.value.expression)
 
-                // style prop is not using object expression
-                if (stylePath.length !== 2) {
+                // style prop is using unexpected expression
+                if (metadata.length === 0) {
                     return
                 }
 
+                styleAttributeToArray(t, path)
+
                 // to add import
                 state.file.hasAnyUnistyle = true
 
-                const refProp = getRefProp(t, path)
+                metadata.forEach(meta => {
+                    const refProp = getRefProp(t, path)
 
-                if (!refProp && hasStringRef(t, path)) {
-                    throw new Error("Detected string based ref which is not supported by Unistyles.")
-                }
-
-                const styleObj = stylePath[0]
-                const styleProp = stylePath[1]
+                    if (!refProp && hasStringRef(t, path)) {
+                        throw new Error("Detected string based ref which is not supported by Unistyles.")
+                    }
 
-                refProp
-                    ? overrideRef(t, path, refProp, styleObj, styleProp)
-                    : addRef(t, path, styleObj, styleProp)
+                    refProp
+                        ? overrideRef(t, path, refProp, meta, state)
+                        : addRef(t, path, meta, state)
+                })
             },
             CallExpression(path, state) {
+                if (isUsingVariants(t, path)) {
+                    extractVariants(t, path, state)
+                }
+
                 if (!isUnistylesStyleSheet(t, path, state)) {
                     return
                 }
 
+                addStyleSheetTag(t, path, state)
+
                 const arg = path.node.arguments[0]
 
                 // Object passed to StyleSheet.create
                 if (t.isObjectExpression(arg)) {
                     arg.properties.forEach(property => {
                         if (t.isObjectProperty(property)) {
-                            const propertyValue = t.isArrowFunctionExpression(property.value)
-                                ? property.value.body
-                                : property.value
+                            const propertyValue = getUnistyle(t, property)
+
+                            if (!propertyValue) {
+                                return
+                            }
 
                             analyzeDependencies(t, state, property.key.name, propertyValue)
                         }
@@ -107,9 +192,11 @@ module.exports = function ({ types: t }) {
                     if (t.isObjectExpression(body)) {
                         body.properties.forEach(property => {
                             if (t.isObjectProperty(property)) {
-                                const propertyValue = t.isArrowFunctionExpression(property.value)
-                                    ? property.value.body
-                                    : property.value
+                                const propertyValue = getUnistyle(t, property)
+
+                                if (!propertyValue) {
+                                    return
+                                }
 
                                 analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
                             }

package/plugin/ref.js

@@ -14,21 +14,39 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp) {
+function memberExpressionFromArray(t, identifiers) {
+    // possible for inline styles
+    if (identifiers.length === 0) {
+        return undefined
+    }
+
+    const [base, ...members] = identifiers
+
+    return members.reduce((object, property) => t.memberExpression(object, t.identifier(property)), t.identifier(base))
+}
+
+function addRef(t, path, metadata, state) {
+    const hasVariants = state.file.hasVariants
+
     const newRefFunction = t.arrowFunctionExpression(
         [t.identifier('ref')],
         t.blockStatement([
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier('ref'),
+                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
                 )
             ),
             t.returnStatement(
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [t.identifier('ref')]
                     )
                 )
             )
@@ -43,7 +61,8 @@ function addRef(t, path, styleObj, styleProp) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, styleObj, styleProp) {
+function overrideRef(t, path, refProp, metadata, state) {
+    const hasVariants = state.file.hasVariants
     const uniqueRefName = path.scope.generateUidIdentifier('ref').name
     const isIdentifier = t.isIdentifier(refProp.value.expression)
     const binding = path.scope.getBinding(refProp.value.expression.name)
@@ -55,19 +74,30 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             [t.identifier(uniqueRefName)],
             t.blockStatement([
                 t.expressionStatement(
-                    t.assignmentExpression('=', t.identifier(userVariableName), t.identifier(uniqueRefName))
+                    t.assignmentExpression(
+                        '=',
+                        t.memberExpression(t.identifier(userVariableName), t.identifier('current')),
+                        t.identifier(uniqueRefName)
+                    )
                 ),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(uniqueRefName),
+                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
                     )
                 ),
                 t.returnStatement(
                     t.arrowFunctionExpression([],
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [
+                                t.identifier(uniqueRefName)
+                            ]
                         )
                     )
                 )
@@ -87,15 +117,23 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         const userCleanupFunction = userReturnStatement
             ? userReturnStatement.argument
             : null
+        const userRefName = refProp.value.expression.params.length >= 1
+            ? refProp.value.expression.params.at(0).name
+            : 'ref'
 
         const newRefFunction = t.arrowFunctionExpression(
-            [t.identifier('ref')],
+            [t.identifier(userRefName)],
             t.blockStatement([
                 ...userStatements.filter(statement => !t.isReturnStatement(statement)),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(userRefName),
+                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
                     )
                 ),
                 // Merged cleanup function
@@ -109,7 +147,9 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                         t.expressionStatement(
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                                [
+                                    t.identifier(userRefName)
+                                ]
                             )
                         )
                     ]))
@@ -122,6 +162,10 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         return
     }
 
+    if (!binding) {
+        return
+    }
+
     // ref={scopedFunction}
     const isArrowFunction = t.isArrowFunctionExpression(binding.path.node.init)
     const isFunction = t.isFunctionDeclaration(binding.path.node)
@@ -146,7 +190,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier(uniqueRefName),
+                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle,
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
                 )
             ),
             t.returnStatement(
@@ -159,10 +208,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                     t.expressionStatement(
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [
+                                t.identifier(uniqueRefName)
+                            ]
                         )
                     )
-                ]))
+                ].filter(Boolean)))
             )
         ])
     )