react-native-unistyles 3.0.0-alpha.1 → 3.0.0-alpha.11

package/plugin/ref.js

@@ -14,21 +14,35 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp) {
+function addRef(t, path, metadata, state) {
+    const hasVariants = state.file.hasVariants
+
     const newRefFunction = t.arrowFunctionExpression(
         [t.identifier('ref')],
         t.blockStatement([
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier('ref'),
+                        metadata.styleProp
+                            ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                            : t.identifier(metadata.styleObj),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
                 )
             ),
             t.returnStatement(
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier('ref'),
+                            metadata.styleProp
+                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                : t.identifier(metadata.styleObj)
+                        ]
                     )
                 )
             )
@@ -43,7 +57,8 @@ function addRef(t, path, styleObj, styleProp) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, styleObj, styleProp) {
+function overrideRef(t, path, refProp, metadata, state) {
+    const hasVariants = state.file.hasVariants
     const uniqueRefName = path.scope.generateUidIdentifier('ref').name
     const isIdentifier = t.isIdentifier(refProp.value.expression)
     const binding = path.scope.getBinding(refProp.value.expression.name)
@@ -55,19 +70,35 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             [t.identifier(uniqueRefName)],
             t.blockStatement([
                 t.expressionStatement(
-                    t.assignmentExpression('=', t.identifier(userVariableName), t.identifier(uniqueRefName))
+                    t.assignmentExpression(
+                        '=',
+                        t.memberExpression(t.identifier(userVariableName), t.identifier('current')),
+                        t.identifier(uniqueRefName)
+                    )
                 ),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(uniqueRefName),
+                            metadata.styleProp
+                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                : t.identifier(metadata.styleObj),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
                     )
                 ),
                 t.returnStatement(
                     t.arrowFunctionExpression([],
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [
+                                t.identifier(uniqueRefName),
+                                metadata.styleProp
+                                    ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                    : t.identifier(metadata.styleObj)
+                            ]
                         )
                     )
                 )
@@ -87,15 +118,25 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         const userCleanupFunction = userReturnStatement
             ? userReturnStatement.argument
             : null
+        const userRefName = refProp.value.expression.params.length >= 1
+            ? refProp.value.expression.params.at(0).name
+            : 'ref'
 
         const newRefFunction = t.arrowFunctionExpression(
-            [t.identifier('ref')],
+            [t.identifier(userRefName)],
             t.blockStatement([
                 ...userStatements.filter(statement => !t.isReturnStatement(statement)),
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [
+                            t.identifier(userRefName),
+                            metadata.styleProp
+                                ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                : t.identifier(metadata.styleObj),
+                            t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        ]
                     )
                 ),
                 // Merged cleanup function
@@ -109,7 +150,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                         t.expressionStatement(
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                                [
+                                    t.identifier(userRefName),
+                                    metadata.styleProp
+                                        ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                        : t.identifier(metadata.styleObj)
+                                ]
                             )
                         )
                     ]))
@@ -122,6 +168,10 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
         return
     }
 
+    if (!binding) {
+        return
+    }
+
     // ref={scopedFunction}
     const isArrowFunction = t.isArrowFunctionExpression(binding.path.node.init)
     const isFunction = t.isFunctionDeclaration(binding.path.node)
@@ -146,7 +196,14 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
-                    [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                    [
+                        t.identifier(uniqueRefName),
+                        metadata.styleProp
+                            ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                            : t.identifier(metadata.styleObj),
+                        t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
+                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                    ]
                 )
             ),
             t.returnStatement(
@@ -159,7 +216,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp) {
                     t.expressionStatement(
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [
+                                t.identifier(uniqueRefName),
+                                metadata.styleProp
+                                    ? t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))
+                                    : t.identifier(metadata.styleObj)
+                            ]
                         )
                     )
                 ]))

package/plugin/style.js

@@ -1,44 +1,42 @@
-function getStyleObjectPath(t, node, state) {
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        return [
+            {
+                styleObj: node.object.name,
+                styleProp: node.property.name,
+                dynamicFunction
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element, state))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument, state)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument, state))
+        return node.properties.flatMap(prop => getStyleMetadata(t, prop.argument))
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        const path = getStyleObjectPath(t, node.callee, state)
-        const lastPart = path.slice(-1)
-
-        if (!lastPart) {
-            return path
-        }
-
-        // for web increment counter for dynamic functions
-        if (state.file.webDynamicFunctions[lastPart]) {
-            node.arguments.push(t.numericLiteral(++state.file.webDynamicFunctions[lastPart]))
-
-            return path
-        }
-
-        state.file.webDynamicFunctions[lastPart] = 1
-        node.arguments.push(t.numericLiteral(1))
+        return getStyleMetadata(t, node.callee, node)
+    }
 
-        return path
+    // {styles}
+    if (t.isIdentifier(node)) {
+        return [{
+            styleObj: node.name,
+            styleProp: undefined,
+            dynamicFunction: undefined
+        }]
     }
 
     return []
@@ -52,7 +50,42 @@ function getStyleAttribute(t, path) {
     )
 }
 
+function styleAttributeToArray(t, path) {
+    const styleAttribute = getStyleAttribute(t, path)
+
+    // {{...style.container, ...style.container}}
+    if (t.isObjectExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.properties
+            .map(property => t.isSpreadElement(property)
+                ? property.argument
+                : t.objectExpression([property])
+            )
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    // [{...style.container, ...style.container}]
+    if (t.isArrayExpression(styleAttribute.value.expression)) {
+        const properties = styleAttribute.value.expression.elements
+            .flatMap(property => {
+                if (t.isSpreadElement(property)) {
+                    return property.argument
+                }
+                return property
+            })
+
+        styleAttribute.value.expression = t.arrayExpression(properties)
+
+        return
+    }
+
+    styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
+}
+
 module.exports = {
-    getStyleObjectPath,
-    getStyleAttribute
+    getStyleMetadata,
+    getStyleAttribute,
+    styleAttributeToArray
 }

package/plugin/stylesheet.js

@@ -17,6 +17,19 @@ const UnistyleDependency = {
     NavigationBar: 13
 }
 
+function stringToUniqueId(str) {
+    let hash = 0;
+
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0
+    }
+
+    const absHash = Math.abs(hash)
+
+    return absHash % 1000000000
+}
+
 function isUnistylesStyleSheet(t, path, state) {
     const callee = path.get('callee')
 
@@ -28,6 +41,13 @@ function isUnistylesStyleSheet(t, path, state) {
     )
 }
 
+function addStyleSheetTag(t, path, state) {
+    const callee = path.get('callee')
+    const uniqueId = stringToUniqueId(state.filename) + ++state.file.tagNumber
+
+    callee.container.arguments.push(t.numericLiteral(uniqueId))
+}
+
 function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     const debugMessage = deps => {
         if (state.opts.debug) {
@@ -141,7 +161,30 @@ function analyzeDependencies(t, state, name, unistyleObj, themeName, rtName) {
     }
 }
 
+function getUnistyle(t, property) {
+    const propertyValue = t.isArrowFunctionExpression(property.value)
+        ? property.value.body
+        : property.value
+
+    if (t.isObjectExpression(propertyValue)) {
+        return propertyValue
+    }
+
+    if (t.isBlockStatement(propertyValue)) {
+        const returnStatement = propertyValue.body
+            .find(value => t.isReturnStatement(value))
+
+        return returnStatement
+            ? returnStatement.argument
+            : null
+    }
+
+    return null
+}
+
 module.exports = {
     isUnistylesStyleSheet,
-    analyzeDependencies
+    analyzeDependencies,
+    addStyleSheetTag,
+    getUnistyle
 }

package/plugin/variants.js

@@ -0,0 +1,33 @@
+function isUsingVariants(t, path) {
+    const callee = path.get('callee')
+
+    return (
+        t.isMemberExpression(callee) &&
+        t.isIdentifier(callee.node.object, { name: 'styles' }) &&
+        t.isIdentifier(callee.node.property, { name: 'useVariants' }) &&
+        t.isObjectExpression(path.node.arguments[0])
+    )
+}
+
+function extractVariants(t, path, state) {
+    const arg = path.node.arguments[0]
+
+    const variantDeclaration = t.variableDeclaration('const', [
+        t.variableDeclarator(
+            t.identifier('__uni__variants'),
+            arg
+        )
+    ])
+
+    // Replace useVariants argument with __uni__variants
+    path.node.arguments[0] = t.identifier('__uni__variants')
+
+    path.insertBefore(variantDeclaration)
+
+    state.file.hasVariants = true
+}
+
+module.exports = {
+    isUsingVariants,
+    extractVariants
+}

package/src/specs/NavigtionBar/index.ts

@@ -12,7 +12,7 @@ export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBa
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/ShadowRegistry/index.ts

@@ -4,10 +4,10 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     remove(handle?: ViewHandle, style?: Unistyle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle): void,
+    link(node: ShadowNode, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
     unlink(node: ShadowNode, style: Unistyle): void
 }
 
@@ -26,12 +26,12 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
     return node
 }
 
-HybridShadowRegistry.add = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, style, variants, args) => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
 }
 
 HybridShadowRegistry.remove = (handle, style) => {

package/src/specs/StatusBar/index.ts

@@ -34,7 +34,7 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
 
     privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
     hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color)
+        const parsedColor = processColor(color) ?? 0
 
         privateHybrid._setBackgroundColor(parsedColor as number)
     }

package/src/specs/StyleSheet/index.ts

@@ -41,4 +41,6 @@ HybridUnistylesStyleSheet.jsMethods = {
     processColor
 }
 
-export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, 'jsMethods'>
+type PrivateMethods = 'jsMethods'
+
+export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, PrivateMethods>

package/src/specs/UnistylesRuntime/index.ts

@@ -45,7 +45,7 @@ HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNaviga
 HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
 
 HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
-    const parsedColor = processColor(color)
+    const parsedColor = processColor(color) ?? 0
 
     HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor as number)
 }

package/src/specs/index.web.ts

@@ -2,4 +2,4 @@ import type { ReactElement } from 'react'
 
 export const getSSRUnistyles = () => [] as Array<ReactElement>
 
-export * from '../../web'
+export * from '../web'

package/src/types/stylesheet.ts

@@ -5,7 +5,7 @@ import type { UnistylesMiniRuntime } from '../specs'
 import type { ReactNativeStyleSheet } from './breakpoints'
 import type { ExtractVariantNames } from './variants'
 import type { CSSProperties } from 'react'
-import type { Pseudo } from '../../web/pseudo'
+import type { Pseudo } from '../web/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'

package/{web → src/web}/convert/breakpoint.ts

@@ -2,7 +2,7 @@ import type { MediaQuery } from 'typestyle/lib/types'
 import { UnistylesState } from '../state'
 import { keyInObject } from '../utils'
 import { isUnistylesMq, parseMq } from '../mq'
-import { Orientation } from '../../src/specs/types'
+import { Orientation } from '../../specs/types'
 
 export const convertBreakpoint = (breakpoint: string): MediaQuery => {
     if (Object.values(Orientation).includes(breakpoint as Orientation)) {

package/{web → src/web}/convert/index.ts

@@ -1,5 +1,5 @@
 import type { NestedCSSProperties } from 'typestyle/lib/types'
-import type { UnistylesValues } from '../../src/types'
+import type { UnistylesValues } from '../../types'
 import { media } from 'typestyle'
 import { isPseudo } from '../pseudo'
 import { convertBreakpoint } from './breakpoint'

package/{web → src/web}/convert/types.ts

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

package/{web → src/web}/create.ts

@@ -1,12 +1,12 @@
 import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet } from '../src/types'
-import type { StyleSheetWithSuperPowers, StyleSheet } from '../src/types/stylesheet'
+import type { ReactNativeStyleSheet } from '../types'
+import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
 import { UnistylesRegistry } from './registry'
 import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
 import { UnistylesRuntime } from './runtime'
-import { createUseVariants } from './useVariants'
+import { createUseVariants, getVariants } from './variants'
 import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../src/specs/NativePlatform'
+import type { UnistyleDependency } from '../specs/NativePlatform'
 
 type ListenToDependenciesProps = {
     value: StyleSheet[keyof StyleSheet],
@@ -16,10 +16,13 @@ type ListenToDependenciesProps = {
     args?: Array<any>
 }
 
+type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+
 export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
     const computedStylesheet = typeof stylesheet === 'function'
         ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
         : stylesheet
+    let lastlySelectedVariants: Record<string, any> = {}
 
     const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
         const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
@@ -48,44 +51,42 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
 
     const styles = reduceObject(computedStylesheet, (value, key) => {
         if (typeof value === 'function') {
-            const classNameMap = new Map<number, string>()
-            const unistylesMap = new Map<number, TypeStyle>()
-            const disposeMap = new Map<number, VoidFunction | undefined>()
+            const webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
+            const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
 
             return (...args: Array<any>) => {
-                const [id] = args.slice(-1)
-                const result = value(...args.slice(0, -1))
-                const dispose = disposeMap.get(id)
-                const unistyles = unistylesMap.get(id)
-                const className = classNameMap.get(id)
-
-                if (unistyles && className && dispose) {
-                    dispose()
-                    UnistylesRegistry.updateStyles(unistyles, result, className)
-                    disposeMap.set(id, listenToDependencies({
+                const [ref] = args.slice(-1)
+                const result = value(...args)
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
+                const resultWithVariants = {
+                    ...result,
+                    ...variants[key]
+                }
+
+                if (ref instanceof HTMLElement) {
+                    const storedWebUnistyle = webUnistyleByRef.get(ref)
+                    const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
+
+                    webUnistyleByRef.set(ref, webUnistyle)
+                    disposeByRef.get(ref)?.()
+                    disposeByRef.set(ref, listenToDependencies({
                         key,
                         value,
-                        unistyles,
-                        className,
+                        unistyles: webUnistyle.unistyles,
+                        className: webUnistyle.className,
                         args
                     }))
+                    ref.classList.add(webUnistyle.className)
 
-                    return toReactNativeClassName(className, result)
-                }
+                    if (storedWebUnistyle) {
+                        UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
+                    }
 
-                const entry = UnistylesRegistry.createStyles(result, key)
 
-                classNameMap.set(id, entry.className)
-                unistylesMap.set(id, entry.unistyles)
-                disposeMap.set(id, listenToDependencies({
-                    key,
-                    value,
-                    unistyles: entry.unistyles,
-                    className: entry.className,
-                    args
-                }))
+                    return
+                }
 
-                return toReactNativeClassName(entry.className, result)
+                return toReactNativeClassName(null, resultWithVariants)
             }
         }
 
@@ -96,7 +97,9 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
         return toReactNativeClassName(className, value)
     }) as ReactNativeStyleSheet<StyleSheet>
 
-    createUseVariants(styles)
+    createUseVariants(styles, newVariants => {
+        lastlySelectedVariants = newVariants
+    })
 
     return styles
 }

package/{web → src/web}/listener/listener.ts

@@ -1,4 +1,4 @@
-import { UnistyleDependency } from '../../src/specs/NativePlatform'
+import { UnistyleDependency } from '../../specs/NativePlatform'
 import { UnistylesRuntime } from '../runtime'
 
 export class UnistylesListenerBuilder {

package/{web → src/web}/mock.ts

@@ -1,5 +1,5 @@
-import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar'
-import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar'
+import type { UnistylesNavigationBar as NavigationBarSpec } from '../specs/NavigtionBar'
+import type { UnistylesStatusBar as StatusBarSpec } from '../specs/StatusBar'
 
 export const StatusBar: StatusBarSpec = {
     width: 0,

package/{web → src/web}/registry.ts

@@ -1,5 +1,5 @@
 import { createTypeStyle, TypeStyle } from 'typestyle'
-import type { UnistylesValues } from '../src/types'
+import type { UnistylesValues } from '../types'
 import { convertToTypeStyle } from './convert'
 import { UnistylesState } from './state'
 

package/{web → src/web}/runtime.ts

@@ -1,7 +1,7 @@
-import { UnistyleDependency } from '../src/specs/NativePlatform'
-import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../src/specs/types'
-import type { UnistylesMiniRuntime } from '../src/specs/UnistylesRuntime'
-import { WebContentSizeCategory } from '../src/types'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
+import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { UnistylesState } from './state'

package/{web → src/web}/state.ts

@@ -1,12 +1,12 @@
 import { type ReactElement, createElement, createRef } from 'react'
-import type { UnistylesTheme } from '../src/types'
-import type { UnistylesConfig } from '../src/specs/StyleSheet'
-import type { AppBreakpoint, AppThemeName } from '../src/specs/types'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../src/global'
+import type { UnistylesTheme } from '../types'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppThemeName } from '../specs/types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import { UnistylesRuntime } from './runtime'
 import { isServer, schemeToTheme } from './utils'
 import { UnistylesListener } from './listener'
-import { UnistyleDependency } from '../src/specs/NativePlatform'
+import { UnistyleDependency } from '../specs/NativePlatform'
 
 class UnistylesStateBuilder {
     private readonly isSSR = isServer()