react-native-unistyles 3.0.0-beta.6 → 3.0.0-beta.8

package/src/web/convert/types.ts

@@ -1,6 +1,6 @@
 import type { FilterFunction, TextStyle, ViewStyle } from 'react-native'
-import type { ToDeepUnistyles } from '../../types/stylesheet'
 import type { UnionToIntersection } from '../../types'
+import type { ToDeepUnistyles } from '../../types/stylesheet'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
 

package/src/web/convert/utils.ts

@@ -1,9 +1,9 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES, type AllShadow, type AllShadowKeys, type Filters } from './types'
-import type { TransformStyles } from '../../types/core'
 import type { BoxShadowValue } from 'react-native'
+import type { TransformStyles } from '../../types/core'
+import { type AllShadow, type AllShadowKeys, BOX_SHADOW_STYLES, type Filters, TEXT_SHADOW_STYLES } from './types'
 
 export const isTransform = (key: string, value: any): value is Array<TransformStyles> => key === 'transform' && Array.isArray(value)
 

package/src/web/create.ts

@@ -1,4 +1,4 @@
-import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
 import { UnistylesWeb } from './index'
 import { assignSecrets, error, removeInlineStyles } from './utils'
 

package/src/web/index.ts

@@ -1,8 +1,8 @@
-import { create } from './create'
-import { deepMergeObjects } from '../utils'
+import type { UnistylesShadowRegistry as NativeUnistylesShadowRegistry } from '../specs/ShadowRegistry'
 import type { StyleSheet as NativeStyleSheet } from '../specs/StyleSheet'
 import type { Runtime as NativeUnistylesRuntime } from '../specs/UnistylesRuntime'
-import type { UnistylesShadowRegistry as NativeUnistylesShadowRegistry } from '../specs/ShadowRegistry'
+import { deepMergeObjects } from '../utils'
+import { create } from './create'
 import { UnistylesServices } from './services'
 import { isServer } from './utils'
 

package/src/web/registry.ts

@@ -1,9 +1,9 @@
+import type { UnistyleDependency, UnistylesMiniRuntime } from '../specs'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import type { StyleSheet, StyleSheetWithSuperPowers } from '../types/stylesheet'
-import { generateHash, extractUnistyleDependencies, error } from './utils'
-import type { UnistylesMiniRuntime, UnistyleDependency } from '../specs'
 import { CSSState } from './css'
 import type { UnistylesServices } from './types'
+import { error, extractUnistyleDependencies, generateHash } from './utils'
 
 export class UnistylesRegistry {
     private readonly stylesheets = new Map<StyleSheetWithSuperPowers<StyleSheet>, StyleSheet>()

package/src/web/runtime.ts

@@ -1,10 +1,10 @@
 import { UnistyleDependency } from '../specs/NativePlatform'
-import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
 import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import { type AppTheme, type AppThemeName, ColorScheme, Orientation } from '../specs/types'
 import { WebContentSizeCategory } from '../types'
 import { NavigationBar, StatusBar } from './mock'
-import { error, isServer, schemeToTheme } from './utils'
 import type { UnistylesServices } from './types'
+import { error, isServer, schemeToTheme } from './utils'
 
 export class UnistylesRuntime {
     lightMedia = this.getLightMedia()

package/src/web/shadowRegistry.ts

@@ -1,9 +1,9 @@
+import { UnistyleDependency } from '../specs'
 import type { UnistylesTheme, UnistylesValues } from '../types'
 import { deepMergeObjects } from '../utils'
+import type { UnistylesServices } from './types'
 import { extractSecrets, extractUnistyleDependencies } from './utils'
 import { getVariants } from './variants'
-import type { UnistylesServices } from './types'
-import { UnistyleDependency } from '../specs'
 
 export class UnistylesShadowRegistry {
     // MOCKS

package/src/web/state.ts

@@ -1,11 +1,11 @@
-import type { UnistylesTheme } from '../types'
-import type { UnistylesConfig } from '../specs/StyleSheet'
-import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import { error, hyphenate, isServer, schemeToTheme } from './utils'
 import { UnistyleDependency } from '../specs/NativePlatform'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppTheme, AppThemeName } from '../specs/types'
+import type { UnistylesTheme } from '../types'
 import type { UnionToIntersection } from '../types'
 import type { UnistylesServices } from './types'
+import { error, hyphenate, isServer, schemeToTheme } from './utils'
 
 type UnistylesSettings = Partial<UnionToIntersection<Required<UnistylesConfig>['settings']>>
 

package/src/web/utils/common.ts

@@ -65,5 +65,5 @@ const cyrb53 = (data: string, seed = 0) => {
 export const generateHash = (value: any) => {
     const serialized = serialize(value)
 
-    return `unistyles-${cyrb53(serialized).toString(36)}`
+    return `unistyles_${cyrb53(serialized).toString(36)}`
 }

package/src/web/utils/unistyle.ts

@@ -1,10 +1,10 @@
+import type { UnistylesBreakpoints } from '../../global'
+import { isUnistylesMq, parseMq } from '../../mq'
 import type { UnistyleDependency } from '../../specs/NativePlatform'
 import { ColorScheme, Orientation } from '../../specs/types'
 import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
-import { isUnistylesMq, parseMq } from '../../mq'
-import { keyInObject, reduceObject } from './common'
-import type { UnistylesBreakpoints } from '../../global'
 import { UnistylesWeb } from '../index'
+import { keyInObject, reduceObject } from './common'
 
 export const schemeToTheme = (scheme: ColorScheme) => {
     switch (scheme) {
@@ -27,9 +27,9 @@ export const assignSecrets = <T>(object: T, secrets: UnistyleSecrets) => {
     const secretsId = Math.random().toString(36).slice(8)
 
     // @ts-expect-error assign hidden secrets
-    object[`unistyles-${secretsId}`] = {}
+    object[`unistyles_${secretsId}`] = {}
     // @ts-expect-error assign hidden secrets
-    Object.defineProperties(object[`unistyles-${secretsId}`], reduceObject(secrets, secret => ({
+    Object.defineProperties(object[`unistyles_${secretsId}`], reduceObject(secrets, secret => ({
         value: secret,
         enumerable: false,
         configurable: true
@@ -43,7 +43,7 @@ export const extractSecrets = (object: any) => {
         return undefined
     }
 
-    const [, secrets] = Object.entries(object).find(([key]) => key.startsWith('unistyles-')) ?? []
+    const [, secrets] = Object.entries(object).find(([key]) => key.startsWith('unistyles_')) ?? []
 
     if (!secrets) {
         return undefined

package/plugin/common.js

@@ -1,142 +0,0 @@
-function getIdentifierNameFromExpression(t, memberExpression) {
-    if (t.isMemberExpression(memberExpression)) {
-        if (memberExpression.computed) {
-            return [
-                getIdentifierNameFromExpression(t, memberExpression.property),
-                getIdentifierNameFromExpression(t, memberExpression.object)
-            ].flat()
-        }
-
-        const object = memberExpression.object
-
-        // If the object is an Identifier, return its name
-        if (t.isIdentifier(object)) {
-            return [object.name]
-        }
-
-        // If the object is another MemberExpression, recursively get the identifier
-        if (t.isMemberExpression(object)) {
-            return getIdentifierNameFromExpression(t, object).flat()
-        }
-    }
-
-    if (t.isBinaryExpression(memberExpression)) {
-        return [
-            getIdentifierNameFromExpression(t, memberExpression.left),
-            getIdentifierNameFromExpression(t, memberExpression.right)
-        ].flat()
-    }
-
-    if (t.isCallExpression(memberExpression)) {
-        return getIdentifierNameFromExpression(t, memberExpression.callee)
-    }
-
-    if (t.isConditionalExpression(memberExpression)) {
-        return [
-            getIdentifierNameFromExpression(t, memberExpression.test.left),
-            getIdentifierNameFromExpression(t, memberExpression.test.right),
-            getIdentifierNameFromExpression(t, memberExpression.alternate),
-            getIdentifierNameFromExpression(t, memberExpression.consequent),
-            getIdentifierNameFromExpression(t, memberExpression.test)
-        ].flat()
-    }
-
-    if (t.isArrayExpression(memberExpression)) {
-        return memberExpression.elements.map(expression => getIdentifierNameFromExpression(t, expression)).flat()
-    }
-
-    if (t.isArrowFunctionExpression(memberExpression)) {
-        return memberExpression.body.properties.map(prop => getIdentifierNameFromExpression(t, prop.value)).flat()
-    }
-
-    if (t.isTemplateLiteral(memberExpression)) {
-        return memberExpression.expressions.map(expression => getIdentifierNameFromExpression(t, expression)).flat()
-    }
-
-    if (t.isObjectExpression(memberExpression)) {
-        return memberExpression.properties
-            .filter(property => t.isObjectProperty(property))
-            .flatMap(property => getIdentifierNameFromExpression(t, property.value))
-    }
-
-    if (t.isUnaryExpression(memberExpression)) {
-        return getIdentifierNameFromExpression(t, memberExpression.argument.object)
-    }
-
-    return []
-}
-
-function getSecondPropertyName(t, memberExpression) {
-    if (t.isUnaryExpression(memberExpression)) {
-        return getSecondPropertyName(t, memberExpression.argument.object)
-    }
-
-    if (t.isConditionalExpression(memberExpression)) {
-        return [
-            getSecondPropertyName(t, memberExpression.test.left),
-            getSecondPropertyName(t, memberExpression.test.right),
-            getSecondPropertyName(t, memberExpression.alternate),
-            getSecondPropertyName(t, memberExpression.consequent),
-            getSecondPropertyName(t, memberExpression.test)
-        ].flat()
-    }
-
-    if (t.isTemplateLiteral(memberExpression)) {
-        return memberExpression.expressions.map(expression => getSecondPropertyName(t, expression)).flat()
-    }
-
-    if (t.isBinaryExpression(memberExpression)) {
-        return [
-            getSecondPropertyName(t, memberExpression.left),
-            getSecondPropertyName(t, memberExpression.right)
-        ].flat()
-    }
-
-    if (t.isObjectExpression(memberExpression)) {
-        return memberExpression.properties
-            .filter(property => t.isObjectProperty(property))
-            .flatMap(property => getSecondPropertyName(t, property.value))
-    }
-
-    if (t.isArrayExpression(memberExpression)) {
-        return memberExpression.elements.map(expression => getSecondPropertyName(t, expression)).flat()
-    }
-
-    if (!t.isMemberExpression(memberExpression)) {
-        return []
-    }
-
-    let current = memberExpression.computed
-        ? memberExpression.property
-        : memberExpression
-    let propertyName = null
-
-    while (t.isMemberExpression(current)) {
-        propertyName = current.property
-        current = current.object
-    }
-
-    // special case for IME
-    if (propertyName && t.isIdentifier(propertyName) && propertyName.name === 'insets') {
-        if (t.isIdentifier(memberExpression.property) && memberExpression.property.name === "ime") {
-            return [memberExpression.property.name]
-        }
-
-        return [propertyName.name]
-    }
-
-    if (propertyName && t.isIdentifier(propertyName)) {
-        return [propertyName.name]
-    }
-
-    if (propertyName) {
-        return [propertyName.value]
-    }
-
-    return []
-}
-
-module.exports = {
-    getIdentifierNameFromExpression,
-    getSecondPropertyName
-}

package/plugin/consts.js

@@ -1,63 +0,0 @@
-const REACT_NATIVE_COMPONENT_NAMES = [
-    'ActivityIndicator',
-    'View',
-    'Text',
-    'Image',
-    'ImageBackground',
-    'KeyboardAvoidingView',
-    'Pressable',
-    'ScrollView',
-    'FlatList',
-    'SectionList',
-    'Switch',
-    'TextInput',
-    'RefreshControl',
-    'TouchableHighlight',
-    'TouchableOpacity',
-    'VirtualizedList',
-    'Animated'
-    // Modal - there is no exposed native handle
-    // TouchableWithoutFeedback - can't accept a ref
-]
-
-// auto replace RN imports to Unistyles imports under these paths
-// our implementation simply borrows 'ref' to register it in ShadowRegistry
-// so we won't affect anyone's implementation
-const REPLACE_WITH_UNISTYLES_PATHS = [
-    'react-native-reanimated/src/component',
-    'react-native-gesture-handler/src/components'
-]
-
-// this is more powerful API as it allows to convert unmatched imports to Unistyles
-// { path: string, imports: Array<{ name: string, isDefault: boolean, path: string, mapTo: string }> }
-// path => node_modules path
-// imports:
-// name? <- target import name if isDefault is false
-// isDefault <- is the import default?
-// path <- path to the target import
-// mapTo <- name of the Unistyles component
-const REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = []
-
-// this list will additionally detect React Native direct imports
-const NATIVE_COMPONENTS_PATHS = {
-    imports: [
-        {
-            name: 'NativeText',
-            isDefault: false,
-            path: 'react-native/Libraries/Text/TextNativeComponent',
-            mapTo: 'NativeText'
-        },
-        {
-            isDefault: true,
-            path: 'react-native/Libraries/Components/View/ViewNativeComponent',
-            mapTo: 'NativeView'
-        }
-    ]
-}
-
-module.exports = {
-    NATIVE_COMPONENTS_PATHS,
-    REACT_NATIVE_COMPONENT_NAMES,
-    REPLACE_WITH_UNISTYLES_PATHS,
-    REPLACE_WITH_UNISTYLES_EXOTIC_PATHS
-}

package/plugin/exotic.js

@@ -1,54 +0,0 @@
-function handleExoticImport(t, path, state, exoticImport) {
-    const specifiers = path.node.specifiers
-    const source = path.node.source
-
-    if (path.node.importKind !== 'value') {
-        return
-    }
-
-    specifiers.forEach(specifier => {
-        for (const rule of exoticImport.imports) {
-            const hasMatchingImportType = (!rule.isDefault && t.isImportSpecifier(specifier)) || (rule.isDefault && t.isImportDefaultSpecifier(specifier))
-            const hasMatchingImportName = rule.isDefault || (!rule.isDefault && rule.name === specifier.local.name)
-            const hasMatchingPath = rule.path === source.value
-
-            if (!hasMatchingImportType || !hasMatchingImportName || !hasMatchingPath) {
-                continue
-            }
-
-            if (t.isImportDefaultSpecifier(specifier)) {
-                const newImport = t.importDeclaration(
-                    [t.importDefaultSpecifier(t.identifier(specifier.local.name))],
-                    t.stringLiteral(state.opts.isLocal
-                        ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
-                        : `react-native-unistyles/components/native/${rule.mapTo}`
-                    )
-                )
-
-                path.replaceWith(newImport)
-            } else {
-                const newImport = t.importDeclaration(
-                    [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
-                    t.stringLiteral(state.opts.isLocal
-                        ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
-                        : `react-native-unistyles/components/native/${rule.mapTo}`
-                    )
-                )
-
-                path.node.specifiers = specifiers.filter(s => s !== specifier)
-
-                if (path.node.specifiers.length === 0) {
-                    path.replaceWith(newImport)
-                } else {
-                    path.insertBefore(newImport)
-                }
-            }
-
-            return
-        }
-    })
-}
-
-module.exports = {
-    handleExoticImport
-}

package/plugin/import.js

@@ -1,51 +0,0 @@
-/** @param {import('./index').UnistylesPluginPass} state */
-function addUnistylesImport(t, path, state) {
-    const localNames = Object.keys(state.reactNativeImports)
-    const names = Object.values(state.reactNativeImports)
-    const pairs = Object.entries(state.reactNativeImports)
-    const nodesToRemove = []
-
-    // remove rn-imports
-    path.node.body.forEach(node => {
-        // user might have multiple imports like import type, import
-        if (t.isImportDeclaration(node) && node.source.value === 'react-native') {
-            node.specifiers = node.specifiers.filter(specifier => !localNames.some(name => name === specifier.local.name))
-
-            if (node.specifiers.length === 0) {
-                nodesToRemove.push(node)
-            }
-        }
-    })
-
-    // remove RNWeb imports
-    names.forEach(name => {
-        const rnWebImport = path.node.body.find(node => t.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`)
-
-        if (rnWebImport) {
-            rnWebImport.specifiers = []
-        }
-    })
-
-    // import components from react-native-unistyles
-    pairs.forEach(([localName, name]) => {
-        const newImport = t.importDeclaration(
-            [t.importSpecifier(t.identifier(localName), t.identifier(name))],
-            t.stringLiteral(state.opts.isLocal
-                ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${name}`)
-                : `react-native-unistyles/components/native/${name}`
-            )
-        )
-
-        path.node.body.unshift(newImport)
-    })
-
-    // cleanup
-    nodesToRemove.forEach(node => path.node.body.splice(path.node.body.indexOf(node), 1))
-}
-
-const isInsideNodeModules = state => state.file.opts.filename.includes('node_modules')
-
-module.exports = {
-    isInsideNodeModules,
-    addUnistylesImport
-}

package/plugin/ref.js

@@ -1,11 +0,0 @@
-function hasStringRef(t, path) {
-    return path.node.openingElement.attributes.find(attr =>
-        t.isJSXAttribute(attr) &&
-        t.isJSXIdentifier(attr.name, { name: 'ref' }) &&
-        t.isStringLiteral(attr.value)
-    )
-}
-
-module.exports = {
-    hasStringRef
-}