@niibase/uniwind 1.0.13 → 1.1.1

package/scripts/postinstall.mjs

@@ -0,0 +1,57 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-console */
+
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// Get the package root (one level up from scripts/)
+const packageRoot = resolve(dirname(__dirname), '../')
+const isInNodeModules = packageRoot.endsWith('node_modules')
+
+if (isInNodeModules) {
+    const packageJsonPath = join(packageRoot, 'package.json')
+    const distSharedPath = join(packageRoot, 'dist', 'shared')
+
+    try {
+        const packageJsonContent = readFileSync(packageJsonPath, 'utf-8')
+        const updatedPackageJson = packageJsonContent.replace(
+            /"name":\s*"@niibase\/uniwind",/g,
+            '"name": "uniwind",',
+        )
+        writeFileSync(packageJsonPath, updatedPackageJson, 'utf-8')
+        console.log('Updated package.json name field')
+    } catch (error) {
+        console.error('Error updating package.json:', error.message)
+    }
+
+    try {
+        if (statSync(distSharedPath).isDirectory()) {
+            const files = readdirSync(distSharedPath)
+
+            files
+                .map(file => ({
+                    file,
+                    filePath: join(distSharedPath, file),
+                }))
+                .filter(({ filePath }) => statSync(filePath).isFile())
+                .forEach(({ file, filePath }) => {
+                    const content = readFileSync(filePath, 'utf-8')
+                    const updatedContent = content.replace(
+                        /const name = "@niibase\/uniwind";/g,
+                        'const name = "uniwind";',
+                    )
+
+                    if (content !== updatedContent) {
+                        writeFileSync(filePath, updatedContent, 'utf-8')
+                        console.log(`Updated ${file}`)
+                    }
+                })
+        }
+    } catch (error) {
+        console.error('Error updating dist/shared files:', error?.message)
+    }
+}

package/src/core/index.tsx

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef, ElementType, useMemo } from 'react'
+import { withUniwind } from '../hoc'
+import { ApplyUniwind } from '../hoc/types'
+import { Uniwind as UniwindConfig } from './config'
+
+type BoxProps<T extends ElementType> = {
+    as: T
+} & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>
+
+const Box = <T extends ElementType>({ as, ...props }: BoxProps<T>) => {
+    const StyledComponent = useMemo(() => withUniwind(as as any), [as])
+    return <StyledComponent {...props} />
+}
+
+export const Uniwind = Object.assign(
+    Box,
+    UniwindConfig,
+) as typeof UniwindConfig & typeof Box

package/src/core/native/store.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-depth */
 import { Dimensions, Platform } from 'react-native'
-import { ColorScheme, Orientation, StyleDependency } from '../../types'
+import { Orientation, StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { ComponentState, CSSVariables, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName } from '../types'
 import { cloneWithAccessors } from './native-utils'
@@ -17,16 +17,6 @@ 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
 
@@ -63,11 +53,11 @@ class UniwindStoreBuilder {
             return
         }
 
-        const { scopedVars, stylesheet, vars, varsWithMediaQueries } = config
-        this.vars = varsWithMediaQueries.length > 0 ? { ...vars } : vars
-        this.varsWithMediaQueries = varsWithMediaQueries
+        const { scopedVars, stylesheet, vars } = config
+
         this.generateStyleSheetCallbackResult = config
         this.stylesheet = stylesheet
+        this.vars = vars
 
         const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`]
         const platformVars = scopedVars[`__uniwind-platform-${Platform.OS}`]
@@ -90,47 +80,11 @@ 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,16 +25,6 @@ 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/css/themes.ts

@@ -16,6 +16,7 @@ const isExcludedDependency = (url: string) =>
     [
         url.includes('node_modules/tailwindcss'),
         url.includes('node_modules/@tailwindcss'),
+        url.includes('node_modules/@niibase/uniwind'),
         url.includes('node_modules/uniwind'),
     ].some(Boolean)
 

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 { serialize, serializeJSObject } from './utils'
+import { serializeJSObject } from './utils'
 
 type CompileVirtualConfig = {
     cssPath: string
@@ -59,9 +59,6 @@ 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('')
@@ -71,7 +68,6 @@ export const compileVirtual = async ({ css, cssPath, platform, themes, polyfills
         '({',
         `scopedVars: ({ ${serializedScopedVars} }),`,
         `vars: ({ ${currentColorVar} ${vars} }),`,
-        `varsWithMediaQueries: ([ ${varsWithMediaQueries} ]),`,
         `stylesheet: ({ ${stylesheet} }),`,
         '})',
     ].join('')

package/src/metro/metro-transformer.ts

@@ -1,9 +1,9 @@
 import fs from 'fs'
 import type { JsTransformerConfig, JsTransformOptions } from 'metro-transform-worker'
 import path from 'path'
+import { name } from '../../package.json'
 import { compileVirtual } from './compileVirtual'
 import { injectThemes } from './injectThemes'
-import { packageName } from './packageName'
 import { Platform, UniwindConfig } from './types'
 
 let worker: typeof import('metro-transform-worker')
@@ -41,7 +41,7 @@ export const transform = async (
 
         data = Buffer.from(
             [
-                `import { Uniwind } from '${packageName}';`,
+                `import { Uniwind } from '${name}';`,
                 `Uniwind.__reinit(() => ({}), ${injectedThemesCode});`,
             ].join(''),
             'utf-8',
@@ -74,7 +74,7 @@ export const transform = async (
         isWeb
             ? virtualCode
             : [
-                `import { Uniwind } from '${packageName}';`,
+                `import { Uniwind } from '${name}';`,
                 `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`,
             ].join(''),
         'utf-8',

package/src/metro/processor/processor.ts

@@ -12,7 +12,6 @@ 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)
@@ -22,6 +21,8 @@ export class ProcessorBuilder {
     Functions = new Functions(this)
     meta = {} as ProcessMetaValues
 
+    private varsWithMediaQueries = {} as Record<string, Array<any>>
+    private pendingVarReferences = new Map<string, Array<string>>()
     private declarationConfig = this.getDeclarationConfig()
 
     constructor(private readonly themes: Array<string>, readonly polyfills: Polyfills | undefined) {
@@ -33,11 +34,27 @@ export class ProcessorBuilder {
             filename: 'tailwind.css',
             code: Buffer.from(css),
             visitor: {
-                StyleSheet: styleSheet =>
+                StyleSheet: styleSheet => {
                     styleSheet.rules.forEach(rule => {
                         this.declarationConfig = this.getDeclarationConfig()
                         this.parseRuleRec(rule)
-                    }),
+                    })
+
+                    for (const [className, varNames] of this.pendingVarReferences) {
+                        for (const varName of varNames) {
+                            const varStyles = this.varsWithMediaQueries[varName]
+                            if (!varStyles || varStyles.length === 0) {
+                                continue
+                            }
+
+                            for (const varStyle of varStyles) {
+                                this.stylesheets[className]!.push(varStyle)
+                            }
+                        }
+
+                        this.pendingVarReferences.delete(className)
+                    }
+                },
             },
         })
     }
@@ -55,46 +72,14 @@ 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)
+        const { property, value } = this.parseDeclaration(declaration)
         const style = (() => {
             if (!isVar) {
                 return this.stylesheets[this.declarationConfig.className!]?.at(-1)
@@ -107,6 +92,12 @@ export class ProcessorBuilder {
                 return this.scopedVars[platformKey]
             }
 
+            if (this.hasMediaQuery(mq)) {
+                this.varsWithMediaQueries[property] ??= []
+                this.varsWithMediaQueries[property].push({})
+                return this.varsWithMediaQueries[property].at(-1)
+            }
+
             if (this.declarationConfig.theme === null) {
                 return this.vars
             }
@@ -117,38 +108,66 @@ export class ProcessorBuilder {
             return this.scopedVars[themeKey]
         })()
 
-        if (!isVar) {
+        if (!isVar || this.hasMediaQuery(mq)) {
             Object.assign(style, mq)
             style.importantProperties ??= []
             style.rtl = this.declarationConfig.rtl
             style.theme = mq.colorScheme ?? this.declarationConfig.theme
+            style.maxWidth = mq.maxWidth
+            style.minWidth = mq.minWidth
+            style.orientation = mq.orientation
             style.active = this.declarationConfig.active
             style.focus = this.declarationConfig.focus
             style.disabled = this.declarationConfig.disabled
             this.meta.className = this.declarationConfig.className
         }
 
-        const context = { isVar, style, important }
+        style[property] = value
+        if (!isVar && important) {
+            style.importantProperties.push(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)
+        // Track variable references for later processing (even if media queries don't exist yet)
+        const match = typeof value === 'string' ? value.match(/this\[`(.*?)`\]/) : null
 
-            return
+        if (match && !isVar) {
+            const className = this.declarationConfig.className
+            if (className === null) {
+                return
+            }
+
+            if (!this.pendingVarReferences.has(className)) {
+                this.pendingVarReferences.set(className, [])
+            }
+
+            const classVars = this.pendingVarReferences.get(className)!
+            const varName = match[1]!
+
+            if (!classVars.includes(varName)) {
+                classVars.push(varName)
+            }
         }
+    }
 
-        if (declaration.property === 'custom') {
-            const varName = declaration.value.name
-            const processedValue = this.CSS.processValue(declaration.value.value)
-            this.processDeclarationValue(mq, varName, processedValue, context)
+    private parseDeclaration(declaration: Declaration) {
+        if (declaration.property === 'unparsed') {
+            return {
+                property: declaration.value.propertyId.property,
+                value: this.CSS.processValue(declaration.value.value),
+            }
+        }
 
-            return
+        if (declaration.property === 'custom') {
+            return {
+                property: declaration.value.name,
+                value: this.CSS.processValue(declaration.value.value),
+            }
         }
 
-        const varName = declaration.property
-        const processedValue = this.CSS.processValue(declaration.value)
-        this.processDeclarationValue(mq, varName, processedValue, context)
+        return {
+            property: declaration.property,
+            value: this.CSS.processValue(declaration.value),
+        }
     }
 
     private parseRuleRec(rule: Rule<Declaration, MediaQuery>) {
@@ -255,15 +274,8 @@ export class ProcessorBuilder {
             const { mediaQueries } = rule.value.query
 
             this.declarationConfig.mediaQueries.push(...mediaQueries)
-            rule.value.rules.forEach(rule => {
-                this.parseRuleRec(rule)
-                this.declarationConfig = this.getDeclarationConfig()
-            })
-
-            this.declarationConfig.mediaQueries.splice(
-                this.declarationConfig.mediaQueries.length - mediaQueries.length,
-                mediaQueries.length,
-            )
+            rule.value.rules.forEach(rule => this.parseRuleRec(rule))
+            this.declarationConfig = this.getDeclarationConfig()
 
             return
         }

package/src/metro/resolvers.ts

@@ -1,6 +1,6 @@
 import { CustomResolutionContext, CustomResolver } from 'metro-resolver'
 import { basename, resolve, sep } from 'node:path'
-import { packageName } from './packageName'
+import { name as packageName } from '../../package.json'
 
 type ResolverConfig = {
     platform: string | null
@@ -11,8 +11,10 @@ type ResolverConfig = {
 
 const thisModuleDist = resolve(__dirname, '../../dist')
 const thisModuleSrc = resolve(__dirname, '../../src')
+const nodeModulesPath = resolve(__dirname, '../../../')
 
 const isFromThisModule = (filename: string) => filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc)
+const name = basename(nodeModulesPath) === 'node_modules' ? basename(resolve(__dirname, '../../')) : packageName
 
 const SUPPORTED_COMPONENTS = [
     'ActivityIndicator',
@@ -57,15 +59,15 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
     }
 
     if (moduleName === 'react-native') {
-        return resolver(context, `${packageName}/components`, platform)
+        return resolver(context, `${name}/components`, platform)
     }
 
     if (moduleName === 'react-native-gesture-handler') {
-        return resolver(context, `${packageName}/components/react-native-gesture-handler`, platform)
+        return resolver(context, `${name}/components/react-native-gesture-handler`, platform)
     }
 
     if (moduleName === 'react-native-svg') {
-        return resolver(context, `${packageName}/components/react-native-svg`, platform)
+        return resolver(context, `${name}/components/react-native-svg`, platform)
     }
 
     if (
@@ -75,7 +77,7 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
         const module = filename.split('.').at(0)
 
         if (module !== undefined && SUPPORTED_COMPONENTS.includes(module)) {
-            return resolver(context, `${packageName}/components/${module}`, platform)
+            return resolver(context, `${name}/components/${module}`, platform)
         }
     }
 
@@ -117,5 +119,5 @@ export const webResolver = (extraComponents: Record<string, string>) =>
         return resolution
     }
 
-    return resolver(context, `${packageName}/components/${module}`, platform)
+    return resolver(context, `${name}/components/${module}`, platform)
 }

package/src/metro/utils/common.ts

@@ -74,6 +74,8 @@ export const shouldBeSerialized = (value: string) => {
         /[*/+-]/.test(value),
         value.includes('"'),
         value.includes(' '),
+        value === '(',
+        value === ')',
     ].some(Boolean)
 }
 

package/src/utils/buildDtsFile.ts

@@ -1,15 +1,15 @@
 import fs from 'fs'
-import { packageName } from '../metro/packageName'
+import { name } from '../../package.json'
 
 export const buildDtsFile = (dtsPath: string, stringifiedThemes: string) => {
     const oldDtsContent = fs.existsSync(dtsPath)
         ? fs.readFileSync(dtsPath, 'utf-8')
         : ''
     const dtsContent = [
-        `// NOTE: This file is generated by ${packageName} and it should not be edited manually.`,
-        `/// <reference types="${packageName}/types" />`,
+        `// NOTE: This file is generated by ${name} and it should not be edited manually.`,
+        `/// <reference types="${name}/types" />`,
         '',
-        `declare module '${packageName}' {`,
+        `declare module '${name}' {`,
         `    export interface UniwindConfig {`,
         `        themes: readonly ${stringifiedThemes}`,
         `    }`,

package/src/vite/vite.ts

@@ -1,9 +1,9 @@
 import { normalizePath } from '@tailwindcss/node'
 import path from 'path'
 import type { Plugin } from 'vite'
+import { name as UNIWIND_PACKAGE_NAME } from '../../package.json'
 import { buildCSS } from '../css'
 import { processFunctions } from '../css/processFunctions'
-import { packageName as UNIWIND_PACKAGE_NAME } from '../metro/packageName'
 import { uniq } from '../metro/utils'
 import { buildDtsFile } from '../utils/buildDtsFile'
 import { stringifyThemes } from '../utils/stringifyThemes'

package/src/core/index.ts

@@ -1 +0,0 @@
-export * from './config'

package/src/metro/packageName.ts

@@ -1,7 +0,0 @@
-import { basename, resolve } from 'node:path'
-import { name } from '../../package.json'
-
-const nodeModulesPath = resolve(__dirname, '../../../')
-const packageName = basename(nodeModulesPath) === 'node_modules' ? basename(resolve(__dirname, '../../')) : name
-
-export { nodeModulesPath, packageName }