@niibase/uniwind 1.0.0 → 1.0.10

package/src/core/native/store.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-depth */
 import { Dimensions, Platform } from 'react-native'
-import { Orientation, StyleDependency } from '../../types'
+import { ColorScheme, Orientation, StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { ComponentState, CSSVariables, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName } from '../types'
 import { cloneWithAccessors } from './native-utils'
@@ -17,6 +17,16 @@ class UniwindStoreBuilder {
     vars = {} as Record<string, unknown>
     runtimeThemeVariables = new Map<ThemeName, CSSVariables>()
     private stylesheet = {} as StyleSheets
+    private varsWithMediaQueries = [] as Array<[
+        string,
+        Array<{
+            value: unknown
+            minWidth: number | null
+            maxWidth: number | null
+            orientation: Orientation | null
+            colorScheme: ColorScheme | null
+        }>,
+    ]>
     private cache = new Map<string, StylesResult>()
     private generateStyleSheetCallbackResult: ReturnType<GenerateStyleSheetsCallback> | null = null
 
@@ -53,11 +63,11 @@ class UniwindStoreBuilder {
             return
         }
 
-        const { scopedVars, stylesheet, vars } = config
-
+        const { scopedVars, stylesheet, vars, varsWithMediaQueries } = config
+        this.vars = varsWithMediaQueries.length > 0 ? { ...vars } : vars
+        this.varsWithMediaQueries = varsWithMediaQueries
         this.generateStyleSheetCallbackResult = config
         this.stylesheet = stylesheet
-        this.vars = vars
 
         const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`]
         const platformVars = scopedVars[`__uniwind-platform-${Platform.OS}`]
@@ -80,11 +90,47 @@ class UniwindStoreBuilder {
         }
     }
 
+    private resolveMediaQueryVars(dependencies: Set<StyleDependency>) {
+        for (const [varName, mqVariants] of this.varsWithMediaQueries) {
+            let bestMatch: { value: unknown; minWidth: number | null } | null = null
+
+            for (const variant of mqVariants) {
+                if (variant.orientation !== null) dependencies.add(StyleDependency.Orientation)
+                if (variant.maxWidth !== null || variant.minWidth !== null) dependencies.add(StyleDependency.Dimensions)
+                if (variant.colorScheme !== null) {
+                    dependencies.add(StyleDependency.ColorScheme)
+                    dependencies.add(StyleDependency.Theme)
+                }
+
+                if (
+                    (variant.minWidth !== null && variant.minWidth > this.runtime.screen.width)
+                    || (variant.maxWidth !== null && variant.maxWidth !== Number.MAX_VALUE && variant.maxWidth < this.runtime.screen.width)
+                    || (variant.orientation !== null && this.runtime.orientation !== variant.orientation)
+                    || (variant.colorScheme !== null && this.runtime.currentThemeName !== variant.colorScheme)
+                ) {
+                    continue
+                }
+
+                if (bestMatch === null || (variant.minWidth ?? 0) > (bestMatch.minWidth ?? 0)) bestMatch = variant
+            }
+
+            if (bestMatch !== null) {
+                Object.defineProperty(this.vars, varName, {
+                    configurable: true,
+                    enumerable: true,
+                    get: () => bestMatch.value,
+                })
+            }
+        }
+
+        return this.vars
+    }
+
     private resolveStyles(classNames: string, state?: ComponentState) {
         const result = {} as Record<string, any>
-        let vars = this.vars
         const dependencies = new Set<StyleDependency>()
         const bestBreakpoints = new Map<string, Style>()
+        let vars = this.resolveMediaQueryVars(dependencies)
 
         for (const className of classNames.split(' ')) {
             if (!(className in this.stylesheet)) {

package/src/core/types.ts

@@ -25,6 +25,16 @@ export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     stylesheet: StyleSheets
     vars: Record<string, unknown>
     scopedVars: Partial<Record<string, Record<string, unknown>>>
+    varsWithMediaQueries: Array<[
+        string,
+        Array<{
+            value: unknown
+            minWidth: number | null
+            maxWidth: number | null
+            orientation: Orientation | null
+            colorScheme: ColorScheme | null
+        }>,
+    ]>
 }
 
 type UserThemes = UniwindConfig extends { themes: infer T extends readonly string[] } ? T

package/src/metro/compileVirtual.ts

@@ -6,7 +6,7 @@ import { Logger } from './logger'
 import { polyfillWeb } from './polyfillWeb'
 import { ProcessorBuilder } from './processor'
 import { Platform, Polyfills } from './types'
-import { serializeJSObject } from './utils'
+import { serialize, serializeJSObject } from './utils'
 
 type CompileVirtualConfig = {
     cssPath: string
@@ -59,6 +59,9 @@ export const compileVirtual = async ({ css, cssPath, platform, themes, polyfills
                 serializeJSObject(scopedVars, (key, value) => `get "${key}"() { return ${value} }`),
             ]),
     )
+    const varsWithMediaQueries = Object.entries(Processor.varsWithMediaQueries)
+        .map(([key, value]) => `["${key}", ${serialize(value)}]`)
+        .join(',')
     const serializedScopedVars = Object.entries(scopedVars)
         .map(([scopedVarsName, scopedVars]) => `"${scopedVarsName}": ({ ${scopedVars} }),`)
         .join('')
@@ -68,6 +71,7 @@ export const compileVirtual = async ({ css, cssPath, platform, themes, polyfills
         '({',
         `scopedVars: ({ ${serializedScopedVars} }),`,
         `vars: ({ ${currentColorVar} ${vars} }),`,
+        `varsWithMediaQueries: ([ ${varsWithMediaQueries} ]),`,
         `stylesheet: ({ ${stylesheet} }),`,
         '})',
     ].join('')

package/src/metro/processor/mq.ts

@@ -1,4 +1,4 @@
-import { MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
+import { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
 import { ColorScheme, Orientation } from '../../types'
 import { MediaQueryResolver, Platform } from '../types'
 import type { ProcessorBuilder } from './processor'
@@ -9,19 +9,26 @@ export class MQ {
     processMediaQueries(mediaQueries: Array<MediaQuery>) {
         const mq = this.getInitialMediaQueryResolver()
 
-        mediaQueries.forEach(mediaQuery => {
+        for (const mediaQuery of mediaQueries) {
             const { condition, mediaType } = mediaQuery
 
             if ([Platform.Android, Platform.iOS, Platform.Native].includes(mediaType as Platform)) {
                 mq.platform = mediaType as Platform
-
-                return
+                continue
             }
 
-            if (condition?.type !== 'feature') {
-                return
-            }
+            if (condition) this.processCondition(condition, mq)
+        }
 
+        return mq
+    }
+
+    private processCondition(condition: MediaCondition, mq: MediaQueryResolver) {
+        if (condition.type === 'operation') {
+            condition.conditions.forEach(nestedCondition => {
+                this.processCondition(nestedCondition, mq)
+            })
+        } else if (condition.type === 'feature') {
             if (condition.value.type === 'range') {
                 this.processWidthMediaQuery(condition.value, mq)
             }
@@ -29,9 +36,7 @@ export class MQ {
             if (condition.value.type === 'plain') {
                 this.processPlainMediaQuery(condition.value, mq)
             }
-        })
-
-        return mq
+        }
     }
 
     private processWidthMediaQuery(query: QueryFeatureFor_MediaFeatureId & { type: 'range' }, mq: MediaQueryResolver) {

package/src/metro/processor/processor.ts

@@ -1,5 +1,5 @@
 import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
-import { Polyfills, ProcessMetaValues } from '../types'
+import { MediaQueryResolver, Polyfills, ProcessMetaValues } from '../types'
 import { Color } from './color'
 import { CSS } from './css'
 import { Functions } from './functions'
@@ -12,6 +12,7 @@ export class ProcessorBuilder {
     stylesheets = {} as Record<string, Array<any>>
     vars = {} as Record<string, any>
     scopedVars = {} as Record<string, Record<string, any>>
+    varsWithMediaQueries = {} as Record<string, Array<any>>
     CSS = new CSS(this)
     RN = new RN(this)
     Var = new Var(this)
@@ -54,6 +55,43 @@ export class ProcessorBuilder {
         })
     }
 
+    private storeVarWithMediaQuery(varName: string, value: any, mq: MediaQueryResolver) {
+        if (!Array.isArray(this.varsWithMediaQueries[varName])) {
+            this.varsWithMediaQueries[varName] = []
+        }
+
+        this.varsWithMediaQueries[varName].push({
+            value,
+            minWidth: mq.minWidth,
+            maxWidth: mq.maxWidth,
+            orientation: mq.orientation ? `'${mq.orientation}'` : null,
+            colorScheme: mq.colorScheme ? `'${mq.colorScheme}'` : null,
+        })
+    }
+
+    private hasMediaQuery(mq: MediaQueryResolver): boolean {
+        return mq.minWidth !== 0 || mq.maxWidth !== Number.MAX_VALUE || mq.orientation !== null || mq.colorScheme !== null
+    }
+
+    private processDeclarationValue(
+        mq: MediaQueryResolver,
+        varName: string,
+        processedValue: any,
+        context: { isVar: boolean; style: any; important: boolean },
+    ) {
+        const { isVar, style, important } = context
+
+        if (isVar && this.hasMediaQuery(mq)) {
+            this.storeVarWithMediaQuery(varName, processedValue, mq)
+        } else {
+            style[varName] = processedValue
+        }
+
+        if (!isVar && important) {
+            style.importantProperties.push(varName)
+        }
+    }
+
     private addDeclaration(declaration: Declaration, important = false) {
         const isVar = this.declarationConfig.root || this.declarationConfig.className === null
         const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries)
@@ -90,31 +128,27 @@ export class ProcessorBuilder {
             this.meta.className = this.declarationConfig.className
         }
 
-        if (declaration.property === 'unparsed') {
-            style[declaration.value.propertyId.property] = this.CSS.processValue(declaration.value.value)
+        const context = { isVar, style, important }
 
-            if (!isVar && important) {
-                style.importantProperties.push(declaration.value.propertyId.property)
-            }
+        if (declaration.property === 'unparsed') {
+            const varName = declaration.value.propertyId.property
+            const processedValue = this.CSS.processValue(declaration.value.value)
+            this.processDeclarationValue(mq, varName, processedValue, context)
 
             return
         }
 
         if (declaration.property === 'custom') {
-            style[declaration.value.name] = this.CSS.processValue(declaration.value.value)
-
-            if (!isVar && important) {
-                style.importantProperties.push(declaration.value.name)
-            }
+            const varName = declaration.value.name
+            const processedValue = this.CSS.processValue(declaration.value.value)
+            this.processDeclarationValue(mq, varName, processedValue, context)
 
             return
         }
 
-        style[declaration.property] = this.CSS.processValue(declaration.value)
-
-        if (!isVar && important) {
-            style.importantProperties.push(declaration.property)
-        }
+        const varName = declaration.property
+        const processedValue = this.CSS.processValue(declaration.value)
+        this.processDeclarationValue(mq, varName, processedValue, context)
     }
 
     private parseRuleRec(rule: Rule<Declaration, MediaQuery>) {
@@ -226,6 +260,11 @@ export class ProcessorBuilder {
                 this.declarationConfig = this.getDeclarationConfig()
             })
 
+            this.declarationConfig.mediaQueries.splice(
+                this.declarationConfig.mediaQueries.length - mediaQueries.length,
+                mediaQueries.length,
+            )
+
             return
         }
 

package/src/metro/resolvers.ts

@@ -39,7 +39,8 @@ const SUPPORTED_COMPONENTS = [
     'VirtualizedList',
 ]
 
-export const nativeResolver = ({
+export const nativeResolver = (extraComponents: Record<string, string>) =>
+({
     context,
     moduleName,
     platform,
@@ -59,6 +60,14 @@ export const nativeResolver = ({
         return resolver(context, `${name}/components`, platform)
     }
 
+    if (moduleName === 'react-native-gesture-handler') {
+        return resolver(context, `${name}/components/native/react-native-gesture-handler`, platform)
+    }
+
+    if (moduleName === 'react-native-svg') {
+        return resolver(context, `${name}/components/native/react-native-svg`, platform)
+    }
+
     if (
         resolution.filePath.includes(`${sep}react-native${sep}Libraries${sep}`)
     ) {
@@ -70,10 +79,16 @@ export const nativeResolver = ({
         }
     }
 
+    if (moduleName in extraComponents) {
+        const componentPath = extraComponents[moduleName]!
+        return resolver(context, componentPath, platform)
+    }
+
     return resolution
 }
 
-export const webResolver = ({
+export const webResolver = (extraComponents: Record<string, string>) =>
+({
     context,
     moduleName,
     platform,
@@ -89,6 +104,11 @@ export const webResolver = ({
         return resolution
     }
 
+    if (moduleName in extraComponents) {
+        const componentPath = extraComponents[moduleName]!
+        return resolver(context, componentPath, platform)
+    }
+
     const segments = resolution.filePath.split(sep)
     const isIndex = segments.at(-1)?.startsWith('index.')
     const module = segments.at(-2)

package/src/metro/types.ts

@@ -21,14 +21,15 @@ export type UniwindConfig = {
     cssEntryFile: string
     themes: Array<string>
     extraThemes?: Array<string>
+    extraComponents?: Record<string, string>
     dtsFile?: string
     polyfills?: Polyfills
     debug?: boolean
 }
 
 export type MediaQueryResolver = {
-    maxWidth: any
-    minWidth: any
+    maxWidth: number | null
+    minWidth: number | null
     platform: Platform | null
     rtl: boolean | null
     important: boolean

package/src/metro/withUniwindConfig.ts

@@ -45,7 +45,7 @@ export const withUniwindConfig = <T extends MetroConfig>(
             ),
             resolveRequest: (context, moduleName, platform) => {
                 const resolver = config.resolver?.resolveRequest ?? context.resolveRequest
-                const platformResolver = platform === Platform.Web ? webResolver : nativeResolver
+                const platformResolver = (platform === Platform.Web ? webResolver : nativeResolver)(uniwindConfig.extraComponents ?? {})
                 const resolved = platformResolver({
                     context,
                     moduleName,

package/types.d.ts

@@ -106,4 +106,42 @@ declare module 'react-native' {
     interface InputAccessoryViewProps {
         backgroundColorClassName?: string
     }
+
+    interface DrawerLayoutAndroidProps {
+        className?: string
+    }
+}
+
+declare module 'react-native-gesture-handler' {
+    // Button components
+    interface BaseButtonProps {
+        className?: string
+    }
+
+    interface BorderlessButtonProps {
+        className?: string
+    }
+
+    interface RawButtonProps {
+        className?: string
+    }
+
+    interface RectButtonProps {
+        className?: string
+    }
+
+    // Gesture handler specific components
+    interface GestureHandlerRootViewProps {
+        className?: string
+    }
+
+    interface PressableProps {
+        className?: string
+    }
+}
+
+declare module 'react-native-svg' {
+    interface SvgProps {
+        className?: string
+    }
 }

package/uniwind.css

@@ -254,9 +254,4 @@
 }
 
 @custom-variant light (&:where(.light, .light *));
-@custom-variant dark (&:where(.dark, .dark *));
-@custom-variant premium (&:where(.premium, .premium *));
-
-@theme {
-    --color-background: unset;
-}
+@custom-variant dark (&:where(.dark, .dark *));