@niibase/uniwind 1.0.0

package/src/css/insets.ts

@@ -0,0 +1,73 @@
+const types = ['m', 'p'] as const
+const sides = ['', 'x', 'y', 't', 'b', 'l', 'r'] as const
+const spacing = '--spacing(--value(integer))'
+const length = '--value([length])'
+
+type Side = (typeof sides)[number]
+
+export const generateCSSForInsets = () => {
+    let css = `@utility h-screen-safe {
+    height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+}\n`
+
+    const getInsetsForSide = (side: Side) => {
+        switch (side) {
+            case 't':
+                return ['top']
+            case 'b':
+                return ['bottom']
+            case 'l':
+                return ['left']
+            case 'r':
+                return ['right']
+            case 'x':
+                return ['left', 'right']
+            case 'y':
+                return ['top', 'bottom']
+            default:
+                return ['top', 'bottom', 'left', 'right']
+        }
+    }
+
+    types.forEach(type => {
+        sides.forEach(side => {
+            const styleName = type === 'm' ? 'margin' : 'padding'
+            const insets = getInsetsForSide(side)
+            const styles = insets.map(inset => `${styleName}-${inset}: env(safe-area-inset-${inset});`)
+            const safeStyles = styles.flatMap(style => {
+                const styleWithoutSemicolon = style.replace(';', '')
+
+                return [
+                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`),
+                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`),
+                ]
+            })
+            const safeOffsetStyles = styles.flatMap(style => {
+                const styleWithoutSemicolon = style.replace(';', '')
+
+                return [
+                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`),
+                    styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`),
+                ]
+            })
+
+            css += `
+                @utility ${type}${side}-safe {
+                    ${styles.join('\n    ')}
+                }
+                
+                @utility ${type}${side}-safe-or-* {
+                    ${safeStyles.join('\n    ')}
+                }
+                
+                @utility ${type}${side}-safe-offset-* {
+                    ${safeOffsetStyles.join('\n    ')}
+                }
+            `
+        })
+    })
+
+    // Remove all 8 spaces groups
+    // eslint-disable-next-line prefer-template
+    return css.replaceAll('        ', '').trim() + '\n'
+}

package/src/css/processFunctions.ts

@@ -0,0 +1,39 @@
+import { CustomAtRules, TokenOrValue, Visitor } from 'lightningcss'
+
+const ONE_PX = {
+    type: 'token',
+    value: { type: 'dimension', unit: 'px', value: 1 },
+} satisfies TokenOrValue
+
+export const processFunctions: Visitor<CustomAtRules>['Function'] = {
+    pixelRatio: (fn) => {
+        return {
+            type: 'function',
+            value: {
+                name: 'calc',
+                arguments: [
+                    fn.arguments.at(0) ?? ONE_PX,
+                    { type: 'token', value: { type: 'delim', value: '*' } },
+                    ONE_PX,
+                ],
+            },
+        } satisfies TokenOrValue
+    },
+    fontScale: (fn) => {
+        return {
+            type: 'function',
+            value: {
+                name: 'calc',
+                arguments: [
+                    fn.arguments.at(0) ?? ONE_PX,
+                    { type: 'token', value: { type: 'delim', value: '*' } },
+                    {
+                        type: 'token',
+                        value: { type: 'dimension', value: 1, unit: 'rem' },
+                    },
+                ],
+            },
+        } satisfies TokenOrValue
+    },
+    hairlineWidth: () => ONE_PX,
+}

package/src/css/themes.ts

@@ -0,0 +1,130 @@
+import { compile } from '@tailwindcss/node'
+import fs from 'fs'
+import { transform } from 'lightningcss'
+import path from 'path'
+import { Logger } from '../metro/logger'
+
+const readFileSafe = (filePath: string) => {
+    try {
+        return fs.readFileSync(filePath, 'utf-8')
+    } catch {
+        return null
+    }
+}
+
+const isExcludedDependency = (url: string) =>
+    [
+        url.includes('node_modules/tailwindcss'),
+        url.includes('node_modules/@tailwindcss'),
+        url.includes('node_modules/uniwind'),
+    ].some(Boolean)
+
+export const generateCSSForThemes = async (themes: Array<string>, input: string) => {
+    // css generation
+    const themesVariables = Object.fromEntries(themes.map(theme => [theme, new Set<string>()]))
+
+    const findVariantsRec = async (cssPath: string) => {
+        const css = readFileSafe(cssPath)
+
+        if (css === null) {
+            return
+        }
+
+        const { dependencies } = transform({
+            code: Buffer.from(css),
+            filename: 'uniwind.css',
+            analyzeDependencies: true,
+            visitor: {
+                Rule: rule => {
+                    if (rule.type === 'unknown' && rule.value.name === 'variant') {
+                        const [firstPrelude] = rule.value.prelude
+
+                        if (
+                            firstPrelude?.type !== 'token'
+                            || firstPrelude.value.type !== 'ident'
+                            || !themes.includes(firstPrelude.value.value)
+                        ) {
+                            return
+                        }
+
+                        const theme = firstPrelude.value.value
+
+                        rule.value.block?.forEach(block => {
+                            if (block.type === 'dashed-ident') {
+                                themesVariables[theme]?.add(block.value)
+                            }
+                        })
+                    }
+                },
+            },
+        })
+
+        if (!Array.isArray(dependencies)) {
+            return
+        }
+
+        const importUrls = new Set<string>()
+        const importsCSS = dependencies
+            .filter(dependency => {
+                if (dependency.url.startsWith('.')) {
+                    importUrls.add(path.resolve(path.dirname(cssPath), dependency.url))
+
+                    return false
+                }
+
+                return !isExcludedDependency(dependency.url)
+            })
+            .map(dependency => `@import "${dependency.url}";`).join('\n')
+
+        await compile(importsCSS, {
+            base: path.resolve(path.dirname(cssPath)),
+            onDependency: dependency => {
+                if (isExcludedDependency(dependency)) {
+                    return
+                }
+
+                importUrls.add(dependency)
+            },
+        })
+
+        for (const filePath of importUrls) {
+            await findVariantsRec(filePath)
+        }
+    }
+
+    await findVariantsRec(input)
+
+    // Check if all themes have the same variables
+    let hasErrors = false as boolean
+    const hasVariables = Object.values(themesVariables).some(variables => variables.size > 0)
+
+    Object.values(themesVariables).forEach(variables => {
+        Object.entries(themesVariables).forEach(([checkedTheme, checkedVariables]) => {
+            variables.forEach(variable => {
+                if (!checkedVariables.has(variable)) {
+                    Logger.error(`Theme ${checkedTheme} is missing variable ${variable}`)
+                    hasErrors = true
+                }
+            })
+        })
+    })
+
+    if (hasErrors) {
+        Logger.error('All themes must have the same variables')
+    }
+
+    const variablesCSS = hasVariables
+        ? [
+            '',
+            '@theme {',
+            ...Array.from(Object.values(themesVariables).at(0) ?? []).map(variable => `    ${variable}: unset;`),
+            '}',
+        ]
+        : []
+    const uniwindCSS = [
+        ...themes.map(theme => `@custom-variant ${theme} (&:where(.${theme}, .${theme} *));`),
+        ...variablesCSS,
+    ].join('\n')
+
+    return uniwindCSS
+}

package/src/css/variants.ts

@@ -0,0 +1,11 @@
+const variants = ['ios', 'android', 'web', 'native']
+
+export const generateCSSForVariants = () => {
+    let css = ''
+
+    variants.forEach(variant => {
+        css += `@custom-variant ${variant} (${variant === 'web' ? 'html &' : `@media ${variant}`});\n`
+    })
+
+    return css
+}

package/src/hoc/index.ts

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

package/src/hoc/types.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, ComponentPropsWithRef } from 'react'
+import { RNStyle } from '../core/types'
+
+export type AnyObject = Record<PropertyKey, any>
+
+type StyleToClass<K extends PropertyKey> = K extends 'style' ? 'className'
+    : K extends `${infer StyleProp}Style` ? `${StyleProp}ClassName`
+    : never
+
+type ColorPropToClass<K extends PropertyKey> = K extends 'color' ? 'colorClassName'
+    : K extends `${string}Color` | `${string}color${string}` ? `${K}ClassName`
+    : never
+
+export type ApplyUniwind<TProps extends AnyObject> =
+    & {
+        [K in keyof TProps as StyleToClass<K>]?: string
+    }
+    & {
+        [K in keyof TProps as ColorPropToClass<K>]?: string
+    }
+    & TProps
+
+export type ApplyUniwindOptions<TProps extends AnyObject, TOptions extends { [K in keyof TProps]?: OptionMapping }> =
+    & {
+        // @ts-expect-error TS isn't smart enough to infer this
+        [K in keyof TOptions as TOptions[K] extends undefined ? never : TOptions[K]['fromClassName']]?: string
+    }
+    & TProps
+
+export type Component<T extends AnyObject = AnyObject> = React.JSXElementConstructor<T>
+
+export type OptionMapping = {
+    fromClassName: string
+    styleProperty?: keyof RNStyle
+}
+
+export type WithUniwind = {
+    // Auto mapping
+    <TComponent extends Component<any>>(Component: TComponent): (props: ApplyUniwind<ComponentPropsWithRef<TComponent>> & {}) => React.ReactNode
+    // Manual mapping
+    <TComponent extends Component<any>, const TOptions extends { [K in keyof ComponentProps<TComponent>]?: OptionMapping }>(
+        Component: TComponent,
+        options: TOptions,
+    ): (props: ApplyUniwindOptions<ComponentPropsWithRef<TComponent>, TOptions> & {}) => React.ReactNode
+}

package/src/hoc/withUniwind.native.tsx

@@ -0,0 +1,118 @@
+import { ComponentProps, useEffect, useReducer } from 'react'
+import { UniwindListener } from '../core/listener'
+import { UniwindStore } from '../core/native'
+import { StyleDependency } from '../types'
+import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
+import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
+
+export const withUniwind: WithUniwind = <
+    TComponent extends Component,
+    TOptions extends Record<keyof ComponentProps<TComponent>, OptionMapping>,
+>(
+    Component: TComponent,
+    options?: TOptions,
+) => options
+    ? withManualUniwind(Component, options)
+    : withAutoUniwind(Component)
+
+const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject) => {
+    const { dependencies, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
+        if (isColorClassProperty(propName)) {
+            const colorProp = classToColor(propName)
+
+            if (props[colorProp] !== undefined) {
+                return acc
+            }
+
+            const { styles, dependencies } = UniwindStore.getStyles(propValue)
+
+            acc.dependencies.push(...dependencies)
+            acc.generatedProps[colorProp] = styles.accentColor
+
+            return acc
+        }
+
+        if (isClassProperty(propName)) {
+            const styleProp = classToStyle(propName)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue)
+
+            acc.dependencies.push(...dependencies)
+            acc.generatedProps[styleProp] ??= []
+            acc.generatedProps[styleProp][0] = styles
+
+            return acc
+        }
+
+        if (isStyleProperty(propName)) {
+            acc.generatedProps[propName] ??= []
+            acc.generatedProps[propName][1] = propValue
+
+            return acc
+        }
+
+        return acc
+    }, { generatedProps: {} as AnyObject, dependencies: [] as Array<StyleDependency> })
+
+    const deps = Array.from(new Set(dependencies))
+    const [, rerender] = useReducer(() => ({}), {})
+
+    useEffect(() => {
+        const dispose = UniwindListener.subscribe(rerender, deps)
+
+        return dispose
+    }, [deps])
+
+    return (
+        <Component
+            {...props}
+            {...generatedProps}
+        />
+    )
+}
+
+const withManualUniwind = (Component: Component<AnyObject>, options: Record<PropertyKey, OptionMapping>) => (props: AnyObject) => {
+    const { generatedProps, dependencies } = Object.entries(options).reduce((acc, [propName, option]) => {
+        const className = props[option.fromClassName]
+
+        if (className === undefined) {
+            return acc
+        }
+
+        if (option.styleProperty !== undefined) {
+            // If the prop is already defined, we don't want to override it
+            if (props[propName] !== undefined) {
+                return acc
+            }
+
+            const { styles, dependencies } = UniwindStore.getStyles(className)
+
+            acc.generatedProps[propName] = styles[option.styleProperty]
+            acc.dependencies.push(...dependencies)
+
+            return acc
+        }
+
+        const { styles, dependencies } = UniwindStore.getStyles(className)
+
+        acc.generatedProps[propName] = styles
+        acc.dependencies.push(...dependencies)
+
+        return acc
+    }, { generatedProps: {} as AnyObject, dependencies: [] as Array<StyleDependency> })
+
+    const deps = Array.from(new Set(dependencies))
+    const [, rerender] = useReducer(() => ({}), {})
+
+    useEffect(() => {
+        const dispose = UniwindListener.subscribe(rerender, deps)
+
+        return dispose
+    }, [deps])
+
+    return (
+        <Component
+            {...props}
+            {...generatedProps}
+        />
+    )
+}

package/src/hoc/withUniwind.tsx

@@ -0,0 +1,115 @@
+import { ComponentProps, useEffect, useReducer } from 'react'
+import { CSSListener, formatColor, getWebStyles } from '../core/web'
+import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
+import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
+
+export const withUniwind: WithUniwind = <
+    TComponent extends Component,
+    TOptions extends Record<keyof ComponentProps<TComponent>, OptionMapping>,
+>(
+    Component: TComponent,
+    options?: TOptions,
+) => options
+    ? withManualUniwind(Component, options)
+    : withAutoUniwind(Component)
+
+const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject) => {
+    const { classNames, generatedProps } = Object.entries(props).reduce((acc, [propName, propValue]) => {
+        if (isColorClassProperty(propName)) {
+            const colorProp = classToColor(propName)
+
+            if (props[colorProp] !== undefined) {
+                return acc
+            }
+
+            const className = propValue
+            const color = getWebStyles(className).accentColor
+
+            acc.generatedProps[colorProp] = color !== undefined
+                ? formatColor(color)
+                : undefined
+            acc.classNames += `${className} `
+
+            return acc
+        }
+
+        if (isClassProperty(propName)) {
+            const styleProp = classToStyle(propName)
+
+            acc.generatedProps[styleProp] ??= []
+            acc.generatedProps[styleProp][0] = { $$css: true, tailwind: propValue }
+
+            return acc
+        }
+
+        if (isStyleProperty(propName)) {
+            acc.generatedProps[propName] ??= []
+            acc.generatedProps[propName][1] = propValue
+
+            return acc
+        }
+
+        return acc
+    }, { generatedProps: {} as AnyObject, classNames: '' })
+
+    const [, rerender] = useReducer(() => ({}), {})
+
+    useEffect(() => {
+        const dispose = CSSListener.subscribeToClassName(classNames, rerender)
+
+        return dispose
+    }, [classNames])
+
+    return (
+        <Component
+            {...props}
+            {...generatedProps}
+        />
+    )
+}
+
+const withManualUniwind = (Component: Component<AnyObject>, options: Record<PropertyKey, OptionMapping>) => (props: AnyObject) => {
+    const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
+        const className = props[option.fromClassName]
+
+        if (className === undefined) {
+            return acc
+        }
+
+        if (option.styleProperty !== undefined) {
+            // If the prop is already defined, we don't want to override it
+            if (props[propName] !== undefined) {
+                return acc
+            }
+
+            const value = getWebStyles(className)[option.styleProperty]
+            const transformedValue = value !== undefined && option.styleProperty.toLowerCase().includes('color')
+                ? formatColor(value as string)
+                : value
+
+            acc.classNames += `${className} `
+            acc.generatedProps[propName] = transformedValue
+
+            return acc
+        }
+
+        acc.generatedProps[propName] = [{ $$css: true, tailwind: className }, props[propName]]
+
+        return acc
+    }, { generatedProps: {} as AnyObject, classNames: '' })
+
+    const [, rerender] = useReducer(() => ({}), {})
+
+    useEffect(() => {
+        const dispose = CSSListener.subscribeToClassName(classNames, rerender)
+
+        return dispose
+    }, [classNames])
+
+    return (
+        <Component
+            {...props}
+            {...generatedProps}
+        />
+    )
+}

package/src/hoc/withUniwindUtils.ts

@@ -0,0 +1,10 @@
+export const classToStyle = (className: string) =>
+    className === 'className'
+        ? 'style'
+        : className.replace('ClassName', 'Style')
+
+export const classToColor = (className: string) => className.replace('ClassName', '')
+
+export const isColorClassProperty = (prop: string) => prop.toLowerCase().includes('color') && prop.endsWith('ClassName')
+export const isClassProperty = (prop: string) => prop === 'className' || prop.endsWith('ClassName')
+export const isStyleProperty = (prop: string) => prop === 'style' || prop.endsWith('Style')

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useCSSVariable'
+export * from './useResolveClassNames'
+export * from './useUniwind'
+export * from './useUniwindAccent'

package/src/hooks/useCSSVariable/getVariableValue.native.ts

@@ -0,0 +1,3 @@
+import { UniwindStore } from '../../core/native'
+
+export const getVariableValue = (name: string) => UniwindStore.vars[name]

package/src/hooks/useCSSVariable/getVariableValue.ts

@@ -0,0 +1,19 @@
+import { parseCSSValue } from '../../core/web'
+
+const documentStyles = typeof document !== 'undefined'
+    ? window.getComputedStyle(document.documentElement)
+    : null
+
+export const getVariableValue = (name: string) => {
+    if (!documentStyles) {
+        return undefined
+    }
+
+    const value = documentStyles.getPropertyValue(name).trim()
+
+    if (value === '') {
+        return undefined
+    }
+
+    return parseCSSValue(value)
+}

package/src/hooks/useCSSVariable/index.ts

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

package/src/hooks/useCSSVariable/useCSSVariable.ts

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from 'react'
+import { UniwindListener } from '../../core/listener'
+import { Logger } from '../../core/logger'
+import { StyleDependency } from '../../types'
+import { getVariableValue } from './getVariableValue'
+
+const getValue = (name: string | Array<string>) =>
+    Array.isArray(name)
+        ? name.map(getVariableValue)
+        : getVariableValue(name)
+
+const arrayEquals = <T>(a: Array<T>, b: Array<T>) => {
+    if (a.length !== b.length) {
+        return false
+    }
+
+    return a.every((value, index) => value === b[index])
+}
+
+let warned = false
+
+const logDevError = (name: string) => {
+    warned = true
+    Logger.warn(
+        `We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`,
+    )
+}
+
+type IsGenericNumber<T> = T & 0 extends -1 ? false : true
+type CreateArray<N extends number, Value, TAcc extends Array<Value> = []> = TAcc['length'] extends N ? TAcc : CreateArray<N, Value, [...TAcc, Value]>
+
+type UseCSSVariable = {
+    (name: string): string | number | undefined
+    <const T extends Array<string>>(
+        names: T,
+    ): IsGenericNumber<T['length']> extends true ? Array<string | number | undefined> : CreateArray<T['length'], string | number | undefined>
+}
+
+/**
+ * A hook that returns the value of a CSS variable.
+ * @param name Name / Array of names of the CSS variable.
+ * @returns Value / Values of the CSS variable. On web it is always a string (1rem, #ff0000, etc.), but on native it can be a string or a number (16px, #ff0000)
+ */
+export const useCSSVariable: UseCSSVariable = (name: string | Array<string>) => {
+    const [value, setValue] = useState(getValue(name))
+    const nameRef = useRef(name)
+
+    useEffect(() => {
+        if (Array.isArray(name) && Array.isArray(nameRef.current)) {
+            if (arrayEquals(name, nameRef.current)) {
+                return
+            }
+
+            setValue(getValue(name))
+            nameRef.current = name
+
+            return
+        }
+
+        if (name !== nameRef.current) {
+            setValue(getValue(name))
+            nameRef.current = name
+        }
+    }, [name])
+
+    useEffect(() => {
+        const updateValue = () => setValue(getValue(nameRef.current))
+        const dispose = UniwindListener.subscribe(
+            updateValue,
+            [StyleDependency.Theme, StyleDependency.Variables],
+        )
+
+        return dispose
+    }, [])
+
+    if (Array.isArray(value)) {
+        value.forEach((val, index) => {
+            if (val === undefined && __DEV__ && !warned) {
+                logDevError(name[index] ?? '')
+            }
+        })
+    }
+
+    if (value === undefined && __DEV__ && !warned) {
+        logDevError(name as string)
+    }
+
+    return value as never
+}