@niibase/uniwind 1.6.4 → 1.8.0

package/src/components/web/rnw.ts

@@ -1,6 +1,6 @@
+import { StyleDependency } from '../../common/consts'
 import { Uniwind } from '../../core'
 import { UniwindListener } from '../../core/listener'
-import { StyleDependency } from '../../types'
 import './metro-injected'
 
 type UniwindWithThemes = {

package/src/core/config/config.common.ts

@@ -1,11 +1,13 @@
-import { ComponentPropsWithRef, createElement, ElementType, useMemo } from 'react'
-import { Appearance, Insets, Platform } from 'react-native'
-import { ApplyUniwind } from '../../hoc/types'
-import { withUniwind } from '../../hoc/withUniwind'
-import { GetCSSVariable, getCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
-import { ColorScheme, StyleDependency } from '../../types'
+import { createElement, useMemo } from 'react'
+import type { Insets } from 'react-native'
+import { Appearance, Platform } from 'react-native'
+import { ColorScheme, StyleDependency } from '../../common/consts'
+import { withUniwind } from '../../hoc'
+import type { ApplyUniwind } from '../../hoc/types'
+import type { GetCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
+import { getCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
 import { UniwindListener } from '../listener'
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 
 const SYSTEM_THEME = 'system' as const
 // Platform.constants is not defined in RNW
@@ -54,9 +56,9 @@ export class UniwindConfigBuilder {
         return colorScheme ?? ColorScheme.Light
     }
 
-    Wrapper<T extends ElementType>({ as, ...props }: {
+    Wrapper<T extends React.ElementType>({ as, ...props }: {
         as: T
-    } & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>) {
+    } & ApplyUniwind<Omit<React.ComponentPropsWithRef<T>, 'as'>>) {
         const StyledComponent = useMemo(() => withUniwind(as as any), [as])
         return createElement(StyledComponent, props)
     }

package/src/core/config/config.native.ts

@@ -1,10 +1,10 @@
 import { formatHex, formatHex8, parse } from 'culori'
-import { Insets } from 'react-native'
-import { StyleDependency } from '../../types'
+import type { Insets } from 'react-native'
+import { StyleDependency } from '../../common/consts'
 import { UniwindListener } from '../listener'
 import { Logger } from '../logger'
 import { UniwindStore } from '../native'
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
 
 class UniwindConfigBuilder extends UniwindConfigBuilderBase {
@@ -37,11 +37,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
             }
 
             UniwindStore.vars[theme] ??= {}
-            Object.defineProperty(UniwindStore.vars[theme], varName, {
-                configurable: true,
-                enumerable: true,
-                get: getValue,
-            })
+            UniwindStore.vars[theme][varName] = getValue
         })
 
         UniwindListener.notify([StyleDependency.Variables])

package/src/core/config/config.ts

@@ -1,8 +1,8 @@
+import { StyleDependency } from '../../common/consts'
 import { arrayEquals } from '../../common/utils'
-import { StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { Logger } from '../logger'
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 import { getWebVariable } from '../web'
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
 

package/src/core/listener.ts

@@ -1,4 +1,4 @@
-import { StyleDependency } from '../types'
+import { StyleDependency } from '../common/consts'
 
 type SubscribeOptions = {
     once?: boolean

package/src/core/native/native-utils.ts

@@ -31,15 +31,6 @@ export function lightDark(this: UniwindRuntime, light: string, dark: string) {
     return light
 }
 
-export const cloneWithAccessors = <T extends object>(obj: T) => {
-    const proto = Object.getPrototypeOf(obj)
-    const clone = Object.create(proto)
-
-    Object.defineProperties(clone, Object.getOwnPropertyDescriptors(obj))
-
-    return clone
-}
-
 export const parseColor = (type: string, color: string) => {
     try {
         const parsedColor = parse(`${type}(${color})`)

package/src/core/native/parsers/textShadow.ts

@@ -10,28 +10,16 @@ export const parseTextShadowMutation = (styles: Record<string, any>) => {
     const [offsetX, offsetY, radius] = offsets
 
     if (offsetX !== undefined && offsetY !== undefined) {
-        Object.defineProperty(styles, 'textShadowOffset', {
-            configurable: true,
-            enumerable: true,
-            value: {
-                width: Number(offsetX),
-                height: Number(offsetY),
-            },
-        })
+        styles.textShadowOffset = {
+            width: Number(offsetX),
+            height: Number(offsetY),
+        }
         delete styles.textShadow
     }
 
     if (radius !== undefined) {
-        Object.defineProperty(styles, 'textShadowRadius', {
-            configurable: true,
-            enumerable: true,
-            value: Number(radius),
-        })
+        styles.textShadowRadius = Number(radius)
     }
 
-    Object.defineProperty(styles, 'textShadowColor', {
-        configurable: true,
-        enumerable: true,
-        value: color,
-    })
+    styles.textShadowColor = color
 }

package/src/core/native/parsers/transforms.ts

@@ -57,10 +57,6 @@ export const parseTransformsMutation = (styles: Record<string, any>, preserve: b
     }
 
     if (transformsResult.length > 0) {
-        Object.defineProperty(styles, 'transform', {
-            configurable: true,
-            enumerable: true,
-            value: transformsResult,
-        })
+        styles.transform = transformsResult
     }
 }

package/src/core/native/runtime.ts

@@ -1,7 +1,7 @@
 import { Appearance, Dimensions, I18nManager, PixelRatio, Platform, StyleSheet } from 'react-native'
 import { cubicBezier, linear, steps } from 'react-native-reanimated'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import { ColorScheme, Orientation } from '../../types'
+import { ColorScheme, DEFAULT_SCREEN_WIDTH, Orientation } from '../../common/consts'
 import type { UniwindRuntime as UniwindRuntimeType } from '../types'
 import { colorMix, lightDark, parseColor } from './native-utils'
 
@@ -31,6 +31,11 @@ export const UniwindRuntime = {
         // eslint-disable-next-line no-extra-boolean-cast
         return Platform.select(Boolean(other) ? { android, ios, default: other } : { android, default: ios })
     },
+    makeResponsive(value: number, base: number = DEFAULT_SCREEN_WIDTH, useHeight: boolean = false) {
+        const dimension = useHeight ? this.screen.height : this.screen.width
+
+        return Math.round(value * dimension / base)
+    },
 } as UniwindRuntimeType
 
 UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime)

package/src/core/native/store.ts

@@ -1,10 +1,8 @@
 import { Dimensions, Platform } from 'react-native'
-import { CSSAnimationKeyframes } from 'react-native-reanimated'
-import { Platform as UniwindPlatform, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
-import { Orientation, StyleDependency } from '../../types'
+import type { CSSAnimationKeyframes } from 'react-native-reanimated'
+import { Orientation, Platform as UniwindPlatform, StyleDependency, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
 import { UniwindListener } from '../listener'
-import { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType } from '../types'
-import { cloneWithAccessors } from './native-utils'
+import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType, Var, Vars } from '../types'
 import {
     parseBoxShadow,
     parseFontVariant,
@@ -25,8 +23,7 @@ const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum:
 
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
-    vars = {} as Record<ThemeName, Record<string, unknown>>
-
+    vars = {} as Record<ThemeName, Vars>
     private stylesheet = {} as StyleSheets
     private keyframes = {} as Record<string, CSSAnimationKeyframes>
     private cache = {} as Record<ThemeName, Map<string, StylesResult>>
@@ -73,21 +70,21 @@ class UniwindStoreBuilder {
         const platformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${platform}`]
 
         if (commonPlatformVars) {
-            Object.defineProperties(vars, Object.getOwnPropertyDescriptors(commonPlatformVars))
+            Object.assign(vars, commonPlatformVars)
         }
 
         if (platformVars) {
-            Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars))
+            Object.assign(vars, platformVars)
         }
 
         this.keyframes = keyframes
         this.stylesheet = stylesheet
         this.vars = Object.fromEntries(themes.map(theme => {
-            const clonedVars = cloneWithAccessors(vars)
+            const clonedVars = Object.create(vars) as Vars
             const themeVars = scopedVars[`${UNIWIND_THEME_VARIABLES}${theme}`]
 
             if (themeVars) {
-                Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars))
+                Object.assign(clonedVars, themeVars)
             }
 
             return [theme, clonedVars]
@@ -105,7 +102,7 @@ class UniwindStoreBuilder {
         state: ComponentState | undefined,
         uniwindContext: UniwindContextType,
     ) {
-        const result = {} as Record<string, any>
+        const resultGetters = {} as Record<string, Var>
         const theme = uniwindContext.scopedTheme ?? this.runtime.currentThemeName
         // At this point we're sure that theme is correct
         let vars = this.vars[theme]!
@@ -168,20 +165,12 @@ class UniwindStoreBuilder {
                     if (property[0] === '-') {
                         // Clone vars object if we are adding inline variables
                         if (vars === originalVars) {
-                            vars = cloneWithAccessors(originalVars)
+                            vars = Object.create(originalVars)
                         }
 
-                        Object.defineProperty(vars, property, {
-                            configurable: true,
-                            enumerable: true,
-                            get: valueGetter,
-                        })
+                        vars[property] = valueGetter
                     } else {
-                        Object.defineProperty(result, property, {
-                            configurable: true,
-                            enumerable: true,
-                            get: () => valueGetter.call(vars),
-                        })
+                        resultGetters[property] = valueGetter
                     }
 
                     bestBreakpoints.set(property, style)
@@ -189,81 +178,49 @@ class UniwindStoreBuilder {
             }
         }
 
+        const result = Object.fromEntries(
+            Object.entries(resultGetters).map(([property, valueGetter]) => [property, valueGetter(vars)]),
+        ) as Record<string, any>
+
         if (result.lineHeight !== undefined && result.lineHeight < 6) {
-            Object.defineProperty(result, 'lineHeight', {
-                value: result.fontSize * result.lineHeight,
-                configurable: true,
-                enumerable: true,
-            })
+            result.lineHeight *= result.fontSize
         }
 
         if (result.boxShadow !== undefined) {
-            Object.defineProperty(result, 'boxShadow', {
-                value: parseBoxShadow(result.boxShadow),
-                configurable: true,
-                enumerable: true,
-            })
+            result.boxShadow = parseBoxShadow(result.boxShadow)
         }
 
         if (result.visibility === 'hidden') {
-            Object.defineProperty(result, 'display', {
-                value: 'none',
-                configurable: true,
-                enumerable: true,
-            })
+            result.display = 'none'
         }
 
         if (
             result.borderStyle !== undefined && result.borderColor === undefined
         ) {
-            Object.defineProperty(result, 'borderColor', {
-                value: '#000000',
-                configurable: true,
-                enumerable: true,
-            })
+            result.borderColor = '#000000'
         }
 
         if (
             result.outlineStyle !== undefined && result.outlineColor === undefined
         ) {
-            Object.defineProperty(result, 'outlineColor', {
-                value: '#000000',
-                configurable: true,
-                enumerable: true,
-            })
+            result.outlineColor = '#000000'
         }
 
         if (result.fontVariant !== undefined) {
-            Object.defineProperty(result, 'fontVariant', {
-                value: parseFontVariant(result.fontVariant),
-                configurable: true,
-                enumerable: true,
-            })
+            result.fontVariant = parseFontVariant(result.fontVariant)
         }
 
         parseTransformsMutation(result)
         parseTransitionsMutation(result)
 
         if (typeof result.animationName === 'string') {
-            Object.defineProperty(result, 'animationName', {
-                value: this.keyframes[result.animationName] ?? [],
-                configurable: true,
-                enumerable: true,
-            })
+            result.animationName = this.keyframes[result.animationName] ?? []
         } else if (Array.isArray(result.animationName)) {
-            Object.defineProperty(result, 'animationName', {
-                value: result.animationName.map(animationName => this.keyframes[animationName] ?? undefined).filter(Boolean),
-                configurable: true,
-                enumerable: true,
-            })
+            result.animationName = result.animationName.map(animationName => this.keyframes[animationName] ?? undefined).filter(Boolean)
         }
 
         if (result.experimental_backgroundImage !== undefined) {
-            Object.defineProperty(result, 'experimental_backgroundImage', {
-                value: resolveGradient(result.experimental_backgroundImage),
-                configurable: true,
-                enumerable: true,
-            })
+            result.experimental_backgroundImage = resolveGradient(result.experimental_backgroundImage)
         }
 
         if (result.textShadow !== undefined) {
@@ -271,7 +228,7 @@ class UniwindStoreBuilder {
         }
 
         return {
-            styles: { ...result } as RNStyle,
+            styles: result,
             dependencies: Array.from(dependencies),
             dependencySum,
             hasDataAttributes,

package/src/core/types.ts

@@ -1,16 +1,19 @@
 import React from 'react'
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
-import { CSSAnimationKeyframes } from 'react-native-reanimated'
-import { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing'
-import { ColorScheme, Orientation, StyleDependency, UniwindConfig } from '../types'
+import type { CSSAnimationKeyframes } from 'react-native-reanimated'
+import type { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing'
+import type { ColorScheme, Orientation, StyleDependency } from '../common/consts'
 import type { UniwindContext } from './context'
 
+export type Vars = Record<PropertyKey, Var>
+export type Var = (vars: Vars) => unknown
+
 export type Style = {
-    entries: Array<[string, () => unknown]>
+    entries: Array<[string, Var]>
     minWidth: number
     maxWidth: number
     orientation: Orientation | null
-    theme: ColorScheme | null
+    theme: ThemeName | null
     rtl: boolean | null
     native: boolean
     dependencies: Array<StyleDependency> | null
@@ -28,11 +31,13 @@ export type StyleSheets = Record<string, Array<Style>>
 
 export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     stylesheet: StyleSheets
-    vars: Record<string, unknown>
+    vars: Vars
     keyframes: Record<string, CSSAnimationKeyframes>
-    scopedVars: Partial<Record<string, Record<string, unknown>>>
+    scopedVars: Partial<Record<string, Vars>>
 }
 
+export interface UniwindConfig {}
+
 type UserThemes = UniwindConfig extends { themes: infer T extends readonly string[] } ? T
     : readonly string[]
 
@@ -63,6 +68,7 @@ export type UniwindRuntime = {
     lightDark: (light: string, dark: string) => string
     parseColor: (type: string, color: string) => string
     platformSelect: (android: string, ios: string, other?: string) => string
+    makeResponsive: (value: number, base: number, useHeight?: boolean) => number
 }
 
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {

package/src/core/web/cssListener.ts

@@ -1,4 +1,4 @@
-import { StyleDependency } from '../../types'
+import { StyleDependency } from '../../common/consts'
 import { UniwindListener } from '../listener'
 
 class CSSListenerBuilder {

package/src/core/web/getWebStyles.ts

@@ -1,5 +1,5 @@
 import { generateDataSet } from '../../components/web/generateDataSet'
-import { RNStyle, UniwindContextType } from '../types'
+import type { RNStyle, UniwindContextType } from '../types'
 import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
 

package/src/hoc/types.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentPropsWithRef } from 'react'
-import { RNStyle } from '../core/types'
+import type { ComponentProps, ComponentPropsWithRef } from 'react'
+import type { RNStyle } from '../core/types'
 
 export type AnyObject = Record<PropertyKey, any>
 

package/src/hoc/withUniwind.native.tsx

@@ -1,11 +1,12 @@
-import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import type { ComponentProps } from 'react'
+import { useLayoutEffect, useReducer } from 'react'
+import type { StyleDependency } from '../common/consts'
 import { isDefined } from '../common/utils'
 import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
 import { Logger } from '../core/logger'
 import { UniwindStore } from '../core/native'
-import { StyleDependency } from '../types'
-import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
+import type { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
 let warnedOnce = false

package/src/hoc/withUniwind.tsx

@@ -1,10 +1,11 @@
-import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import type { ComponentProps } from 'react'
+import { useLayoutEffect, useReducer } from 'react'
 import { isDefined } from '../common/utils'
 import { generateDataSet } from '../components/web/generateDataSet'
 import { useUniwindContext } from '../core/context'
 import { Logger } from '../core/logger'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
-import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
+import type { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
 let warnedOnce = false

package/src/hooks/useCSSVariable/getVariableValue.native.ts

@@ -1,5 +1,8 @@
 import { UniwindRuntime, UniwindStore } from '../../core/native'
-import { UniwindContextType } from '../../core/types'
+import type { UniwindContextType } from '../../core/types'
 
-export const getVariableValue = (name: string, uniwindContext: UniwindContextType) =>
-    UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]?.[name]
+export const getVariableValue = (name: string, uniwindContext: UniwindContextType) => {
+    const vars = UniwindStore.vars[uniwindContext.scopedTheme ?? UniwindRuntime.currentThemeName]
+
+    return vars?.[name]?.(vars)
+}

package/src/hooks/useCSSVariable/useCSSVariable.ts

@@ -1,15 +1,21 @@
 import { useLayoutEffect, useRef, useState } from 'react'
+import { Platform } from 'react-native'
+import { StyleDependency } from '../../common/consts'
 import { arrayEquals } from '../../common/utils'
 import { useUniwindContext } from '../../core/context'
 import { UniwindListener } from '../../core/listener'
 import { Logger } from '../../core/logger'
-import { UniwindContextType } from '../../core/types'
-import { StyleDependency } from '../../types'
+import type { UniwindContextType } from '../../core/types'
 import { getVariableValue } from './getVariableValue'
 
 let warned = false
 
 const logDevError = (name: string) => {
+    // Silent warnings for SSR
+    if (Platform.OS === 'web' && (typeof document === 'undefined' || typeof window === 'undefined')) {
+        return
+    }
+
     warned = true
     Logger.warn(
         `We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`,

package/src/hooks/useResolveClassNames.ts

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useReducer } from 'react'
 import { useUniwindContext } from '../core/context'
-import { RNStyle } from '../core/types'
+import type { RNStyle } from '../core/types'
 import { CSSListener, getWebStyles } from '../core/web'
 
 const emptyState = {} as RNStyle

package/src/hooks/useUniwind.ts

@@ -1,9 +1,9 @@
 import { useLayoutEffect, useState } from 'react'
+import { StyleDependency } from '../common/consts'
 import { Uniwind } from '../core'
 import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
-import { ThemeName } from '../core/types'
-import { StyleDependency } from '../types'
+import type { ThemeName } from '../core/types'
 
 export const useUniwind = (): { theme: ThemeName; hasAdaptiveThemes: boolean } => {
     const uniwindContext = useUniwindContext()

package/src/index.ts

@@ -1,7 +1,6 @@
 export * from './components/ScopedTheme'
 export { Uniwind } from './core'
-export type { ThemeName } from './core/types'
+export type { ThemeName, UniwindConfig } from './core/types'
 export { withUniwind } from './hoc'
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'
 export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks'
-export type { UniwindConfig } from './types'

package/dist/common/types.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyleDependency = exports.Orientation = exports.ColorScheme = void 0;
-var StyleDependency = exports.StyleDependency = /* @__PURE__ */(StyleDependency2 => {
-  StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
-  StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
-  StyleDependency2[StyleDependency2["Dimensions"] = 3] = "Dimensions";
-  StyleDependency2[StyleDependency2["Orientation"] = 4] = "Orientation";
-  StyleDependency2[StyleDependency2["Insets"] = 5] = "Insets";
-  StyleDependency2[StyleDependency2["FontScale"] = 6] = "FontScale";
-  StyleDependency2[StyleDependency2["Rtl"] = 7] = "Rtl";
-  StyleDependency2[StyleDependency2["AdaptiveThemes"] = 8] = "AdaptiveThemes";
-  StyleDependency2[StyleDependency2["Variables"] = 9] = "Variables";
-  return StyleDependency2;
-})(StyleDependency || {});
-var Orientation = exports.Orientation = /* @__PURE__ */(Orientation2 => {
-  Orientation2["Portrait"] = "portrait";
-  Orientation2["Landscape"] = "landscape";
-  return Orientation2;
-})(Orientation || {});
-var ColorScheme = exports.ColorScheme = /* @__PURE__ */(ColorScheme2 => {
-  ColorScheme2["Light"] = "light";
-  ColorScheme2["Dark"] = "dark";
-  return ColorScheme2;
-})(ColorScheme || {});

package/dist/common/utils/stringifyThemes.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.stringifyThemes = void 0;
-const stringifyThemes = (themes = []) => `[${themes.map(theme => `'${theme}'`).join(", ")}]`;
-exports.stringifyThemes = stringifyThemes;