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

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.10.0",
+  "version": "3.0.0-alpha.2",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
-    "test:coverage": "jest --coverage",
+    "test:coverage": "jest --passWithNoTests --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "biome lint",
     "prepare": "husky && bob build",
-    "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
+    "precommit": "concurrently 'bun tsc' 'bun lint' 'bun test'",
     "release": "release-it"
   },
   "main": "lib/commonjs/index",
@@ -22,9 +22,11 @@
     "ios",
     "android",
     "cxx",
-    "windows",
+    "nitrogen",
+    "plugin",
+    "web",
     "react-native.config.js",
-    "react-native-unistyles.podspec",
+    "Unistyles.podspec",
     "!lib/typescript/examples",
     "!ios/build",
     "!android/build",
@@ -58,90 +60,63 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-jsx": "7.25.7",
+    "@biomejs/biome": "1.8.3",
     "@commitlint/config-conventional": "19.2.2",
-    "@react-native/eslint-config": "0.74.84",
-    "@react-native/normalize-colors": "0.74.84",
+    "@react-native/normalize-colors": "0.75.2",
     "@release-it/conventional-changelog": "8.0.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.12",
-    "@types/react": "18.3.3",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/eslint-plugin-tslint": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
-    "commitlint": "19.3.0",
+    "@types/react": "18.3.4",
+    "babel-plugin-tester": "11.0.4",
+    "commitlint": "19.4.0",
     "concurrently": "8.2.2",
-    "eslint": "8.57.0",
-    "eslint-config-codemask": "1.1.7",
-    "eslint-plugin-functional": "6.6.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsdoc": "46.10.1",
-    "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-nested-if": "1.0.0",
-    "eslint-plugin-no-else": "0.2.2",
-    "eslint-plugin-no-loops": "0.4.0",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-react": "7.34.3",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "husky": "9.0.11",
+    "husky": "9.1.5",
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
+    "nitro-codegen": "0.10.0",
     "react": "18.3.1",
-    "react-native": "0.74.2",
-    "react-native-builder-bob": "0.23.2",
+    "react-native": "0.75.2",
+    "react-native-builder-bob": "0.30.0",
+    "react-native-nitro-modules": "0.10.0",
     "react-native-web": "0.19.12",
     "react-test-renderer": "18.3.1",
-    "release-it": "17.4.0",
-    "typescript": "5.3.3"
+    "release-it": "17.6.0",
+    "typescript": "5.5.4",
+    "typestyle": "2.4.0"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-macos": "*",
     "react-native-web": "*",
-    "react-native-windows": "*"
+    "typestyle": ">=2.4.0"
   },
   "peerDependenciesMeta": {
-    "react-native-macos": {
-      "optional": true
-    },
     "react-native-web": {
       "optional": true
     },
-    "react-native-windows": {
+    "typestyle": {
       "optional": true
     }
   },
-  "resolutions": {
-    "@types/mime": "3.0.4"
-  },
   "workspaces": [
-    "examples/expo",
-    "examples/macos",
-    "examples/win",
-    "examples/bare",
-    "examples/tv",
-    "examples/vision",
+    "example",
     "docs"
   ],
-  "packageManager": "yarn@3.6.4",
+  "packageManager": "yarn@3.6.1",
   "engines": {
     "node": ">= 20.0.0"
   },
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "<rootDir>/examples/expo/node_modules",
-      "<rootDir>/examples/macos/node_modules",
-      "<rootDir>/examples/win/node_modules",
-      "<rootDir>/examples/bare/node_modules",
-      "<rootDir>/examples/tv/node_modules",
-      "<rootDir>/examples/vision/node_modules",
       "<rootDir>/docs/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/lib/",
+      "<rootDir>/cxx/tests"
     ],
     "testMatch": [
-      "**/*.spec.(ts|tsx)"
+      "**/*.spec.(ts|tsx|js)"
     ],
     "coverageReporters": [
       "html"
@@ -169,11 +144,6 @@
       }
     }
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/",
-    "src/utils/hash32.ts"
-  ],
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -187,5 +157,10 @@
         }
       ]
     ]
+  },
+  "codegenConfig": {
+    "name": "TurboUnistyles",
+    "type": "modules",
+    "jsSrcsDir": "./src/specs/TurboUnistyles"
   }
 }

package/plugin/__tests__/dependencies.spec.js

@@ -0,0 +1,360 @@
+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 detect dependencies in variants',
+            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) => ({
+                    container: {
+                        variants: {
+                            size: {
+                                small: {
+                                    backgroundColor: theme.colors.blue,
+                                    paddingTop: theme.gap(10),
+                                    marginBottom: rt.insets.bottom === 0
+                                        ? theme.gap(20)
+                                        : theme.gap(30)
+                                }
+                            }
+                        }
+                    }
+                }))
+            `,
+            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)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => ({
+                    container: {
+                        variants: {
+                            size: {
+                                small: {
+                                    backgroundColor: theme.colors.blue,
+                                    paddingTop: theme.gap(10),
+                                    marginBottom: rt.insets.bottom === 0 ? theme.gap(20) : theme.gap(30)
+                                }
+                            }
+                        },
+                        uni__dependencies: [0, 9, 4]
+                    }
+                }))
+            `
+        },
+        {
+            title: 'Should detect dependencies in breakpoints',
+            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) => ({
+                    container: {
+                        backgroundColor: {
+                            sm: theme.colors.blue
+                        },
+                        padding: {
+                            xs: 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)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => ({
+                    container: {
+                        backgroundColor: {
+                            sm: theme.colors.blue
+                        },
+                        padding: {
+                            xs: rt.insets.top
+                        },
+                        uni__dependencies: [0, 9]
+                    }
+                }))
+            `
+        },
+        {
+            title: 'Should detect dependencies in calculations',
+            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) => ({
+                    container: {
+                        marginTop: theme.gap(2) + rt.insets.bottom,
+                        marginBottom: theme.gap(2) * rt.statusBar.height,
+                        paddingTop: theme.gap(2) - rt.navigationBar.height
+                    }
+                }))
+            `,
+            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)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => ({
+                    container: {
+                        marginTop: theme.gap(2) + rt.insets.bottom,
+                        marginBottom: theme.gap(2) * rt.statusBar.height,
+                        paddingTop: theme.gap(2) - rt.navigationBar.height,
+                        uni__dependencies: [0, 9, 12, 13]
+                    }
+                }))
+            `
+        },
+        {
+            title: 'Should detect dependencies in _web',
+            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) => ({
+                    container: {
+                        flex: 1,
+                        display: 'flex'
+                    },
+                    static: {
+                        backgroundColor: 'pink'
+                    },
+                    staticText: {
+                        color: 'red'
+                    },
+                    theme: {
+                        backgroundColor: theme.colors.backgroundColor
+                    },
+                    themeText: {
+                        color: theme.colors.typography
+                    },
+                    themeButtonsContainer: {
+                        marginTop: 20,
+                        flexDirection: 'row',
+                        gap: 10
+                    },
+                    dynamic: state => ({
+                        backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak
+                    }),
+                    whiteText: {
+                        color: 'white',
+                        textAlign: 'center'
+                    },
+                    hover: {
+                        backgroundColor: theme.colors.blood,
+                        cursor: 'pointer',
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.colors.sky,
+                                paddingTop: rt.insets.top
+                            }
+                        }
+                    },
+                    breakpoint: {
+                        backgroundColor: {
+                            xs: theme.colors.blood,
+                            md: theme.colors.sky,
+                            xl: theme.colors.aloes
+                        },
+                        transform: [
+                            {
+                                translateX: {
+                                    xs: rt.fontScale * 10,
+                                    md: rt.pixelRatio * 10
+                                }
+                            }
+                        ],
+                        position: 'relative',
+                        _web: {
+                            _after: {
+                                fontWeight: 'bold',
+                                content: rt.breakpoint,
+                                color: 'white',
+                                position: 'absolute',
+                                top: '60%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
+                            }
+                        }
+                    }
+                }))
+            `,
+            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)
+                                return () => UnistylesShadowRegistry.remove(ref, styles.container)
+                            }}
+                        >
+                            <Text>Hello world</Text>
+                        </View>
+                    )
+                }
+
+                const styles = StyleSheet.create((theme, rt) => ({
+                    container: {
+                        flex: 1,
+                        display: 'flex'
+                    },
+                    static: {
+                        backgroundColor: 'pink'
+                    },
+                    staticText: {
+                        color: 'red'
+                    },
+                    theme: {
+                        backgroundColor: theme.colors.backgroundColor,
+                        uni__dependencies: [0]
+                    },
+                    themeText: {
+                        color: theme.colors.typography,
+                        uni__dependencies: [0]
+                    },
+                    themeButtonsContainer: {
+                        marginTop: 20,
+                        flexDirection: 'row',
+                        gap: 10
+                    },
+                    dynamic: state => ({
+                        backgroundColor: state % 2 === 0 ? theme.colors.fog : theme.colors.oak,
+                        uni__dependencies: [0]
+                    }),
+                    whiteText: {
+                        color: 'white',
+                        textAlign: 'center'
+                    },
+                    hover: {
+                        backgroundColor: theme.colors.blood,
+                        cursor: 'pointer',
+                        _web: {
+                            _hover: {
+                                backgroundColor: theme.colors.sky,
+                                paddingTop: rt.insets.top
+                            }
+                        },
+                        uni__dependencies: [0, 9]
+                    },
+                    breakpoint: {
+                        backgroundColor: {
+                            xs: theme.colors.blood,
+                            md: theme.colors.sky,
+                            xl: theme.colors.aloes
+                        },
+                        transform: [
+                            {
+                                translateX: {
+                                    xs: rt.fontScale * 10,
+                                    md: rt.pixelRatio * 10
+                                }
+                            }
+                        ],
+
+                        position: 'relative',
+                        _web: {
+                            _after: {
+                                fontWeight: 'bold',
+                                content: rt.breakpoint,
+                                color: 'white',
+                                position: 'absolute',
+                                top: '60%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                backgroundColor: rt.colorScheme === 'dark' ? 'black' : 'white'
+                            }
+                        },
+                        uni__dependencies: [0, 11, 10, 3, 5]
+                    }
+                }))
+            `
+        },
+    ]
+})