react-native-unistyles 3.0.0-alpha.2 → 3.0.0-alpha.21

package/plugin/__tests__/stylesheet.spec.js

@@ -16,6 +16,7 @@ pluginTester({
         {
             title: 'Should not add dependencies to StyleSheet if user is not using theme or miniRuntime',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -34,15 +35,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -50,16 +52,20 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red'
+                        }
+                    },
+                    793953373
+                )
             `
         },
         {
             title: 'Should add dependencies to StyleSheet if user is using theme',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -78,15 +84,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -94,17 +101,21 @@ 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
+                )
             `
         },
         {
             title: 'Should add dependencies to StyleSheet even if user did rename import',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet as ST } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -123,15 +134,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet as ST } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -139,17 +151,21 @@ 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
+                )
             `
         },
         {
             title: 'Should detect variants for object StyleSheet',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -169,15 +185,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -185,18 +202,22 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red',
-                        variants: {},
-                        uni__dependencies: [4]
-                    }
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: {
+                            backgroundColor: 'red',
+                            variants: {},
+                            uni__dependencies: [4]
+                        }
+                    },
+                    793953373
+                )
             `
         },
         {
             title: 'Should detect variants for object StyleSheet and dynamic function',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -216,15 +237,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -232,18 +254,22 @@ pluginTester({
                     )
                 }
 
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red',
-                        variants: {},
-                        uni__dependencies: [4]
-                    })
-                })
+                const styles = StyleSheet.create(
+                    {
+                        container: () => ({
+                            backgroundColor: 'red',
+                            variants: {},
+                            uni__dependencies: [4]
+                        })
+                    },
+                    793953373
+                )
             `
         },
         {
             title: 'Should detect miniRuntime dependency',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -264,15 +290,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -280,19 +307,23 @@ 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
+                )
             `
         },
         {
             title: 'Should detect miniRuntime and theme dependencies even if user renamed it\'s names',
             code: `
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -313,15 +344,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -329,19 +361,23 @@ 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
+                )
             `
         },
         {
             title: 'Should detect dependencies in function',
             code: `
+            import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
@@ -364,15 +400,16 @@ pluginTester({
             `,
             output: `
                 import { UnistylesShadowRegistry } from 'react-native-unistyles'
+                import { View, Text } from 'react-native'
                 import { StyleSheet } from 'react-native-unistyles'
 
                 export const Example = () => {
                     return (
                         <View
-                            style={styles.container}
+                            style={[styles.container]}
                             ref={ref => {
-                                UnistylesShadowRegistry.add(ref, styles.container)
-                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
                             }}
                         >
                             <Text>Hello world</Text>
@@ -389,7 +426,81 @@ pluginTester({
                             uni__dependencies: [0, 4, 9]
                         })
                     }
+                }, 793953373)
+            `
+        },
+        {
+            title: 'Should generates two different ids for 2 stylesheets in the same file',
+            code: `
+                import { View, Text } from 'react-native'
+                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 { View, Text } from 'react-native'
+                import { StyleSheet } from 'react-native-unistyles'
+
+                export const Example = () => {
+                    return (
+                        <View
+                            style={[styles.container]}
+                            ref={ref => {
+                                UnistylesShadowRegistry.add(ref, styles.container, undefined, undefined)
+                                return () => UnistylesShadowRegistry.remove(ref)
+                            }}
+                        >
+                            <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,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)
                             }