@niibase/uniwind 1.0.0

package/src/hooks/useResolveClassNames.native.ts

@@ -0,0 +1,29 @@
+import { useEffect, useReducer } from 'react'
+import { UniwindListener } from '../core/listener'
+import { UniwindStore } from '../core/native'
+import { ComponentState, RNStyle } from '../core/types'
+
+const emptyState = { styles: {} as RNStyle, dependencies: [] }
+
+export const useResolveClassNames = (className: string, state?: ComponentState) => {
+    const [uniwindState, recreate] = useReducer(
+        () => className !== '' ? UniwindStore.getStyles(className, state) : emptyState,
+        className !== '' ? UniwindStore.getStyles(className, state) : emptyState,
+    )
+
+    useEffect(() => {
+        if (className !== '') {
+            recreate()
+        }
+    }, [className, state?.isDisabled, state?.isPressed, state?.isFocused])
+
+    useEffect(() => {
+        if (uniwindState.dependencies.length > 0) {
+            const dispose = UniwindListener.subscribe(recreate, uniwindState.dependencies)
+
+            return dispose
+        }
+    }, [uniwindState.dependencies, className])
+
+    return uniwindState.styles
+}

package/src/hooks/useResolveClassNames.ts

@@ -0,0 +1,26 @@
+import { useEffect, useReducer } from 'react'
+import { RNStyle } from '../core/types'
+import { CSSListener, getWebStyles } from '../core/web'
+
+const emptyState = {} as RNStyle
+
+export const useResolveClassNames = (className: string) => {
+    const [styles, recreate] = useReducer(
+        () => className !== '' ? getWebStyles(className) : emptyState,
+        className !== '' ? getWebStyles(className) : emptyState,
+    )
+
+    useEffect(() => {
+        if (className === '') {
+            return
+        }
+
+        recreate()
+
+        const dispose = CSSListener.subscribeToClassName(className, recreate)
+
+        return dispose
+    }, [className])
+
+    return styles
+}

package/src/hooks/useUniwind.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+import { Uniwind } from '../core'
+import { UniwindListener } from '../core/listener'
+import { ThemeName } from '../core/types'
+import { StyleDependency } from '../types'
+
+export const useUniwind = () => {
+    const [theme, setTheme] = useState(Uniwind.currentTheme)
+    const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
+
+    useEffect(() => {
+        const dispose = UniwindListener.subscribe(() => {
+            setTheme(Uniwind.currentTheme)
+            setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes)
+        }, [StyleDependency.Theme, StyleDependency.AdaptiveThemes])
+
+        return () => {
+            dispose()
+        }
+    }, [])
+
+    return {
+        theme: theme as ThemeName,
+        hasAdaptiveThemes,
+    }
+}

package/src/hooks/useUniwindAccent.native.ts

@@ -0,0 +1,8 @@
+import { ComponentState } from '../core/types'
+import { useResolveClassNames } from './useResolveClassNames.native'
+
+export const useUniwindAccent = (className: string | undefined, state?: ComponentState) => {
+    const styles = useResolveClassNames(className ?? '', state)
+
+    return styles.accentColor
+}

package/src/hooks/useUniwindAccent.ts

@@ -0,0 +1,10 @@
+import { formatColor } from '../core/web/formatColor'
+import { useResolveClassNames } from './useResolveClassNames'
+
+export const useUniwindAccent = (className: string | undefined) => {
+    const styles = useResolveClassNames(className ?? '')
+
+    return styles.accentColor !== undefined
+        ? formatColor(styles.accentColor)
+        : undefined
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { Uniwind } from './core'
+export { withUniwind } from './hoc'
+export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'
+export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks'
+export type { UniwindConfig } from './types'

package/src/metro/addMetaToStylesTemplate.ts

@@ -0,0 +1,152 @@
+import { StyleDependency } from '../types'
+import { ProcessorBuilder } from './processor'
+import { Platform, StyleSheetTemplate } from './types'
+import { isDefined, serialize, toCamelCase } from './utils'
+
+const extractVarsFromString = (value: string) => {
+    const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index)
+
+    return thisIndexes.map(index => {
+        const afterIndex = value.slice(index + 5)
+        const closingIndex = afterIndex.indexOf(']')
+        const varName = afterIndex.slice(0, closingIndex)
+
+        return varName.replace(/[`"\\]/g, '')
+    })
+}
+
+const makeSafeForSerialization = (value: any) => {
+    if (value === null) {
+        return null
+    }
+
+    if (typeof value === 'string') {
+        return `"${value}"`
+    }
+
+    return value
+}
+
+export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlatform: Platform) => {
+    const stylesheetsEntries = Object.entries(Processor.stylesheets as StyleSheetTemplate)
+        .map(([className, stylesPerMediaQuery]) => {
+            const styles = stylesPerMediaQuery.map((style, index) => {
+                const {
+                    platform,
+                    rtl,
+                    theme,
+                    orientation,
+                    minWidth,
+                    maxWidth,
+                    colorScheme,
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    important,
+                    importantProperties,
+                    active,
+                    focus,
+                    disabled,
+                    ...rest
+                } = style
+
+                const entries = Object.entries(rest)
+                    .flatMap(([property, value]) => Processor.RN.cssToRN(property, value))
+                    .map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`])
+
+                if (platform && platform !== Platform.Native && platform !== currentPlatform) {
+                    return null
+                }
+
+                if (entries.length === 0) {
+                    return null
+                }
+
+                const dependencies: Array<StyleDependency> = []
+                const stringifiedEntries = JSON.stringify(entries)
+                const usedVars = extractVarsFromString(stringifiedEntries)
+                const isUsingThemedVar = usedVars.some(usedVarName => {
+                    return Object.values(Processor.scopedVars).some(scopedVars => {
+                        const scopedVarsNames = Object.keys(scopedVars)
+
+                        return scopedVarsNames.includes(usedVarName)
+                    })
+                })
+
+                if (usedVars.length > 0) {
+                    dependencies.push(StyleDependency.Variables)
+                }
+
+                if (theme !== null || isUsingThemedVar || stringifiedEntries.includes('rt.lightDark')) {
+                    dependencies.push(StyleDependency.Theme)
+                }
+
+                if (orientation !== null) {
+                    dependencies.push(StyleDependency.Orientation)
+                }
+
+                if (rtl !== null) {
+                    dependencies.push(StyleDependency.Rtl)
+                }
+
+                if (
+                    Number(minWidth) !== 0
+                    || Number(maxWidth) !== Number.MAX_VALUE
+                    || stringifiedEntries.includes('rt.screen')
+                ) {
+                    dependencies.push(StyleDependency.Dimensions)
+                }
+
+                if (stringifiedEntries.includes('rt.insets')) {
+                    dependencies.push(StyleDependency.Insets)
+                }
+
+                if (stringifiedEntries.includes('rt.fontScale')) {
+                    dependencies.push(StyleDependency.FontScale)
+                }
+
+                return {
+                    entries,
+                    minWidth,
+                    maxWidth,
+                    theme: makeSafeForSerialization(theme),
+                    orientation: makeSafeForSerialization(orientation),
+                    rtl,
+                    colorScheme: makeSafeForSerialization(colorScheme),
+                    native: platform !== null,
+                    dependencies: dependencies.length > 0 ? dependencies : null,
+                    index,
+                    className: makeSafeForSerialization(className),
+                    active,
+                    focus,
+                    disabled,
+                    importantProperties: importantProperties
+                        ?.map(property => property.startsWith('--') ? property : toCamelCase)
+                        .map(makeSafeForSerialization) ?? [],
+                    complexity: [
+                        minWidth !== 0,
+                        theme !== null,
+                        orientation !== null,
+                        rtl !== null,
+                        platform !== null,
+                        active !== null,
+                        focus !== null,
+                        disabled !== null,
+                    ].filter(Boolean).length,
+                }
+            })
+
+            const filteredStyles = styles.filter(isDefined)
+
+            if (filteredStyles.length === 0) {
+                return null
+            }
+
+            return [
+                className,
+                filteredStyles,
+            ] as const
+        })
+        .filter(isDefined)
+    const stylesheets = Object.fromEntries(stylesheetsEntries) as Record<string, any>
+
+    return stylesheets
+}

package/src/metro/compileVirtual.ts

@@ -0,0 +1,74 @@
+import { compile } from '@tailwindcss/node'
+import { Scanner } from '@tailwindcss/oxide'
+import path from 'path'
+import { addMetaToStylesTemplate } from './addMetaToStylesTemplate'
+import { Logger } from './logger'
+import { polyfillWeb } from './polyfillWeb'
+import { ProcessorBuilder } from './processor'
+import { Platform, Polyfills } from './types'
+import { serializeJSObject } from './utils'
+
+type CompileVirtualConfig = {
+    cssPath: string
+    css: string
+    platform: Platform
+    themes: Array<string>
+    polyfills: Polyfills | undefined
+    debug: boolean | undefined
+    candidates?: Array<string>
+}
+
+export const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug, candidates }: CompileVirtualConfig) => {
+    const compiler = await compile(css, {
+        base: path.dirname(cssPath),
+        onDependency: () => void 0,
+    })
+    const scanner = new Scanner({
+        sources: [
+            ...compiler.sources,
+            {
+                negated: false,
+                pattern: '**/*',
+                base: path.dirname(cssPath),
+            },
+        ],
+    })
+    const tailwindCSS = compiler.build(candidates ?? scanner.scan())
+
+    if (platform === Platform.Web) {
+        return polyfillWeb(tailwindCSS)
+    }
+
+    const Processor = new ProcessorBuilder(themes, polyfills)
+
+    Logger.debug = debug === true
+    Processor.transform(tailwindCSS)
+
+    const stylesheet = serializeJSObject(
+        addMetaToStylesTemplate(Processor, platform),
+        (key, value) => `"${key}": ${value}`,
+    )
+    const vars = serializeJSObject(
+        Processor.vars,
+        (key, value) => `get "${key}"() { return ${value} }`,
+    )
+    const scopedVars = Object.fromEntries(
+        Object.entries(Processor.scopedVars)
+            .map(([scopedVarsName, scopedVars]) => [
+                scopedVarsName,
+                serializeJSObject(scopedVars, (key, value) => `get "${key}"() { return ${value} }`),
+            ]),
+    )
+    const serializedScopedVars = Object.entries(scopedVars)
+        .map(([scopedVarsName, scopedVars]) => `"${scopedVarsName}": ({ ${scopedVars} }),`)
+        .join('')
+    const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`
+
+    return [
+        '({',
+        `scopedVars: ({ ${serializedScopedVars} }),`,
+        `vars: ({ ${currentColorVar} ${vars} }),`,
+        `stylesheet: ({ ${stylesheet} }),`,
+        '})',
+    ].join('')
+}

package/src/metro/index.d.ts

@@ -0,0 +1,15 @@
+import type { MetroConfig } from 'metro-config'
+
+type Polyfills = {
+    rem?: number
+}
+
+type UniwindConfig = {
+    cssEntryFile: string
+    extraThemes?: Array<string>
+    dtsFile?: string
+    polyfills?: Polyfills
+    debug?: boolean
+}
+
+export declare function withUniwindConfig(config: MetroConfig, options: UniwindConfig): MetroConfig

package/src/metro/index.ts

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

package/src/metro/injectThemes.ts

@@ -0,0 +1,23 @@
+import { buildCSS } from '../css'
+import { buildDtsFile } from '../utils/buildDtsFile'
+import { stringifyThemes } from '../utils/stringifyThemes'
+
+type InjectThemesConfig = {
+    themes: Array<string>
+    dtsPath?: string
+    input: string
+}
+
+export const injectThemes = async ({
+    themes,
+    dtsPath = 'uniwind-types.d.ts',
+    input,
+}: InjectThemesConfig) => {
+    const stringifiedThemes = stringifyThemes(themes)
+
+    buildDtsFile(dtsPath, stringifiedThemes)
+    await buildCSS(themes, input)
+
+    // js generation
+    return stringifiedThemes
+}

package/src/metro/logger.ts

@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+
+const red = '\x1b[91m'
+const yellow = '\x1b[33m'
+const blue = '\x1b[36m'
+const reset = '\x1b[0m'
+
+export class Logger {
+    static debug = false
+
+    constructor(private readonly name: string) {}
+
+    static log(message: string, meta = '') {
+        if (!Logger.debug) {
+            return
+        }
+
+        console.log(`${blue}Uniwind ${meta}- ${message}${reset}`)
+    }
+
+    static error(message: string, meta = '') {
+        console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`)
+    }
+
+    static warn(message: string, meta = '') {
+        if (!Logger.debug) {
+            return
+        }
+
+        console.log(`${yellow}Uniwind Warning ${meta}- ${message}${reset}`)
+    }
+
+    log(message: string) {
+        Logger.log(message, `[${this.name} Processor] `)
+    }
+
+    error(message: string) {
+        Logger.error(message, `[${this.name} Processor] `)
+    }
+
+    warn(message: string) {
+        Logger.warn(message, `[${this.name} Processor] `)
+    }
+}

package/src/metro/metro-css-patches.ts

@@ -0,0 +1,57 @@
+import type { Graph, Result as GraphResult } from '@expo/metro/metro/DeltaBundler/Graph'
+import FileStoreBase from 'metro-cache/private/stores/FileStore'
+import type { Options as GraphOptions } from 'metro/private/DeltaBundler/types'
+import os from 'os'
+import path from 'path'
+
+class FileStore<T> extends FileStoreBase<T> {
+    async set(key: Buffer, value: any): Promise<void> {
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (value?.output?.[0]?.data?.css?.skipCache) {
+            return
+        }
+
+        return super.set(key, value)
+    }
+}
+
+export const cacheStore = new FileStore<any>({
+    root: path.join(os.tmpdir(), 'metro-cache'),
+})
+
+interface TraverseDependencies {
+    (paths: readonly string[], options: GraphOptions<any>): Promise<GraphResult<any>>
+    __patched?: boolean
+}
+
+export const patchMetroGraphToSupportUncachedModules = () => {
+    const { Graph } = require('metro/private/DeltaBundler/Graph') as typeof import('metro/private/DeltaBundler/Graph')
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const original_traverseDependencies = Graph.prototype.traverseDependencies as unknown as TraverseDependencies
+
+    if (original_traverseDependencies.__patched) {
+        return
+    }
+
+    original_traverseDependencies.__patched = true
+
+    function traverseDependencies(this: Graph, paths: Array<string>, options: GraphOptions<any>) {
+        this.dependencies.forEach(dependency => {
+            if (
+                dependency.output.find(file => file.data.css?.skipCache === true)
+                && !paths.includes(dependency.path)
+            ) {
+                // @ts-expect-error Hidden property
+                dependency.unstable_transformResultKey = `${dependency.unstable_transformResultKey}.`
+                paths.push(dependency.path)
+            }
+        })
+
+        return original_traverseDependencies.call(this, paths, options)
+    }
+
+    // @ts-expect-error patch Graph traverseDependencies method
+    Graph.prototype.traverseDependencies = traverseDependencies
+    traverseDependencies.__patched = true
+}

package/src/metro/metro-transformer.ts

@@ -0,0 +1,99 @@
+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 { Platform, UniwindConfig } from './types'
+
+let worker: typeof import('metro-transform-worker')
+
+try {
+    try {
+        const { unstable_transformerPath } = require('@expo/metro-config') as typeof import('@expo/metro-config')
+
+        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: UniwindConfig
+    },
+    projectRoot: string,
+    filePath: string,
+    data: Buffer,
+    options: JsTransformOptions,
+) => {
+    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(process.cwd(), filePath)
+
+    if (filePath.endsWith('/components/web/metro-injected.js')) {
+        const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
+        const injectedThemesCode = await injectThemes({
+            input: cssPath,
+            themes: config.uniwind.themes,
+            dtsPath: config.uniwind.dtsFile,
+        })
+
+        data = Buffer.from(
+            [
+                `import { Uniwind } from '${name}';`,
+                `Uniwind.__reinit(() => ({}), ${injectedThemesCode});`,
+            ].join(''),
+            'utf-8',
+        )
+    }
+
+    if (!isCss) {
+        return worker.transform(config, projectRoot, filePath, data, options)
+    }
+
+    const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
+    const injectedThemesCode = await injectThemes({
+        input: cssPath,
+        themes: config.uniwind.themes,
+        dtsPath: config.uniwind.dtsFile,
+    })
+    const css = fs.readFileSync(filePath, 'utf-8')
+    const platform = options.platform as Platform
+    const virtualCode = await compileVirtual({
+        css,
+        platform,
+        themes: config.uniwind.themes,
+        polyfills: config.uniwind.polyfills,
+        cssPath,
+        debug: config.uniwind.debug,
+    })
+    const isWeb = platform === Platform.Web
+
+    data = Buffer.from(
+        isWeb
+            ? virtualCode
+            : [
+                `import { Uniwind } from '${name}';`,
+                `Uniwind.__reinit(rt => ${virtualCode}, ${injectedThemesCode});`,
+            ].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/metro/polyfillWeb.ts

@@ -0,0 +1,14 @@
+import { transform } from 'lightningcss'
+import { processFunctions } from '../css/processFunctions'
+
+export const polyfillWeb = (css: string) => {
+    const result = transform({
+        code: Buffer.from(css),
+        filename: 'uniwind.css',
+        visitor: {
+            Function: processFunctions,
+        },
+    })
+
+    return result.code.toString()
+}

package/src/metro/processor/color.ts

@@ -0,0 +1,76 @@
+import { Color as ColorType, converter, formatHex, formatHex8, parse } from 'culori'
+import { CssColor, UnresolvedColor } from 'lightningcss'
+import { Logger } from '../logger'
+import { pipe } from '../utils'
+import type { ProcessorBuilder } from './processor'
+
+export class Color {
+    private toRgb = converter('rgb')
+
+    private readonly black = '#000000'
+
+    private readonly logger = new Logger('Color')
+
+    constructor(private readonly Processor: ProcessorBuilder) {}
+
+    processColor(color: CssColor | UnresolvedColor) {
+        if (typeof color === 'string') {
+            const parsed = parse(color)
+
+            if (parsed === undefined) {
+                this.logger.error(`Failed to convert color ${color}`)
+
+                return this.black
+            }
+
+            return this.format(parsed)
+        }
+
+        try {
+            if (color.type === 'currentcolor') {
+                return 'this["currentColor"]'
+            }
+
+            if (color.type === 'rgb' || color.type === 'srgb') {
+                const alpha = typeof color.alpha === 'number'
+                    ? color.alpha
+                    : pipe(color.alpha)(
+                        x => this.Processor.CSS.processValue(x),
+                        Number,
+                        x => isNaN(x) ? 1 : x,
+                    )
+
+                return this.format({
+                    r: color.r / 255,
+                    g: color.g / 255,
+                    b: color.b / 255,
+                    alpha,
+                    mode: 'rgb',
+                })
+            }
+
+            const result = this.toRgb({
+                mode: color.type,
+                ...color,
+            } as ColorType)
+
+            return this.format(result)
+        } catch {
+            this.logger.error(`Failed to convert color ${JSON.stringify(color)}`)
+
+            return this.black
+        }
+    }
+
+    isColor(value: unknown): value is CssColor {
+        return typeof value === 'string' && parse(value) !== undefined
+    }
+
+    private format(color: ColorType) {
+        if (color.alpha === 1 || color.alpha === undefined) {
+            return formatHex(color)
+        }
+
+        return formatHex8(color)
+    }
+}