Merge pull request #443 from jpudysz/feature/babel

fix: issue with useVariants and conditional children
jpudysz · Dec 15, 2024 · 64c1887 · 64c1887
2 parents da1f1a6 + 37bc297
commit 64c1887
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 11 deletions.
diff --git a/plugin/__tests__/variants.spec.js b/plugin/__tests__/variants.spec.js
@@ -373,9 +373,9 @@ pluginTester({
                     })
 
                     return (
-                        <React.Fragment key="asd">
+                        <Fragment key="asd">
                             <Text style={styles.container}>Hello world</Text>
-                        </React.Fragment>
+                        </Fragment>
                     )
                 }
 
@@ -761,6 +761,61 @@ pluginTester({
                     895830154
                 )
             `
-        }
+        },
+        {
+            title: 'Should correctly handle complex conditions with variants',
+            code: `
+                import React from 'react'
+                import { Text } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = ({ error, children, name }) => {
+                    styles.useVariants({
+                        error: !!error
+                    });
+
+                    return children ? (
+                        <Text ref={ref} style={styles.label} {...props}>
+                            {children}
+                        </Text>
+                    ) : (
+                        <Text ref={ref} style={styles.label} {...props}>
+                            {name}
+                        </Text>
+                    )
+                }
+
+                const styles = StyleSheet.create(theme => ({}))
+            `,
+            output: `
+                import { Text } from 'react-native-unistyles/components/native/Text'
+                import React from 'react'
+
+                import { StyleSheet, Variants } from 'react-native-unistyles'
+
+                export const Example = ({ error, children, name }) => {
+                    const __uni__variants = {
+                        error: !!error
+                    }
+                    styles.useVariants(__uni__variants)
+
+                    return children ? (
+                        <Variants variants={__uni__variants}>
+                            <Text ref={ref} style={[styles.label]} {...props}>
+                                {children}
+                            </Text>
+                        </Variants>
+                    ) : (
+                        <Variants variants={__uni__variants}>
+                            <Text ref={ref} style={[styles.label]} {...props}>
+                                {name}
+                            </Text>
+                        </Variants>
+                    )
+                }
+
+                const styles = StyleSheet.create(theme => ({}), 895830154)
+            `
+        },
     ]
 })
diff --git a/plugin/variants.js b/plugin/variants.js
@@ -40,18 +40,19 @@ function wrapVariants(t, path) {
             false
         ),
         t.jsxClosingElement(t.jsxIdentifier('Variants')),
-        [path]
+        []
     )
 
-    if (t.isJSXFragment(path)) {
-        wrapperElement.children = path.children
-    }
-
-    // other case for React.Fragment
     const element = path.openingElement && path.openingElement.name
+    const isWrappedInRegularFragment = t.isJSXFragment(path)
+    const isWrappedInFragment = (t.isJSXMemberExpression(element) && element.object.name === 'React' && element.property.name === 'Fragment') || (t.isJSXIdentifier(element) && element.name === 'Fragment')
+
+    wrapperElement.children = (isWrappedInRegularFragment || isWrappedInFragment)
+        ? path.children
+        : [path]
 
-    if (t.isJSXMemberExpression(element) && element.object.name === 'React' && element.property.name === 'Fragment') {
-        wrapperElement.children = path.children
+    // copy Fragment props like key
+    if (isWrappedInFragment) {
         wrapperElement.openingElement.attributes.push(...path.openingElement.attributes)
     }