@niibase/uniwind 1.7.0 → 1.8.0

package/src/bundler/adapters/vite/vite.ts

@@ -1,6 +1,8 @@
 import { normalizePath } from '@tailwindcss/node'
+import { createRequire } from 'node:module'
 import path from 'path'
-import type { Plugin } from 'vite'
+import type { PluginContext } from 'rollup'
+import type { Plugin, UserConfig } from 'vite'
 import { name as UNIWIND_PACKAGE_NAME } from '../../../../package.json'
 
 import { UniwindBundlerConfig } from '@/bundler/config'
@@ -16,6 +18,96 @@ const styleSheetPath = path.resolve(
     '../module/components/web/createOrderedCSSStyleSheet.js',
 )
 const cssArtifactPath = path.resolve(dirname, '../../uniwind.css')
+const require = createRequire(import.meta.url)
+const viteVersion = require('vite/package.json').version as string
+
+const isVite8 = Number(viteVersion.split('.')[0]) >= 8
+
+type EsbuildResolveArgs = {
+    path: string
+    importer: string
+}
+
+type EsbuildBuild = {
+    onResolve: (
+        options: { filter: RegExp },
+        callback: (args: EsbuildResolveArgs) => { path: string } | undefined,
+    ) => void
+}
+
+const resolveOrderedCSSStyleSheet = (source: string, importer: string | undefined) => {
+    const normalizedSource = normalizePath(source)
+    const isTarget = source === './createOrderedCSSStyleSheet'
+        || normalizedSource.endsWith('react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js')
+
+    if (isTarget && importer !== undefined && normalizePath(importer).includes('react-native-web/dist/exports/StyleSheet')) {
+        return styleSheetPath
+    }
+}
+
+const vite8OptimizeDeps = {
+    exclude: [UNIWIND_PACKAGE_NAME, 'react-native'],
+    rolldownOptions: {
+        plugins: [{
+            name: 'uniwind-rolldown-plugin',
+            resolveId: resolveOrderedCSSStyleSheet,
+        }],
+    },
+}
+
+const vite7OptimizeDeps = {
+    exclude: [UNIWIND_PACKAGE_NAME, 'react-native'],
+    esbuildOptions: {
+        plugins: [{
+            name: 'uniwind-esbuild-plugin',
+            setup: (build: EsbuildBuild) => {
+                build.onResolve(
+                    { filter: /^\.\/createOrderedCSSStyleSheet$/ },
+                    args => {
+                        const resolved = resolveOrderedCSSStyleSheet(args.path, args.importer)
+
+                        if (resolved !== undefined) {
+                            return { path: resolved }
+                        }
+                    },
+                )
+            },
+        }],
+    },
+}
+
+const vite8Resolve = {
+    alias: [{
+        find: /^react-native$/,
+        replacement: componentPath,
+        customResolver: {
+            resolveId(this: PluginContext, _: string, importer: string | undefined) {
+                if (importer !== undefined && normalizePath(importer).includes(`${UNIWIND_PACKAGE_NAME}/dist`)) {
+                    return this.resolve('react-native-web', importer, { skipSelf: true })
+                }
+
+                return componentPath
+            },
+        },
+    }],
+}
+
+const vite7Resolve = {
+    alias: [{
+        find: /^react-native$/,
+        replacement: componentPath,
+        customResolver: {
+            resolveId(this: PluginContext, _: string, importer: string | undefined) {
+                // Check if import comes from uniwind
+                if (importer !== undefined && normalizePath(importer).includes(`${UNIWIND_PACKAGE_NAME}/dist`)) {
+                    return this.resolve('react-native-web')
+                }
+
+                return componentPath
+            },
+        },
+    }],
+}
 
 export const uniwind = (config: UniwindConfig): Plugin => {
     const bundlerConfig = UniwindBundlerConfig.fromViteConfig(config)
@@ -24,58 +116,19 @@ export const uniwind = (config: UniwindConfig): Plugin => {
         name: 'uniwind',
         enforce: 'pre',
         resolveId: (source, importer) => {
-            const normalizedSource = normalizePath(source)
-            const isTarget = source === './createOrderedCSSStyleSheet'
-                || normalizedSource.endsWith('react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet.js')
-
-            if (isTarget && importer !== undefined && normalizePath(importer).includes('react-native-web/dist/exports/StyleSheet')) {
-                return styleSheetPath
-            }
+            return resolveOrderedCSSStyleSheet(source, importer)
         },
-        config: () => ({
-            css: {
-                transformer: 'lightningcss',
-                lightningcss: {
-                    visitor: bundlerConfig.cssVisitor,
-                },
-            },
-            optimizeDeps: {
-                exclude: [UNIWIND_PACKAGE_NAME, 'react-native'],
-                esbuildOptions: {
-                    plugins: [{
-                        name: 'uniwind-esbuild-plugin',
-                        setup: build => {
-                            build.onResolve(
-                                { filter: /^\.\/createOrderedCSSStyleSheet$/ },
-                                args => {
-                                    if (normalizePath(args.importer).includes('react-native-web/dist/exports/StyleSheet')) {
-                                        return { path: styleSheetPath }
-                                    }
-                                },
-                            )
-                        },
-                    }],
-                },
-            },
-            resolve: {
-                alias: [
-                    {
-                        find: /^react-native$/,
-                        replacement: componentPath,
-                        customResolver: {
-                            resolveId(_, importer) {
-                                // Check if import comes from uniwind
-                                if (importer !== undefined && normalizePath(importer).includes(`${UNIWIND_PACKAGE_NAME}/dist`)) {
-                                    return this.resolve('react-native-web')
-                                }
-
-                                return componentPath
-                            },
-                        },
+        config: () =>
+            ({
+                css: {
+                    transformer: 'lightningcss',
+                    lightningcss: {
+                        visitor: bundlerConfig.cssVisitor,
                     },
-                ],
-            },
-        }),
+                },
+                optimizeDeps: isVite8 ? vite8OptimizeDeps : vite7OptimizeDeps,
+                resolve: isVite8 ? vite8Resolve : vite7Resolve,
+            }) as unknown as UserConfig,
         transform: (code, id) => {
             const normalizedId = normalizePath(id)
 

package/src/bundler/artifacts/css/themes.ts

@@ -2,6 +2,7 @@ import { Logger } from '@/bundler/logger'
 import { compile } from '@tailwindcss/node'
 import fs from 'fs'
 import { transform } from 'lightningcss'
+import type { ImportDependency } from 'lightningcss'
 import path from 'path'
 
 const readFileSafe = (filePath: string) => {
@@ -66,7 +67,11 @@ export const generateCSSForThemes = async (themes: Array<string>, input: string)
 
         const importUrls = new Set<string>()
         const importsCSS = dependencies
-            .filter(dependency => {
+            .filter((dependency): dependency is ImportDependency => {
+                if (dependency.type !== 'import') {
+                    return false
+                }
+
                 if (dependency.url.startsWith('.')) {
                     importUrls.add(path.resolve(path.dirname(cssPath), dependency.url))
 

package/src/bundler/cli/index.ts

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+import { UniwindBundlerConfig } from '@/bundler/config'
+import { Logger } from '@/bundler/logger'
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+const cssArtifactPath = path.resolve(dirname, '../../uniwind.css')
+
+type GenerateArtifactsArgs = {
+    cssEntryFile?: string
+    dtsFile?: string
+    extraThemes: Array<string>
+}
+
+const printHelp = () => {
+    console.log([
+        'Usage: uniwind generate-artifacts --css <file> [--theme <name>...] [--dts <file>]',
+        '',
+        'Options:',
+        '  --css <file>      CSS entry file path, e.g. ./global.css',
+        '  --theme <name>    Extra theme name. Can be passed multiple times',
+        '  --dts <file>      Generated TypeScript declarations path',
+        '  --help            Show help',
+    ].join('\n'))
+}
+
+const readValue = (args: Array<string>, index: number, flag: string) => {
+    const value = args[index + 1]
+
+    if (value === undefined || value.startsWith('--')) {
+        throw new Error(`Uniwind: ${flag} requires a value`)
+    }
+
+    return value
+}
+
+const parseGenerateArtifactsArgs = (args: Array<string>): GenerateArtifactsArgs => {
+    const parsed: GenerateArtifactsArgs = {
+        extraThemes: [],
+    }
+
+    for (let index = 0; index < args.length; index++) {
+        const arg = args[index]
+
+        switch (arg) {
+            case '--css':
+                parsed.cssEntryFile = readValue(args, index, arg)
+                index++
+                break
+            case '--theme':
+                parsed.extraThemes.push(readValue(args, index, arg))
+                index++
+                break
+            case '--dts':
+                parsed.dtsFile = readValue(args, index, arg)
+                index++
+                break
+            case '--help':
+                printHelp()
+                process.exit(0)
+            default:
+                throw new Error(`Uniwind: Unknown option ${arg}`)
+        }
+    }
+
+    return parsed
+}
+
+const generateArtifacts = async (args: Array<string>) => {
+    const parsed = parseGenerateArtifactsArgs(args)
+    const bundlerConfig = UniwindBundlerConfig.fromCliConfig({
+        cssEntryFile: parsed.cssEntryFile!,
+        dtsFile: parsed.dtsFile,
+        extraThemes: parsed.extraThemes,
+    })
+
+    await bundlerConfig.generateArtifacts(cssArtifactPath)
+    Logger.info('Artifacts generated')
+}
+
+const main = async () => {
+    const [command, ...args] = process.argv.slice(2)
+
+    if (command === '--help' || command === undefined) {
+        printHelp()
+
+        return
+    }
+
+    switch (command) {
+        case 'generate-artifacts':
+            await generateArtifacts(args)
+
+            break
+        default:
+            throw new Error(`Uniwind: Unknown command ${command}`)
+    }
+}
+
+main().catch(error => {
+    console.error(error instanceof Error ? error.message : error)
+    process.exit(1)
+})

package/src/bundler/config.ts

@@ -45,6 +45,16 @@ export class UniwindBundlerConfig {
         return new UniwindBundlerConfig(config, Platform.Web)
     }
 
+    static fromCliConfig(config: UniwindConfig) {
+        if (typeof config.cssEntryFile === 'undefined') {
+            throw new Error(
+                'Uniwind: You need to pass css entry file, e.g. uniwind generate-artifacts --css ./global.css. Run uniwind generate-artifacts --help for usage.',
+            )
+        }
+
+        return new UniwindBundlerConfig(config, Platform.Web)
+    }
+
     constructor(private readonly config: UniwindMetroConfig, readonly platform: Platform) {}
 
     get cssPath() {

package/src/bundler/css-compiler/compileNativeCSS.ts

@@ -12,7 +12,7 @@ export const compileNativeCSS = (bundlerConfig: UniwindBundlerConfig, tailwindCS
     )
     const vars = serializeJSObject(
         Processor.vars,
-        (key, value) => `get "${key}"() { return ${value} }`,
+        (key, value) => `"${key}": vars => ${value}`,
     )
     const keyframes = serializeJSObject(
         Processor.keyframes,
@@ -22,13 +22,13 @@ export const compileNativeCSS = (bundlerConfig: UniwindBundlerConfig, tailwindCS
         Object.entries(Processor.scopedVars)
             .map(([scopedVarsName, scopedVars]) => [
                 scopedVarsName,
-                serializeJSObject(scopedVars, (key, value) => `get "${key}"() { return ${value} }`),
+                serializeJSObject(scopedVars, (key, value) => `"${key}": vars => ${value}`),
             ]),
     )
     const serializedScopedVars = Object.entries(scopedVars)
         .map(([scopedVarsName, scopedVars]) => `"${scopedVarsName}": ({ ${scopedVars} }),`)
         .join('')
-    const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`
+    const currentColorVar = `currentColor: () => rt.colorScheme === 'dark' ? '#ffffff' : '#000000',`
 
     return [
         '({',

package/src/bundler/css-processor/addMetaToStylesTemplate.ts

@@ -6,9 +6,9 @@ import type { StyleSheetTemplate } from './types'
 import { toCamelCase } from './utils'
 
 const extractVarsFromString = (value: string) => {
-    const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index)
+    const varsIndexes = [...value.matchAll(/vars\[/g)].map(m => m.index)
 
-    return thisIndexes.map(index => {
+    return varsIndexes.map(index => {
         const afterIndex = value.slice(index + 5)
         const closingIndex = afterIndex.indexOf(']')
         const varName = afterIndex.slice(0, closingIndex)
@@ -76,7 +76,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
 
                 const entries = Object.entries(rest)
                     .flatMap(([property, value]) => Processor.RN.cssToRN(property, value))
-                    .map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`])
+                    .map(([property, value]) => [`"${property}"`, `function(vars) { return ${serialize(value)} }`])
 
                 if (platform) {
                     const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV

package/src/bundler/css-processor/color.ts

@@ -37,7 +37,7 @@ export class Color {
 
         try {
             if (color.type === 'currentcolor') {
-                return 'this["currentColor"]'
+                return 'vars["currentColor"]?.(vars)'
             }
 
             if (color.type === 'rgb' || color.type === 'srgb') {

package/src/bundler/css-processor/css.ts

@@ -273,7 +273,7 @@ export class CSS {
                     }
 
                     if (declarationValue.value === 'currentcolor') {
-                        return 'this["currentColor"]'
+                        return 'vars["currentColor"]?.(vars)'
                     }
 
                     return declarationValue.value
@@ -317,7 +317,7 @@ export class CSS {
                 case 'pair':
                     return declarationValue.inside.type
                 case 'currentcolor':
-                    return 'this["currentColor"]'
+                    return 'vars["currentColor"]?.(vars)'
                 case 'calc':
                     return this.Processor.Functions.processCalc(declarationValue.value)
                 case 'min':

package/src/bundler/css-processor/processor.ts

@@ -145,7 +145,7 @@ export class ProcessorBuilder {
         }
 
         // Track variable references for later processing (even if media queries don't exist yet)
-        const match = typeof value === 'string' ? value.match(/this\[`(.*?)`\]/) : null
+        const match = typeof value === 'string' ? value.match(/vars\["(.*?)"\]/) : null
 
         if (match && !isVar) {
             const className = this.declarationConfig.className
@@ -317,12 +317,12 @@ export class ProcessorBuilder {
                 })
 
                 if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
-                    this.declarationConfig.rtl = rtl
-                    this.declarationConfig.theme = theme
-                    this.declarationConfig.active = active
-                    this.declarationConfig.focus = focus
-                    this.declarationConfig.disabled = disabled
-                    this.declarationConfig.dataAttributes = dataAttributes
+                    this.declarationConfig.rtl ??= rtl
+                    this.declarationConfig.theme ??= theme
+                    this.declarationConfig.active ??= active
+                    this.declarationConfig.focus ??= focus
+                    this.declarationConfig.disabled ??= disabled
+                    this.declarationConfig.dataAttributes ??= dataAttributes
 
                     rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
                     rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))

package/src/bundler/css-processor/units.ts

@@ -23,7 +23,7 @@ export class Units {
                 case 'rem':
                     return length.value * this.Processor.vars['--uniwind-em']
                 case 'em':
-                    return `this[\`--uniwind-em\`] * ${length.value}`
+                    return `vars["--uniwind-em"]?.(vars) * ${length.value}`
                 default:
                     this.logger.warn(`Unsupported unit - ${length.unit}`)
 

package/src/bundler/css-processor/utils.ts

@@ -41,15 +41,12 @@ export const smartSplit = (str: string, separator = ' ' as string | RegExp) => {
 export const addMissingSpaces = (str: string) =>
     pipe(str)(
         x => x.trim(),
-        x => x.replace(/([^ {])this/g, '$1 this'),
         x => x.replace(/\](?=\d)/g, '] '),
         x => x.replace(/\](?=")/g, '] '),
-        x => x.replace(/\)(?=\S)/g, ') '),
+        x => x.replace(/\)(?=[^\s,])/g, ') '),
         x => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" '),
     )
 
-export const uniq = <T>(arr: Array<T>) => Array.from(new Set(arr))
-
 export const isValidJSValue = (jsValueString: string) => {
     try {
         new Function(`const test = ${jsValueString}`)
@@ -67,7 +64,7 @@ export const shouldBeSerialized = (value: string) => {
 
     return [
         isNumber(value),
-        value.startsWith('this['),
+        value.startsWith('vars['),
         value.startsWith('rt.'),
         /[*/+-]/.test(value),
         value.includes('"'),

package/src/bundler/css-processor/var.ts

@@ -5,7 +5,7 @@ export class Var {
     constructor(private readonly Processor: ProcessorBuilder) {}
 
     processVar(variable: Variable): string {
-        const value = `this[\`${variable.name.ident}\`]`
+        const value = `vars[${JSON.stringify(variable.name.ident)}]?.(vars)`
 
         if (!variable.fallback || variable.fallback.length === 0) {
             return value

package/src/bundler/css-visitor/rule-visitor.ts

@@ -118,7 +118,7 @@ export class RuleVisitor implements LightningRuleVisitors {
 
         this.processedClassNames.add(firstSelector.name)
 
-        return {
+        return this.removeNulls({
             type: 'scope',
             value: {
                 loc: styleRule.value.loc,
@@ -128,7 +128,7 @@ export class RuleVisitor implements LightningRuleVisitors {
                     .filter(theme => theme !== selectedVariant)
                     .map(theme => [{ type: 'class', name: theme }]),
             },
-        }
+        }) as ReturnedRule
     }
 
     // Fixes lightningcss serialization bug

package/src/bundler/logger.ts

@@ -16,6 +16,10 @@ export class Logger {
         console.log(`${blue}Uniwind ${meta}- ${message}${reset}`)
     }
 
+    static info(message: string) {
+        console.log(`${blue}[Uniwind] ${message}${reset}`)
+    }
+
     static error(message: string, meta = '') {
         console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`)
     }

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

@@ -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/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

@@ -28,7 +28,7 @@ export const UniwindRuntime = {
     lightDark: () => '',
     parseColor,
     platformSelect: (android: string, ios: string, other?: string) => {
-        // eslint-disable-next-line no-extra-boolean-casts
+        // 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) {