@niibase/uniwind 1.0.0

package/src/core/native/runtime.ts

@@ -0,0 +1,32 @@
+import { Appearance, Dimensions, I18nManager, PixelRatio, StyleSheet } from 'react-native'
+import { ColorScheme, Orientation } from '../../types'
+import type { UniwindRuntime as UniwindRuntimeType } from '../types'
+import { colorMix, lightDark } from './native-utils'
+
+const window = Dimensions.get('window')
+const initialColorScheme = Appearance.getColorScheme() ?? ColorScheme.Light
+
+export const UniwindRuntime = {
+    screen: {
+        width: window.width,
+        height: window.height,
+    },
+    colorScheme: initialColorScheme,
+    currentThemeName: initialColorScheme,
+    orientation: window.width > window.height ? Orientation.Landscape : Orientation.Portrait,
+    fontScale: value => value * PixelRatio.getFontScale(),
+    hairlineWidth: StyleSheet.hairlineWidth,
+    rtl: I18nManager.isRTL,
+    insets: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+    },
+    colorMix,
+    pixelRatio: value => value * PixelRatio.get(),
+    cubicBezier: () => '',
+    lightDark: () => '',
+} as UniwindRuntimeType
+
+UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime)

package/src/core/native/store.ts

@@ -0,0 +1,238 @@
+/* eslint-disable max-depth */
+import { Dimensions, Platform } from 'react-native'
+import { Orientation, StyleDependency } from '../../types'
+import { UniwindListener } from '../listener'
+import { ComponentState, CSSVariables, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName } from '../types'
+import { cloneWithAccessors } from './native-utils'
+import { parseBoxShadow, parseFontVariant, parseTextShadowMutation, parseTransformsMutation, resolveGradient } from './parsers'
+import { UniwindRuntime } from './runtime'
+
+type StylesResult = {
+    styles: RNStyle
+    dependencies: Array<StyleDependency>
+}
+
+class UniwindStoreBuilder {
+    runtime = UniwindRuntime
+    vars = {} as Record<string, unknown>
+    runtimeThemeVariables = new Map<ThemeName, CSSVariables>()
+    private stylesheet = {} as StyleSheets
+    private cache = new Map<string, StylesResult>()
+    private generateStyleSheetCallbackResult: ReturnType<GenerateStyleSheetsCallback> | null = null
+
+    getStyles(className?: string, state?: ComponentState): StylesResult {
+        if (className === undefined || className === '') {
+            return {
+                styles: {},
+                dependencies: [],
+            }
+        }
+
+        const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}`
+
+        if (this.cache.has(cacheKey)) {
+            return this.cache.get(cacheKey)!
+        }
+
+        const result = this.resolveStyles(className, state)
+
+        this.cache.set(cacheKey, result)
+        UniwindListener.subscribe(
+            () => this.cache.delete(cacheKey),
+            result.dependencies,
+            { once: true },
+        )
+
+        return result
+    }
+
+    reinit = (generateStyleSheetCallback?: GenerateStyleSheetsCallback) => {
+        const config = generateStyleSheetCallback?.(this.runtime) ?? this.generateStyleSheetCallbackResult
+
+        if (!config) {
+            return
+        }
+
+        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}`]
+        const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName)
+
+        if (themeVars) {
+            Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(themeVars))
+        }
+
+        if (platformVars) {
+            Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(platformVars))
+        }
+
+        if (runtimeThemeVars) {
+            Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(runtimeThemeVars))
+        }
+
+        if (__DEV__ && generateStyleSheetCallback) {
+            UniwindListener.notifyAll()
+        }
+    }
+
+    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>()
+
+        for (const className of classNames.split(' ')) {
+            if (!(className in this.stylesheet)) {
+                continue
+            }
+
+            for (const style of this.stylesheet[className] as Array<Style>) {
+                if (style.dependencies) {
+                    style.dependencies.forEach(dep => dependencies.add(dep))
+                }
+
+                if (
+                    style.minWidth > this.runtime.screen.width
+                    || style.maxWidth < this.runtime.screen.width
+                    || (style.theme !== null && this.runtime.currentThemeName !== style.theme)
+                    || (style.orientation !== null && this.runtime.orientation !== style.orientation)
+                    || (style.rtl !== null && this.runtime.rtl !== style.rtl)
+                    || (style.active !== null && state?.isPressed !== style.active)
+                    || (style.focus !== null && state?.isFocused !== style.focus)
+                    || (style.disabled !== null && state?.isDisabled !== style.disabled)
+                ) {
+                    continue
+                }
+
+                for (const [property, valueGetter] of style.entries) {
+                    const previousBest = bestBreakpoints.get(property)
+
+                    if (
+                        previousBest
+                        && (
+                            previousBest.minWidth > style.minWidth
+                            || previousBest.complexity > style.complexity
+                            || previousBest.importantProperties.includes(property)
+                        )
+                    ) {
+                        continue
+                    }
+
+                    if (property[0] === '-') {
+                        // Clone vars object if we are adding inline variables
+                        if (vars === this.vars) {
+                            vars = cloneWithAccessors(this.vars)
+                        }
+
+                        Object.defineProperty(vars, property, {
+                            configurable: true,
+                            enumerable: true,
+                            get: valueGetter,
+                        })
+                    } else {
+                        Object.defineProperty(result, property, {
+                            configurable: true,
+                            enumerable: true,
+                            get: () => valueGetter.call(vars),
+                        })
+                    }
+
+                    bestBreakpoints.set(property, style)
+                }
+            }
+        }
+
+        if (result.lineHeight !== undefined && result.lineHeight < 6) {
+            Object.defineProperty(result, 'lineHeight', {
+                value: result.fontSize * result.lineHeight,
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        if (result.boxShadow !== undefined) {
+            Object.defineProperty(result, 'boxShadow', {
+                value: parseBoxShadow(result.boxShadow),
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        if (result.visibility === 'hidden') {
+            Object.defineProperty(result, 'display', {
+                value: 'none',
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        if (
+            result.borderStyle !== undefined && result.borderColor === undefined
+        ) {
+            Object.defineProperty(result, 'borderColor', {
+                value: '#000000',
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        if (
+            result.outlineStyle !== undefined && result.outlineColor === undefined
+        ) {
+            Object.defineProperty(result, 'outlineColor', {
+                value: '#000000',
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        if (result.fontVariant !== undefined) {
+            Object.defineProperty(result, 'fontVariant', {
+                value: parseFontVariant(result.fontVariant),
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        parseTransformsMutation(result)
+
+        if (result.experimental_backgroundImage !== undefined) {
+            Object.defineProperty(result, 'experimental_backgroundImage', {
+                value: resolveGradient(result.experimental_backgroundImage),
+                configurable: true,
+                enumerable: true,
+            })
+        }
+
+        if (result.textShadow !== undefined) {
+            parseTextShadowMutation(result)
+        }
+
+        return {
+            styles: { ...result } as RNStyle,
+            dependencies: Array.from(dependencies),
+        }
+    }
+}
+
+export const UniwindStore = new UniwindStoreBuilder()
+
+Dimensions.addEventListener('change', ({ window }) => {
+    const newOrientation = window.width > window.height ? Orientation.Landscape : Orientation.Portrait
+    const orientationChanged = UniwindStore.runtime.orientation !== newOrientation
+
+    UniwindStore.runtime.screen = {
+        width: window.width,
+        height: window.height,
+    }
+    UniwindStore.runtime.orientation = newOrientation
+    UniwindListener.notify([
+        ...orientationChanged ? [StyleDependency.Orientation] : [],
+        StyleDependency.Dimensions,
+    ])
+})

package/src/core/types.ts

@@ -0,0 +1,92 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { ColorScheme, Orientation, StyleDependency, UniwindConfig } from '../types'
+
+export type Style = {
+    entries: Array<[string, () => unknown]>
+    minWidth: number
+    maxWidth: number
+    orientation: Orientation | null
+    theme: ColorScheme | null
+    rtl: boolean | null
+    native: boolean
+    dependencies: Array<StyleDependency> | null
+    index: number
+    className: string
+    importantProperties: Array<string>
+    complexity: number
+    active: boolean | null
+    focus: boolean | null
+    disabled: boolean | null
+}
+
+export type StyleSheets = Record<string, Array<Style>>
+
+export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
+    stylesheet: StyleSheets
+    vars: Record<string, unknown>
+    scopedVars: Partial<Record<string, Record<string, unknown>>>
+}
+
+type UserThemes = UniwindConfig extends { themes: infer T extends readonly string[] } ? T
+    : readonly string[]
+
+export type ThemeName = UserThemes[number]
+
+export type UniwindRuntime = {
+    screen: {
+        width: number
+        height: number
+    }
+    orientation: Orientation
+    colorScheme: ColorScheme
+    currentThemeName: ThemeName
+    rtl: boolean
+    insets: {
+        top: number
+        bottom: number
+        left: number
+        right: number
+    }
+    hairlineWidth: number
+    pixelRatio: (value: number) => number
+    fontScale: (value: number) => number
+    colorMix: (color: string, weight: number | string, mixColor: string) => string
+    cubicBezier: (x1: number, y1: number, x2: number, y2: number) => string
+    lightDark: (light: string, dark: string) => string
+}
+
+export type RNStyle = ViewStyle & TextStyle & ImageStyle & {
+    accentColor?: string
+    fill?: string
+}
+
+export type RNStylesProps =
+    | 'style'
+    | 'contentContainerStyle'
+    | 'imageStyle'
+    | 'ListFooterComponentStyle'
+    | 'ListHeaderComponentStyle'
+    | 'columnWrapperStyle'
+export type RNClassNameProps = GetClassName<RNStylesProps>
+
+type GetClassName<T extends string> = T extends `${infer S}Style` ? `${S}ClassName` : 'className'
+
+export type UniwindComponentProps =
+    & {
+        [K in RNStylesProps]?: StyleProp<RNStyle>
+    }
+    & {
+        [K in RNClassNameProps]?: string
+    }
+
+declare global {
+    var __uniwindThemes__: ReadonlyArray<string> | undefined
+}
+
+export type ComponentState = {
+    isPressed?: boolean
+    isDisabled?: boolean
+    isFocused?: boolean
+}
+
+export type CSSVariables = Record<string, string | number>

package/src/core/web/cssListener.ts

@@ -0,0 +1,185 @@
+import { StyleDependency } from '../../types'
+import { UniwindListener } from '../listener'
+
+class CSSListenerBuilder {
+    private classNameMediaQueryListeners = new Map<string, MediaQueryList>()
+    private listeners = new Map<MediaQueryList, Set<VoidFunction>>()
+    private registeredRules = new Map<string, MediaQueryList>()
+    private processedStyleSheets = new WeakSet<CSSStyleSheet>()
+    private pendingInitialization: number | undefined = undefined
+
+    constructor() {
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        const observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    this.scheduleInitialization()
+                }
+            }
+        })
+
+        this.initialize()
+        observer.observe(document.head, {
+            childList: true,
+            subtree: false,
+            attributes: true,
+            attributeFilter: ['disabled', 'media', 'title', 'href', 'rel'],
+        })
+    }
+
+    subscribeToClassName(classNames: string, listener: VoidFunction) {
+        const disposables = [] as Array<VoidFunction>
+
+        classNames.split(' ').forEach(className => {
+            const mediaQuery = this.classNameMediaQueryListeners.get(className)
+
+            if (!mediaQuery) {
+                // eslint-disable-next-line no-empty-function
+                return () => {}
+            }
+
+            const listeners = this.listeners.get(mediaQuery)
+
+            listeners?.add(listener)
+            disposables.push(() => listeners?.delete(listener))
+        })
+
+        const disposeThemeListener = UniwindListener.subscribe(listener, [StyleDependency.Theme])
+
+        return () => {
+            disposables.forEach(disposable => disposable())
+            disposeThemeListener()
+        }
+    }
+
+    private scheduleInitialization() {
+        this.cancelPendingInitialization()
+
+        if (typeof requestIdleCallback !== 'undefined') {
+            this.pendingInitialization = requestIdleCallback(() => {
+                this.initialize()
+            }, { timeout: 50 })
+
+            return
+        }
+
+        this.pendingInitialization = setTimeout(() => {
+            this.initialize()
+        }, 50) as unknown as number
+    }
+
+    private cancelPendingInitialization() {
+        if (this.pendingInitialization !== undefined) {
+            if (typeof cancelIdleCallback !== 'undefined') {
+                cancelIdleCallback(this.pendingInitialization)
+            } else {
+                clearTimeout(this.pendingInitialization)
+            }
+
+            this.pendingInitialization = undefined
+        }
+    }
+
+    private initialize() {
+        this.pendingInitialization = undefined
+
+        for (const sheet of Array.from(document.styleSheets)) {
+            // Skip already processed stylesheets
+            if (this.processedStyleSheets.has(sheet)) {
+                continue
+            }
+
+            let rules: CSSRuleList
+
+            try {
+                // May throw for cross-origin stylesheets
+                rules = sheet.cssRules
+            } catch {
+                continue
+            }
+
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, @typescript-eslint/strict-boolean-expressions
+            if (!rules) {
+                continue
+            }
+
+            // Mark as processed after successful cssRules access
+            this.processedStyleSheets.add(sheet)
+
+            this.addMediaQueriesDeep(rules)
+        }
+    }
+
+    private isStyleRule(rule: CSSRule): rule is CSSStyleRule {
+        return rule.constructor.name === 'CSSStyleRule'
+    }
+
+    private isMediaRule(rule: CSSRule): rule is CSSMediaRule {
+        return rule.constructor.name === 'CSSMediaRule'
+    }
+
+    private collectParentMediaQueries(rule: CSSRule, acc = [] as Array<CSSMediaRule>): Array<CSSMediaRule> {
+        const { parentRule } = rule
+
+        if (!parentRule) {
+            return []
+        }
+
+        if (this.isMediaRule(parentRule)) {
+            acc.push(parentRule)
+        }
+
+        const result = this.collectParentMediaQueries(parentRule, acc)
+
+        acc.push(...result)
+
+        return Array.from(new Set(acc))
+    }
+
+    private addMediaQueriesDeep(rules: CSSRuleList) {
+        for (const rule of Array.from(rules)) {
+            if (this.isStyleRule(rule)) {
+                const mediaQueries = this.collectParentMediaQueries(rule)
+
+                if (mediaQueries.length > 0) {
+                    this.addMediaQuery(mediaQueries, rule.selectorText)
+                }
+
+                continue
+            }
+
+            if ('cssRules' in rule && rule.cssRules instanceof CSSRuleList) {
+                this.addMediaQueriesDeep(rule.cssRules)
+
+                continue
+            }
+        }
+    }
+
+    private addMediaQuery(mediaQueries: Array<CSSMediaRule>, className: string) {
+        const rules = mediaQueries.map(mediaQuery => mediaQuery.conditionText).sort().join(' and ')
+        const parsedClassName = className.replace('.', '').replace('\\', '')
+        const cachedMediaQueryList = this.registeredRules.get(rules)
+
+        if (cachedMediaQueryList) {
+            this.classNameMediaQueryListeners.set(parsedClassName, cachedMediaQueryList)
+
+            return
+        }
+
+        const mediaQueryList = window.matchMedia(rules)
+
+        this.registeredRules.set(rules, mediaQueryList)
+        this.listeners.set(mediaQueryList, new Set())
+        this.classNameMediaQueryListeners.set(parsedClassName, mediaQueryList)
+
+        mediaQueryList.addEventListener('change', () => {
+            this.listeners.get(mediaQueryList)!.forEach(listener => listener())
+        })
+    }
+}
+
+export const CSSListener = new CSSListenerBuilder()

package/src/core/web/formatColor.ts

@@ -0,0 +1,13 @@
+import { formatHex, formatHex8, parse } from 'culori'
+
+export const formatColor = (color: string) => {
+    const parsedColor = parse(color)
+
+    if (!parsedColor) {
+        return color
+    }
+
+    return parsedColor.alpha !== undefined && parsedColor.alpha !== 1
+        ? formatHex8(parsedColor)
+        : formatHex(parsedColor)
+}

package/src/core/web/getWebStyles.ts

@@ -0,0 +1,76 @@
+import { RNStyle } from '../types'
+import { parseCSSValue } from './parseCSSValue'
+
+const dummy = typeof document !== 'undefined'
+    ? Object.assign(document.createElement('div'), {
+        style: 'display: none',
+    })
+    : null
+
+if (dummy) {
+    document.body.appendChild(dummy)
+}
+
+const getComputedStyles = () => {
+    if (!dummy) {
+        return {} as CSSStyleDeclaration
+    }
+
+    const computedStyles = window.getComputedStyle(dummy)
+    const styles = {} as CSSStyleDeclaration
+
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let i = 0; i < computedStyles.length; i++) {
+        // Typescript is unable to infer it properly
+        const prop = computedStyles[i] as any
+
+        styles[prop] = computedStyles.getPropertyValue(prop)
+    }
+
+    return styles
+}
+
+const initialStyles = typeof document !== 'undefined'
+    ? getComputedStyles()
+    : {} as CSSStyleDeclaration
+
+const getObjectDifference = <T extends object>(obj1: T, obj2: T): T => {
+    const diff = {} as T
+    const keys = Object.keys(obj2) as Array<keyof T>
+
+    keys.forEach(key => {
+        if (obj2[key] !== obj1[key]) {
+            diff[key] = obj2[key]
+        }
+    })
+
+    return diff
+}
+
+export const getWebStyles = (className?: string): RNStyle => {
+    if (className === undefined) {
+        return {}
+    }
+
+    if (!dummy) {
+        return {}
+    }
+
+    dummy.className = className
+
+    const computedStyles = getObjectDifference(initialStyles, getComputedStyles())
+
+    return Object.fromEntries(
+        Object.entries(computedStyles)
+            .map(([key, value]) => {
+                const parsedKey = key[0] === '-'
+                    ? key
+                    : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+
+                return [
+                    parsedKey,
+                    parseCSSValue(value),
+                ]
+            }),
+    )
+}

package/src/core/web/index.ts

@@ -0,0 +1,4 @@
+export * from './cssListener'
+export * from './formatColor'
+export * from './getWebStyles'
+export * from './parseCSSValue'

package/src/core/web/parseCSSValue.ts

@@ -0,0 +1,10 @@
+import { parse } from 'culori'
+import { formatColor } from './formatColor'
+
+export const parseCSSValue = (value: string) => {
+    if (isNaN(Number(value)) && parse(value) !== undefined) {
+        return formatColor(value)
+    }
+
+    return value
+}

package/src/css/index.ts

@@ -0,0 +1,32 @@
+import fs from 'fs'
+import path from 'path'
+import { generateCSSForInsets } from './insets'
+import { generateCSSForThemes } from './themes'
+import { generateCSSForVariants } from './variants'
+
+const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
+
+export const buildCSS = async (themes: Array<string>, input: string) => {
+    const variants = generateCSSForVariants()
+    const insets = generateCSSForInsets()
+    const themesCSS = await generateCSSForThemes(themes, input)
+    const cssFilePath = path.join(dirname, '../../uniwind.css')
+    const oldCSSFile = fs.existsSync(cssFilePath)
+        ? fs.readFileSync(cssFilePath, 'utf-8')
+        : ''
+
+    const newCssFile = [
+        variants,
+        insets,
+        themesCSS,
+    ].join('\n')
+
+    if (oldCSSFile === newCssFile) {
+        return
+    }
+
+    fs.writeFileSync(
+        cssFilePath,
+        newCssFile,
+    )
+}