react-native-unistyles 3.0.0-alpha.5 → 3.0.0-alpha.7

package/plugin/__tests__/stylesheet.spec.js

@@ -41,7 +41,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -50,11 +50,14 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    793953373
+                )
             `
         },
         {
@@ -85,7 +88,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -94,12 +97,15 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create(theme => ({
-                    container: {
-                        backgroundColor: theme.colors.background,
-                        uni__dependencies: [0]
-                    }
-                }))
+                const styles = StyleSheet.create(
+                    theme => ({
+                        container: {
+                            backgroundColor: theme.colors.background,
+                            uni__dependencies: [0]
+                        }
+                    }),
+                    793953373
+                )
             `
         },
         {
@@ -130,7 +136,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -139,12 +145,15 @@ pluginTester({
                     )
                 }
 
-                const styles = ST.create(theme => ({
-                    container: {
-                        backgroundColor: theme.colors.background,
-                        uni__dependencies: [0]
-                    }
-                }))
+                const styles = ST.create(
+                    theme => ({
+                        container: {
+                            backgroundColor: theme.colors.background,
+                            uni__dependencies: [0]
+                        }
+                    }),
+                    793953373
+                )
             `
         },
         {
@@ -176,7 +185,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -185,13 +194,16 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red',
-                        variants: {},
-                        uni__dependencies: [4]
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red',
+                            variants: {},
+                            uni__dependencies: [4]
+                        }
+                    },
+                    793953373
+                )
             `
         },
         {
@@ -223,7 +235,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -232,13 +244,16 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red',
-                        variants: {},
-                        uni__dependencies: [4]
-                    })
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: () => ({
+                            backgroundColor: 'red',
+                            variants: {},
+                            uni__dependencies: [4]
+                        })
+                    },
+                    793953373
+                )
             `
         },
         {
@@ -271,7 +286,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -280,14 +295,17 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create((_, rt) => ({
-                    container: () => ({
-                        backgroundColor: 'red',
-                        variants: {},
-                        paddingTop: rt.insets.top,
-                        uni__dependencies: [4, 9]
-                    })
-                }))
+                const styles = StyleSheet.create(
+                    (_, rt) => ({
+                        container: () => ({
+                            backgroundColor: 'red',
+                            variants: {},
+                            paddingTop: rt.insets.top,
+                            uni__dependencies: [4, 9]
+                        })
+                    }),
+                    793953373
+                )
             `
         },
         {
@@ -320,7 +338,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -329,14 +347,17 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create((hhsa, dee) => ({
-                    container: () => ({
-                        backgroundColor: hhsa.colors.background,
-                        variants: {},
-                        paddingTop: dee.colorScheme === 'dark' ? 0 : 10,
-                        uni__dependencies: [0, 4, 5]
-                    })
-                }))
+                const styles = StyleSheet.create(
+                    (hhsa, dee) => ({
+                        container: () => ({
+                            backgroundColor: hhsa.colors.background,
+                            variants: {},
+                            paddingTop: dee.colorScheme === 'dark' ? 0 : 10,
+                            uni__dependencies: [0, 4, 5]
+                        })
+                    }),
+                    793953373
+                )
             `
         },
         {
@@ -371,7 +392,7 @@ pluginTester({
                         <View
                             style={styles.container}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
                                 return () => UnistylesShadowRegistry.remove(ref, styles.container)
                             }}
                         >
@@ -389,7 +410,79 @@ pluginTester({
                             uni__dependencies: [0, 4, 9]
                         })
                     }
+                }, 793953373)
+            `
+        },
+        {
+            title: 'Should generates two different ids for 2 stylesheets in the same file',
+            code: `
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top
+                        })
+                    }
                 })
+                const styles2 = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top
+                        })
+                    }
+                })
+            `,
+            output: `
+                import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={styles.container}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top,
+                            uni__dependencies: [0, 4, 9]
+                        })
+                    }
+                }, 793953373)
+                const styles2 = StyleSheet.create((theme, rt) => {
+                    return {
+                        container: () => ({
+                            backgroundColor: theme.colors.background,
+                            variants: {},
+                            paddingTop: rt.insets.top,
+                            uni__dependencies: [0, 4, 9]
+                        })
+                    }
+                }, 793953374)
             `
         },
     ]

package/plugin/index.js

@@ -1,7 +1,8 @@
 const addShadowRegistryImport = require('./import')
 const { getStyleObjectPath, getStyleAttribute } = 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')
 
 module.exports = function ({ types: t }) {
     return {
@@ -12,7 +13,7 @@ module.exports = function ({ types: t }) {
                     state.file.hasAnyUnistyle = false
                     state.file.hasUnistylesImport = false
                     state.file.styleSheetLocalName = ''
-                    state.file.webDynamicFunctions = {}
+                    state.file.tagNumber = 0
                 },
                 exit(path, state) {
                     if (state.file.hasAnyUnistyle) {
@@ -45,7 +46,7 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
-                const stylePath = getStyleObjectPath(t, styleAttr.value.expression, state)
+                const stylePath = getStyleObjectPath(t, styleAttr.value.expression)
 
                 // style prop is not using object expression
                 if (stylePath.length !== 2) {
@@ -65,23 +66,31 @@ module.exports = function ({ types: t }) {
                 const styleProp = stylePath[1]
 
                 refProp
-                    ? overrideRef(t, path, refProp, styleObj, styleProp)
-                    : addRef(t, path, styleObj, styleProp)
+                    ? overrideRef(t, path, refProp, styleObj, styleProp, state)
+                    : addRef(t, path, styleObj, styleProp, 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 +116,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,14 +14,20 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp) {
+function addRef(t, path, styleObj, styleProp, 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'),
+                        t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                    ]
                 )
             ),
             t.returnStatement(
@@ -43,7 +49,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, styleObj, styleProp, 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,12 +62,21 @@ 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),
+                            t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                        ]
                     )
                 ),
                 t.returnStatement(
@@ -95,7 +111,11 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                 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'),
+                            t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                        ]
                     )
                 ),
                 // Merged cleanup function
@@ -122,6 +142,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 +170,11 @@ 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),
+                        t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined')
+                    ]
                 )
             ),
             t.returnStatement(

package/plugin/style.js

@@ -1,4 +1,4 @@
-function getStyleObjectPath(t, node, state) {
+function getStyleObjectPath(t, node) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
         return [node.object.name, node.property.name]
@@ -6,39 +6,22 @@ function getStyleObjectPath(t, node, state) {
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+        return node.elements.flatMap(element => getStyleObjectPath(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument, state)
+        return getStyleObjectPath(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
+        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument))
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        const path = getStyleObjectPath(t, node.callee, state)
-        const lastPart = path.slice(-1)
-
-        if (!lastPart) {
-            return path
-        }
-
-        // for web increment counter for dynamic functions
-        if (state.file.webDynamicFunctions[lastPart]) {
-            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
-
-            return path
-        }
-
-        state.file.webDynamicFunctions[lastPart] = 1
-        node.arguments.push(t.numericLiteral(1))
-
-        return path
+        return getStyleObjectPath(t, node.callee)
     }
 
     return []

package/plugin/stylesheet.js

@@ -17,6 +17,19 @@ const UnistyleDependency = {
     NavigationBar: 13
 }
 
+function stringToUniqueId(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0
+    }
+
+    const absHash = Math.abs(hash)
+
+    return absHash % 1000000000
+}
+
 function isUnistylesStyleSheet(t, path, state) {
     const callee = path.get('callee')
 
@@ -28,6 +41,13 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function addStyleSheetTag(t, path, state) {
+    const callee = path.get('callee')
+    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+
+    callee.container.arguments.push(t.numericLiteral(uniqueId))
+}
+
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -141,7 +161,30 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
+function getUnistyle(t, property) {
+    const propertyValue = t.isArrowFunctionExpression(property.value)
+        ? property.value.body
+        : property.value
+
+    if (t.isObjectExpression(propertyValue)) {
+        return propertyValue
+    }
+
+    if (t.isBlockStatement(propertyValue)) {
+        const returnStatement = propertyValue.body
+            .find(value => t.isReturnStatement(value))
+
+        return returnStatement
+            ? returnStatement.argument
+            : null
+    }
+
+    return null
+}
+
 module.exports = {
     isUnistylesStyleSheet,
-    analyzeDependencies
+    analyzeDependencies,
+    addStyleSheetTag,
+    getUnistyle
 }

package/plugin/variants.js

@@ -0,0 +1,33 @@
+function isUsingVariants(t, path) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.node.object, { name: 'styles' }) &&
+        t.isIdentifier(callee.node.property, { name: 'useVariants' }) &&
+        t.isObjectExpression(path.node.arguments[0])
+    )
+}
+
+function extractVariants(t, path, state) {
+    const arg = path.node.arguments[0]
+
+    const variantDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(
+            t.identifier('__uni__variants'),
+            arg
+        )
+    ])
+
+    // Replace useVariants argument with __uni__variants
+    path.node.arguments[0] = t.identifier('__uni__variants')
+
+    path.insertBefore(variantDeclaration)
+
+    state.file.hasVariants = true
+}
+
+module.exports = {
+    isUsingVariants,
+    extractVariants
+}

package/src/specs/NavigtionBar/index.ts

@@ -12,7 +12,7 @@ export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBa
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/ShadowRegistry/index.ts

@@ -4,10 +4,10 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>): void,
     remove(handle?: ViewHandle, style?: Unistyle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle): void,
+    link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>): void,
     unlink(node: ShadowNode, style: Unistyle): void
 }
 
@@ -26,12 +26,12 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style) => {
+HybridShadowRegistry.add = (handle, style, variants) => {
     if (!handle || !style?.__unid) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {})
 }
 
 HybridShadowRegistry.remove = (handle, style) => {

package/src/specs/StatusBar/index.ts

@@ -34,7 +34,7 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }