Merge pull request #561 from jpudysz/feature/babel

feat: babel rewrite dependency detection with scopes
jpudysz · Feb 6, 2025 · b0ab7bb · b0ab7bb
2 parents 2dee94f + 1d03fc7
commit b0ab7bb
Show file tree

Hide file tree

Showing 7 changed files with 572 additions and 1,043 deletions.
diff --git a/docs/src/content/docs/v3/other/babel-plugin.mdx b/docs/src/content/docs/v3/other/babel-plugin.mdx
@@ -64,6 +64,21 @@ const stylesheet = StyleSheet.create((theme, rt) => ({
 }))
 ```
 
+<Aside type="caution" title="Dependency detection limitation">
+We put a lot of effort into making dependency detection as accurate as possible, thus we support:
+- destructuring of `theme` and `rt` objects
+- style's as functions / arrow functions / objects
+- nested ifs and other conditionals
+- ternary operators
+- logical operators
+- binary operators
+- and much more...
+
+**What we don't support**:
+- moving functions/arrow functions out of StyleSheet.create
+- `theme` and `rt` reassignment to other variables (we don't track them)
+</Aside>
+
 
 ### 2. Attaching unique id to each StyleSheet
 

diff --git a/plugin/__tests__/dependencies.spec.js b/plugin/__tests__/dependencies.spec.js
@@ -506,7 +506,7 @@ pluginTester({
                         container: (headerColors, colorMap) => ({
                             backgroundColor: headerColors[rt.colorScheme],
                             paddingBottom: colorMap[theme.colors.primary],
-                            uni__dependencies: [5, 0]
+                            uni__dependencies: [0, 5]
                         })
                     }),
                     664955283
@@ -559,7 +559,7 @@ pluginTester({
                                     translateY: -rt.insets.ime
                                 }
                             ],
-                            uni__dependencies: [9]
+                            uni__dependencies: [14]
                         }
                     }),
                     664955283
@@ -627,27 +627,27 @@ pluginTester({
                             if (someRandomInt === 5) {
                                 return {
                                     backgroundColor: theme.colors.background,
-                                    uni__dependencies: [0]
+                                    uni__dependencies: [0, 9, 11]
                                 }
                             }
 
                             if (someRandomInt === 10) {
                                 return {
                                     backgroundColor: theme.colors.barbie,
                                     paddingBottom: rt.insets.bottom,
-                                    uni__dependencies: [0, 9]
+                                    uni__dependencies: [0, 9, 11]
                                 }
                             }
 
                             if (someRandomInt === 15) {
                                 return {
                                     fontSize: rt.fontScale * 10,
-                                    uni__dependencies: [11]
+                                    uni__dependencies: [0, 9, 11]
                                 }
                             } else {
                                 return {
                                     backgroundColor: theme.colors.blood,
-                                    uni__dependencies: [0]
+                                    uni__dependencies: [0, 9, 11]
                                 }
                             }
                         }
@@ -857,6 +857,105 @@ pluginTester({
                     664955283
                 )
             `
+        },
+        {
+            title: 'Should correctly detect dependencies in weirdest syntax',
+            code: `
+                import { View, Text } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text style={styles.container2}>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(({ components: { test, other: { nested }} }, { insets: { ime }, screen, statusBar: { width, height }  }) => {
+                    const otherVariable = 2
+
+                    return {
+                        container: () => {
+                            if (otherVariable === 2) {
+                                return {
+                                    backgroundColor: nested
+                                }
+                            }
+
+                            if (otherVariable === 3) {
+                                return {
+                                    marginTop: ime,
+                                    height: screen.height
+                                }
+                            }
+
+                            return nested
+                        },
+                        container2: () => ({
+                            paddingBottom: ime,
+                            height,
+                            width
+                        })
+                    }
+                })
+            `,
+            output: `
+                import { Text } from 'react-native-unistyles/components/native/Text'
+                import { View } from 'react-native-unistyles/components/native/View'
+
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View style={styles.container}>
+                            <Text style={styles.container2}>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create(
+                    (
+                        {
+                            components: {
+                                test,
+                                other: { nested }
+                            }
+                        },
+                        { insets: { ime }, screen, statusBar: { width, height } }
+                    ) => {
+                        const otherVariable = 2
+
+                        return {
+                            container: () => {
+                                if (otherVariable === 2) {
+                                    return {
+                                        backgroundColor: nested,
+                                        uni__dependencies: [0, 14, 6]
+                                    }
+                                }
+
+                                if (otherVariable === 3) {
+                                    return {
+                                        marginTop: ime,
+                                        height: screen.height,
+                                        uni__dependencies: [0, 14, 6]
+                                    }
+                                }
+
+                                return { ...nested, uni__dependencies: [0, 14, 6] }
+                            },
+                            container2: () => ({
+                                paddingBottom: ime,
+                                height,
+                                width,
+                                uni__dependencies: [14, 12]
+                            })
+                        }
+                    },
+                    664955283
+                )
+            `
         }
     ]
 })