react-native-unistyles 3.0.0-alpha.8 → 3.0.0-beta.1

package/plugin/__tests__/stylesheet.spec.js

@@ -1,489 +0,0 @@
-import { pluginTester } from 'babel-plugin-tester'
-import plugin from '../'
-
-pluginTester({
-    plugin,
-    pluginOptions: {
-        debug: false
-    },
-    babelOptions: {
-        plugins: ['@babel/plugin-syntax-jsx'],
-        generatorOpts: {
-            retainLines: true
-        }
-    },
-    tests: [
-        {
-            title: 'Should not add dependencies to StyleSheet if user is not using theme or miniRuntime',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red'
-                    }
-                })
-            `,
-            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(
-                    {
-                        container: {
-                            backgroundColor: 'red'
-                        }
-                    },
-                    793953373
-                )
-            `
-        },
-        {
-            title: 'Should add dependencies to StyleSheet if user is using theme',
-            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 => ({
-                    container: {
-                        backgroundColor: theme.colors.background
-                    }
-                }))
-            `,
-            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 => ({
-                        container: {
-                            backgroundColor: theme.colors.background,
-                            uni__dependencies: [0]
-                        }
-                    }),
-                    793953373
-                )
-            `
-        },
-        {
-            title: 'Should add dependencies to StyleSheet even if user did rename import',
-            code: `
-                import { StyleSheet as ST } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = ST.create(theme => ({
-                    container: {
-                        backgroundColor: theme.colors.background
-                    }
-                }))
-            `,
-            output: `
-                import { UnistylesShadowRegistry } from 'react-native-unistyles'
-                import { StyleSheet as ST } 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 = ST.create(
-                    theme => ({
-                        container: {
-                            backgroundColor: theme.colors.background,
-                            uni__dependencies: [0]
-                        }
-                    }),
-                    793953373
-                )
-            `
-        },
-        {
-            title: 'Should detect variants for object StyleSheet',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create({
-                    container: {
-                        backgroundColor: 'red',
-                        variants: {}
-                    }
-                })
-            `,
-            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(
-                    {
-                        container: {
-                            backgroundColor: 'red',
-                            variants: {},
-                            uni__dependencies: [4]
-                        }
-                    },
-                    793953373
-                )
-            `
-        },
-        {
-            title: 'Should detect variants for object StyleSheet and dynamic function',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create({
-                    container: () => ({
-                        backgroundColor: 'red',
-                        variants: {}
-                    })
-                })
-            `,
-            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(
-                    {
-                        container: () => ({
-                            backgroundColor: 'red',
-                            variants: {},
-                            uni__dependencies: [4]
-                        })
-                    },
-                    793953373
-                )
-            `
-        },
-        {
-            title: 'Should detect miniRuntime dependency',
-            code: `
-                import { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((_, rt) => ({
-                    container: () => ({
-                        backgroundColor: 'red',
-                        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(
-                    (_, 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 { StyleSheet } from 'react-native-unistyles'
-
-                export const Example = () => {
-                    return (
-                        <View style={styles.container}>
-                            <Text>Hello world</Text>
-                        </View>
-                    )
-                }
-
-                const styles = StyleSheet.create((hhsa, dee) => ({
-                    container: () => ({
-                        backgroundColor: hhsa.colors.background,
-                        variants: {},
-                        paddingTop: dee.colorScheme === 'dark' ? 0 : 10
-                    })
-                }))
-            `,
-            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(
-                    (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 { 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
-                        })
-                    }
-                })
-            `,
-            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)
-            `
-        },
-        {
-            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/src/web/convert/boxShadow.ts

@@ -1,72 +0,0 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
-import { deepMergeObjects, warn } from '../utils'
-import { validateShadow } from './shadow'
-import { convertBreakpoint } from './breakpoint'
-import { BOX_SHADOW_STYLES, type BoxShadow } from './types'
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
-
-const createBoxShadowValue = (style: BoxShadow) => {
-    // at this point every prop is present
-    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
-    const offsetX = normalizeNumericValue(shadowOffset.width)
-    const offsetY = normalizeNumericValue(shadowOffset.height)
-    const radius = normalizeNumericValue(shadowRadius)
-    const color = normalizeColor(shadowColor as string, shadowOpacity as number)
-
-    return `${offsetX} ${offsetY} ${radius} ${color}`
-}
-
-export const getBoxShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
-    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles))
-
-    if (missingStyles.length) {
-        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`)
-
-        return {}
-    }
-
-    const breakpointsSet = new Set<string>()
-
-    try {
-        validateShadow(BOX_SHADOW_STYLES, styles, breakpointsSet)
-    } catch (error) {
-        if (typeof error === 'string') {
-            warn(error)
-        }
-
-        return {}
-    }
-
-    const breakpoints = Array.from(breakpointsSet)
-
-    // If no breakpoints were used return styles without media queries
-    if (breakpoints.length === 0) {
-        return {
-            boxShadow: createBoxShadowValue(styles as BoxShadow)
-        }
-    }
-
-    // Create boxShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
-        const color = extractShadowValue('shadowColor', breakpoint, styles)
-        const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles)
-        const radius = extractShadowValue('shadowRadius', breakpoint, styles)
-        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles)
-
-        return media(convertBreakpoint(breakpoint), {
-            boxShadow: createBoxShadowValue({
-                shadowColor: color,
-                shadowOffset: {
-                    width,
-                    height
-                },
-                shadowRadius: radius,
-                shadowOpacity: opacity
-            })
-        })
-    })
-
-    // Merge all breakpoints styles into one
-    return deepMergeObjects(...breakpointStyles)
-}

package/src/web/convert/breakpoint.ts

@@ -1,21 +0,0 @@
-import type { MediaQuery } from 'typestyle/lib/types'
-import { UnistylesState } from '../state'
-import { keyInObject } from '../utils'
-import { isUnistylesMq, parseMq } from '../mq'
-import { Orientation } from '../../specs/types'
-
-export const convertBreakpoint = (breakpoint: string): MediaQuery => {
-    if (Object.values(Orientation).includes(breakpoint as Orientation)) {
-        return {
-            orientation: breakpoint as Orientation
-        }
-    }
-
-    if (isUnistylesMq(breakpoint)) {
-        return parseMq(breakpoint)
-    }
-
-    return {
-        minWidth: UnistylesState.breakpoints && keyInObject(UnistylesState.breakpoints, breakpoint) ? UnistylesState.breakpoints[breakpoint] : undefined,
-    }
-}

package/src/web/convert/shadow.ts

@@ -1,68 +0,0 @@
-import type { ShadowOffset } from './types'
-
-export const validateShadow = (shadowProperties: ReadonlyArray<string>, styles: Record<string, any>, breakpoints: Set<string>) => {
-    // Collect breakpoints
-    shadowProperties.forEach(key => {
-        const value = styles[key]
-
-        if (typeof value !== 'object') {
-            return
-        }
-
-        if (key === 'shadowOffset' || key === 'textShadowOffset') {
-            const { width, height } = value as ShadowOffset
-
-            // If shadowOffset.width has breakpoints
-            if (typeof width === 'object') {
-                Object.keys(width).forEach(breakpoint => breakpoints.add(breakpoint))
-            }
-
-            // If shadowOffset.height has breakpoints
-            if (typeof height === 'object') {
-                Object.keys(height).forEach(breakpoint => breakpoints.add(breakpoint))
-            }
-
-            return
-        }
-
-        // Collect regular breakpoints
-        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint))
-    })
-
-    // Validate if all breakpoints are present
-    shadowProperties.forEach(key => {
-        const value = styles[key]
-
-        if (typeof value !== 'object') {
-            return
-        }
-
-        if (key === 'shadowOffset' || key === 'textShadowOffset') {
-            const { width, height } = value as ShadowOffset
-
-            if (typeof width === 'object') {
-                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in width))
-
-                if (missingBreakpoints.length) {
-                    throw `missing breakpoints in ${key}.width: ${missingBreakpoints.join(', ')}`
-                }
-            }
-
-            if (typeof height === 'object') {
-                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in height))
-
-                if (missingBreakpoints.length) {
-                    throw `missing breakpoints in ${key}.height: ${missingBreakpoints.join(', ')}`
-                }
-            }
-
-            return
-        }
-
-        const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in value))
-
-        if (missingBreakpoints.length) {
-            throw `missing breakpoints in ${key}: ${missingBreakpoints.join(', ')}`
-        }
-    })
-}