react-native-unistyles 3.0.0-nightly-20250131 → 3.0.0-nightly-20250203

package/cxx/parser/Parser.cpp

@@ -18,7 +18,7 @@ void parser::Parser::buildUnistyles(jsi::Runtime& rt, std::shared_ptr<StyleSheet
 
         if (styleValue.isFunction(rt)) {
             styleSheet->unistyles[styleKey] = std::make_shared<UnistyleDynamicFunction>(
-                helpers::HashGenerator::generateHash(styleKey),
+                helpers::HashGenerator::generateHash(styleKey + std::to_string(styleSheet->tag)),
                 UnistyleType::DynamicFunction,
                 styleKey,
                 styleValue,
@@ -29,7 +29,7 @@ void parser::Parser::buildUnistyles(jsi::Runtime& rt, std::shared_ptr<StyleSheet
         }
 
         styleSheet->unistyles[styleKey] = std::make_shared<Unistyle>(
-            helpers::HashGenerator::generateHash(styleKey),
+            helpers::HashGenerator::generateHash(styleKey + std::to_string(styleSheet->tag)),
             UnistyleType::Object,
             styleKey,
             styleValue,
@@ -361,7 +361,7 @@ void parser::Parser::rebuildUnistyle(jsi::Runtime& rt, Unistyle::Shared unistyle
         unistyleFn->unprocessedValue = std::move(functionResult);
         unistyleFn->parsedStyle = this->parseFirstLevel(rt, unistyleFn, variants);
     }
-    
+
     if (unistyle->isDirty) {
         unistyle->isDirty = false;
     }
@@ -401,7 +401,7 @@ jsi::Object parser::Parser::parseFirstLevel(jsi::Runtime& rt, Unistyle::Shared u
         // parse dependencies only once
         if (propertyName == helpers::STYLE_DEPENDENCIES && !unistyle->isSealed()) {
             auto newDeps = this->parseDependencies(rt, propertyValue.asObject(rt));
-            
+
             unistyle->dependencies.insert(unistyle->dependencies.end(), newDeps.begin(), newDeps.end());
 
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250131",
+  "version": "3.0.0-nightly-20250203",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/plugin/common.js

@@ -1,4 +1,16 @@
 function getIdentifierNameFromExpression(t, memberExpression) {
+    if (t.isIdentifier(memberExpression)) {
+        return [memberExpression.name]
+    }
+
+    if (t.isSpreadElement(memberExpression)) {
+        return [getIdentifierNameFromExpression(t, memberExpression.argument)].flat()
+    }
+
+    if (t.isObjectProperty(memberExpression)) {
+        return [getIdentifierNameFromExpression(t, memberExpression.value)].flat()
+    }
+
     if (t.isMemberExpression(memberExpression)) {
         if (memberExpression.computed) {
             return [

package/plugin/index.js

@@ -1,6 +1,6 @@
 const { addUnistylesImport, isInsideNodeModules } = require('./import')
 const { hasStringRef } = require('./ref')
-const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyles, isKindOfStyleSheet, addThemeDependencyToMemberExpression } = require('./stylesheet')
+const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyles, isKindOfStyleSheet, maybeAddThemeDependencyToMemberExpression, addThemeDependencyToMemberExpression,  getStyleSheetLocalNames } = require('./stylesheet')
 const { extractVariants } = require('./variants')
 const { REACT_NATIVE_COMPONENT_NAMES, REPLACE_WITH_UNISTYLES_PATHS, REPLACE_WITH_UNISTYLES_EXOTIC_PATHS, NATIVE_COMPONENTS_PATHS } = require('./consts')
 const { handleExoticImport } = require('./exotic')
@@ -156,7 +156,7 @@ module.exports = function ({ types: t }) {
                             const propertyValues = getUnistyles(t, property)
 
                             propertyValues.forEach(propertyValue => {
-                                analyzeDependencies(t, state, property.key.name, propertyValue)
+                                analyzeDependencies(t, state, property.key.name, propertyValue, [], [])
                             })
                         }
                     })
@@ -164,15 +164,7 @@ module.exports = function ({ types: t }) {
 
                 // Function passed to StyleSheet.create (e.g., theme => ({ container: {} }))
                 if (t.isArrowFunctionExpression(arg) || t.isFunctionExpression(arg)) {
-                    const params = arg.params
-                    const hasTheme = params.length >= 1
-                    const hasMiniRuntime = params.length === 2
-                    const themeLocalName = hasTheme
-                        ? params[0].name
-                        : undefined
-                    const miniRuntimeLocalName = hasMiniRuntime
-                        ? params[1].name
-                        : undefined
+                    const localNames = getStyleSheetLocalNames(t, arg)
                     const body = t.isBlockStatement(arg.body)
                         ? arg.body.body.find(statement => t.isReturnStatement(statement)).argument
                         : arg.body
@@ -183,15 +175,14 @@ module.exports = function ({ types: t }) {
                             if (t.isObjectProperty(property)) {
                                 const propertyValues = getUnistyles(t, property)
 
+                                // special case for non object/function properties
                                 // maybe user used inlined theme? ({ container: theme.components.container })
-                                if (propertyValues.length === 0 && t.isMemberExpression(property.value)) {
-                                    if (property.value.object.object.name === themeLocalName) {
-                                        addThemeDependencyToMemberExpression(t, property)
-                                    }
+                                if (propertyValues.length === 0 && maybeAddThemeDependencyToMemberExpression(t, property, localNames.theme)) {
+                                    addThemeDependencyToMemberExpression(t, property)
                                 }
 
                                 propertyValues.forEach(propertyValue => {
-                                    analyzeDependencies(t, state, property.key.name, propertyValue, themeLocalName, miniRuntimeLocalName)
+                                    analyzeDependencies(t, state, property.key.name, propertyValue, localNames.theme, localNames.miniRuntime)
                                 })
                             }
                         })

package/plugin/stylesheet.js

@@ -63,8 +63,71 @@ function addStyleSheetTag(t, path, state) {
     callee.container.arguments.push(t.numericLiteral(uniqueId))
 }
 
+function getStyleSheetLocalNames(t, functionArg) {
+    const params = functionArg.params
+    const hasTheme = params.length >= 1
+    const hasMiniRuntime = params.length === 2
+    const getProperty = (property, allowNested) => {
+        if (t.isIdentifier(property.value)) {
+            return property.value.name
+        }
+
+        if (!t.isObjectPattern(property.value)) {
+            return undefined
+        }
+
+        if (allowNested) {
+            return property.value.properties.flatMap(getProperty)
+        }
+
+        // we can force allow nested only for insets
+        const hasIme = property.value.properties.find(property => property.key.name === 'ime')
+        const lastKeyValue = property.value.properties.flatMap(getProperty)
+
+        if (hasIme) {
+            return lastKeyValue
+        }
+
+        return `${property.key.name}.${lastKeyValue}`
+    }
+    const getLocalNames = (param, allowNested) => {
+        if (t.isObjectPattern(param)) {
+            return param.properties
+                .flatMap(property => getProperty(property, allowNested))
+                .filter(Boolean)
+        }
+
+
+        if (t.isIdentifier(param)) {
+            return [param.name]
+        }
+
+        return []
+    }
+
+    return {
+        theme: hasTheme ? getLocalNames(params[0], true) : [],
+        miniRuntime: hasMiniRuntime ? getLocalNames(params[1], false) : []
+    }
+}
+
+function maybeAddThemeDependencyToMemberExpression(t, property, themeLocalNames) {
+    if (t.isIdentifier(property)) {
+        return themeLocalNames.includes(property.name)
+    }
+
+    if (t.isObjectProperty(property)) {
+        return maybeAddThemeDependencyToMemberExpression(t, property.value, themeLocalNames)
+    }
+
+    if (t.isMemberExpression(property)) {
+        return maybeAddThemeDependencyToMemberExpression(t, property.object, themeLocalNames)
+    }
+}
+
+
 /** @param {import('./index').UnistylesPluginPass} state */
-function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
+function analyzeDependencies(t, state, name, unistyleObj, themeNames, rtNames) {
     const debugMessage = deps => {
         if (state.opts.debug) {
             const mappedDeps = deps
@@ -78,16 +141,42 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const dependencies = []
 
     Object.values(unistyle).forEach(uni => {
-        const identifier = getIdentifierNameFromExpression(t, uni.value)
+        const identifiers = getIdentifierNameFromExpression(t, uni)
 
-        if (identifier.includes(themeName)) {
+        if (themeNames.some(name => identifiers.some(id => id === name))) {
             dependencies.push(UnistyleDependency.Theme)
         }
 
-        if (identifier.includes(rtName)) {
+        const matchingRtNames = rtNames.reduce((acc, name) => {
+            if (name.includes('.')) {
+                const key = name.split('.').at(0)
+
+                if (identifiers.some(id => name.includes(id))) {
+                    return [
+                        ...acc,
+                        key
+                    ]
+                }
+
+                return acc
+            }
+
+
+            if (identifiers.some(id => id === name)) {
+                return [
+                    ...acc,
+                    name
+                ]
+            }
+
+            return acc
+        }, [])
+
+        if (matchingRtNames.length > 0) {
             const propertyNames = getSecondPropertyName(t, uni.value)
 
-            propertyNames
+            matchingRtNames
+                .concat(propertyNames)
                 .filter(Boolean)
                 .forEach(propertyName => {
                     switch (propertyName) {
@@ -235,5 +324,7 @@ module.exports = {
     addStyleSheetTag,
     getUnistyles,
     isKindOfStyleSheet,
+    getStyleSheetLocalNames,
+    maybeAddThemeDependencyToMemberExpression,
     addThemeDependencyToMemberExpression
 }