@niibase/uniwind 1.6.4 → 1.8.0

package/src/bundler/adapters/metro/transformer.ts

@@ -0,0 +1,85 @@
+import { UniwindBundlerConfig } from '@/bundler/config'
+import { compileCSS } from '@/bundler/css-compiler'
+import type { UniwindMetroConfig } from '@/bundler/types'
+import { Platform } from '@/common/consts'
+import type * as ExpoMetroConfig from '@expo/metro-config'
+import type * as MetroTransformWorker from 'metro-transform-worker'
+import type { JsTransformerConfig, JsTransformOptions } from 'metro-transform-worker'
+import path from 'path'
+import { name as UNIWIND_PACKAGE_NAME } from '../../../../package.json'
+
+const cssArtifactPath = path.resolve(__dirname, '../../uniwind.css')
+
+let worker: typeof MetroTransformWorker
+
+try {
+    try {
+        const { unstable_transformerPath } = require('@expo/metro-config') as typeof ExpoMetroConfig
+
+        worker = require(unstable_transformerPath)
+    } catch {
+        worker = require('@expo/metro-config/build/transform-worker/transform-worker.js')
+    }
+} catch {
+    worker = require('metro-transform-worker')
+}
+
+export const transform = async (
+    config: JsTransformerConfig & {
+        uniwind: UniwindMetroConfig
+    },
+    projectRoot: string,
+    filePath: string,
+    data: Buffer,
+    options: JsTransformOptions,
+) => {
+    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(projectRoot, filePath)
+
+    if (filePath.endsWith('/components/web/metro-injected.js')) {
+        const bundlerConfig = UniwindBundlerConfig.fromMetroConfig(config.uniwind, Platform.Web)
+
+        data = Buffer.from(
+            [
+                `import { Uniwind } from '${UNIWIND_PACKAGE_NAME}';`,
+                `Uniwind.__reinit(() => ({}), ${bundlerConfig.stringifiedThemes});`,
+            ].join(''),
+            'utf-8',
+        )
+    }
+
+    if (!isCss) {
+        return worker.transform(config, projectRoot, filePath, data, options)
+    }
+
+    const bundlerConfig = UniwindBundlerConfig.fromMetroConfig(config.uniwind, options.platform)
+    await bundlerConfig.generateArtifacts(cssArtifactPath)
+    const virtualCode = await compileCSS(bundlerConfig)
+    const isWeb = bundlerConfig.platform === Platform.Web
+
+    data = Buffer.from(
+        isWeb
+            ? virtualCode
+            : [
+                `const { Uniwind } = require('${UNIWIND_PACKAGE_NAME}');`,
+                `Uniwind.__reinit(rt => ${virtualCode}, ${bundlerConfig.stringifiedThemes});`,
+            ].join(''),
+        'utf-8',
+    )
+
+    const transform: any = await worker.transform(
+        config,
+        projectRoot,
+        `${filePath}${isWeb ? '' : '.js'}`,
+        data,
+        options,
+    )
+
+    transform.output[0].data.css ??= {}
+    transform.output[0].data.css.skipCache = true
+
+    if (!isWeb) {
+        transform.output[0].data.css.code = ''
+    }
+
+    return transform
+}

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

@@ -0,0 +1,148 @@
+import { normalizePath } from '@tailwindcss/node'
+import { createRequire } from 'node:module'
+import path from 'path'
+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'
+import type { UniwindConfig } from '@/bundler/types'
+
+const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
+const componentPath = path.resolve(
+    dirname,
+    '../module/components/web/index.js',
+)
+const styleSheetPath = path.resolve(
+    dirname,
+    '../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)
+
+    return {
+        name: 'uniwind',
+        enforce: 'pre',
+        resolveId: (source, importer) => {
+            return resolveOrderedCSSStyleSheet(source, importer)
+        },
+        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)
+
+            if (normalizedId.includes(`${UNIWIND_PACKAGE_NAME}/dist`) && normalizedId.includes('config/config.js')) {
+                return {
+                    code: `${code}\n;Uniwind.__reinit(() => ({}), ${bundlerConfig.stringifiedThemes})`,
+                }
+            }
+        },
+        buildStart: async () => {
+            await bundlerConfig.generateArtifacts(cssArtifactPath)
+        },
+        generateBundle: async () => {
+            await bundlerConfig.generateArtifacts(cssArtifactPath)
+        },
+    }
+}

package/src/{css → bundler/artifacts/css}/extraUtilities.ts

@@ -1,4 +1,4 @@
-import { RNStyle } from '../core/types'
+import type { RNStyle } from '../../../core/types'
 
 const toKebabCase = (str: string) => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
 

package/src/{css → bundler/artifacts/css}/index.ts

@@ -1,16 +1,12 @@
 import fs from 'fs'
-import path from 'path'
 import { EXTRA_UTILITIES_CSS } from './extraUtilities'
 import { INSETS_CSS } from './insets'
 import { OVERWRITE_CSS } from './overwrite'
 import { generateCSSForThemes } from './themes'
 import { VARIANTS_CSS } from './variants'
 
-const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
-
-export const buildCSS = async (themes: Array<string>, input: string) => {
+export const buildCSS = async (themes: Array<string>, input: string, cssFilePath: string) => {
     const themesCSS = await generateCSSForThemes(themes, input)
-    const cssFilePath = path.join(dirname, '../../uniwind.css')
     const oldCSSFile = fs.existsSync(cssFilePath)
         ? fs.readFileSync(cssFilePath, 'utf-8')
         : ''

package/src/{css → bundler/artifacts/css}/themes.ts

@@ -1,8 +1,9 @@
+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'
-import { Logger } from '../metro/logger'
 
 const readFileSafe = (filePath: string) => {
     try {
@@ -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/{utils/buildDtsFile.ts → bundler/artifacts/dts.ts}

@@ -1,15 +1,14 @@
 import fs from 'fs'
-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 ${name} and it should not be edited manually.`,
-        `/// <reference types="${name}/types" />`,
+        `// NOTE: This file is generated by uniwind and it should not be edited manually.`,
+        `/// <reference types="uniwind/types" />`,
         '',
-        `declare module '${name}' {`,
+        `declare module 'uniwind' {`,
         `    export interface UniwindConfig {`,
         `        themes: readonly ${stringifiedThemes}`,
         `    }`,

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

@@ -0,0 +1,94 @@
+import { buildCSS } from '@/bundler/artifacts/css'
+import { buildDtsFile } from '@/bundler/artifacts/dts'
+import { UniwindCSSVisitor } from '@/bundler/css-visitor'
+import type { UniwindConfig, UniwindMetroConfig } from '@/bundler/types'
+import { Platform } from '@/common/consts'
+import { isDefined } from '@/common/utils'
+import path from 'path'
+
+export class UniwindBundlerConfig {
+    static fromMetroConfig(config: UniwindMetroConfig, platform?: string | null) {
+        const getPlatform = () => {
+            if (!isDefined(platform)) {
+                return Platform.Native
+            }
+
+            if (!config.isTV) {
+                return platform as Platform
+            }
+
+            if (platform === Platform.Android) {
+                return Platform.AndroidTV
+            }
+
+            if (platform === Platform.iOS) {
+                return Platform.AppleTV
+            }
+
+            throw new Error(`Platform ${platform} not supported`)
+        }
+
+        if (typeof config === 'undefined') {
+            throw new Error('Uniwind: You need to pass second parameter to withUniwindConfig')
+        }
+
+        if (typeof config.cssEntryFile === 'undefined') {
+            throw new Error(
+                'Uniwind: You need to pass css css entry file to withUniwindConfig, e.g. withUniwindConfig(config, { cssEntryFile: "./global.css" })',
+            )
+        }
+
+        return new UniwindBundlerConfig(config, getPlatform())
+    }
+
+    static fromViteConfig(config: UniwindConfig) {
+        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() {
+        return path.join(process.cwd(), this.config.cssEntryFile)
+    }
+
+    get themes() {
+        return Array.from(
+            new Set([
+                'light',
+                'dark',
+                ...this.config.extraThemes ?? [],
+            ]),
+        )
+    }
+
+    get cssVisitor() {
+        return new UniwindCSSVisitor(this)
+    }
+
+    get polyfills() {
+        return this.config.polyfills
+    }
+
+    get stringifiedThemes() {
+        return `[${this.themes.map((theme) => `'${theme}'`).join(', ')}]`
+    }
+
+    toMetroConfig() {
+        return this.config
+    }
+
+    async generateArtifacts(cssArtifactPath: string) {
+        await buildCSS(this.themes, this.config.cssEntryFile, cssArtifactPath)
+        buildDtsFile(this.config.dtsFile ?? 'uniwind-types.d.ts', this.stringifiedThemes)
+    }
+}

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

@@ -0,0 +1,15 @@
+import { Platform } from '@/common/consts'
+import type { UniwindBundlerConfig } from '../config'
+import { compileNativeCSS } from './compileNativeCSS'
+import { compileTailwind } from './compileTailwind'
+import { compileWebCSS } from './compileWebCSS'
+
+export const compileCSS = async (bundlerConfig: UniwindBundlerConfig) => {
+    const tailwindCSS = await compileTailwind(bundlerConfig)
+
+    if (bundlerConfig.platform === Platform.Web) {
+        return compileWebCSS(bundlerConfig, tailwindCSS)
+    }
+
+    return compileNativeCSS(bundlerConfig, tailwindCSS)
+}

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

@@ -0,0 +1,41 @@
+import type { UniwindBundlerConfig } from '../config'
+import { addMetaToStylesTemplate, ProcessorBuilder, serializeJSObject } from '../css-processor'
+
+export const compileNativeCSS = (bundlerConfig: UniwindBundlerConfig, tailwindCSS: string) => {
+    const Processor = new ProcessorBuilder(bundlerConfig)
+
+    Processor.transform(tailwindCSS)
+
+    const stylesheet = serializeJSObject(
+        addMetaToStylesTemplate(Processor, bundlerConfig.platform),
+        (key, value) => `"${key}": ${value}`,
+    )
+    const vars = serializeJSObject(
+        Processor.vars,
+        (key, value) => `"${key}": vars => ${value}`,
+    )
+    const keyframes = serializeJSObject(
+        Processor.keyframes,
+        (key, value) => `get "${key}"() { return ${value} }`,
+    )
+    const scopedVars = Object.fromEntries(
+        Object.entries(Processor.scopedVars)
+            .map(([scopedVarsName, scopedVars]) => [
+                scopedVarsName,
+                serializeJSObject(scopedVars, (key, value) => `"${key}": vars => ${value}`),
+            ]),
+    )
+    const serializedScopedVars = Object.entries(scopedVars)
+        .map(([scopedVarsName, scopedVars]) => `"${scopedVarsName}": ({ ${scopedVars} }),`)
+        .join('')
+    const currentColorVar = `currentColor: () => rt.colorScheme === 'dark' ? '#ffffff' : '#000000',`
+
+    return [
+        '({',
+        `scopedVars: ({ ${serializedScopedVars} }),`,
+        `vars: ({ ${currentColorVar} ${vars} }),`,
+        `stylesheet: ({ ${stylesheet} }),`,
+        `keyframes: ({ ${keyframes} }),`,
+        '})',
+    ].join('')
+}

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

@@ -0,0 +1,25 @@
+import { compile } from '@tailwindcss/node'
+import { Scanner } from '@tailwindcss/oxide'
+import fs from 'fs'
+import path from 'path'
+import type { UniwindBundlerConfig } from '../config'
+
+export const compileTailwind = async (bundlerConfig: UniwindBundlerConfig) => {
+    const css = await fs.promises.readFile(bundlerConfig.cssPath, 'utf-8')
+    const compiler = await compile(css, {
+        base: path.dirname(bundlerConfig.cssPath),
+        onDependency: () => void 0,
+    })
+    const scanner = new Scanner({
+        sources: [
+            ...compiler.sources,
+            {
+                negated: false,
+                pattern: '**/*',
+                base: path.dirname(bundlerConfig.cssPath),
+            },
+        ],
+    })
+
+    return compiler.build(scanner.scan())
+}

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

@@ -0,0 +1,10 @@
+import { transform } from 'lightningcss'
+import type { UniwindBundlerConfig } from '../config'
+
+export const compileWebCSS = (bundlerConfig: UniwindBundlerConfig, tailwindCSS: string) => {
+    return transform({
+        code: Buffer.from(tailwindCSS),
+        filename: 'uniwind.css',
+        visitor: bundlerConfig.cssVisitor,
+    }).code.toString()
+}

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

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