@niibase/uniwind 1.0.0

package/src/metro/processor/rn.ts

@@ -0,0 +1,277 @@
+import { addMissingSpaces, isDefined, pipe, toCamelCase } from '../utils'
+import type { ProcessorBuilder } from './processor'
+
+const cssToRNMap: Record<string, (value: any) => Record<string, any>> = {
+    backgroundSize: value => {
+        return {
+            resizeMode: value,
+        }
+    },
+    transitionProperty: (value: string) => {
+        return {
+            transitionProperty: value
+                .replace(/"/g, '')
+                .split(',')
+                .filter(token => token !== '' && !token.startsWith('--'))
+                .map(token => `"${toCamelCase(token)}"`),
+        }
+    },
+    flex: (value: any) => {
+        if (typeof value === 'object') {
+            return value
+        }
+
+        return {
+            flex: value,
+        }
+    },
+    overflow: (value: any) => {
+        if (typeof value === 'object') {
+            return value
+        }
+
+        return {
+            overflow: value,
+        }
+    },
+    backdropFilter: () => ({}),
+    backgroundImage: value => ({
+        experimental_backgroundImage: value,
+    }),
+    borderSpacing: () => ({}),
+    translate: value => {
+        if (typeof value === 'object' && 'x' in value && 'y' in value) {
+            return {
+                translateX: value.x,
+                translateY: value.y,
+            }
+        }
+
+        if (typeof value === 'string') {
+            const [x, y] = value.split(' ')
+
+            return {
+                translateX: x,
+                translateY: y ?? x,
+            }
+        }
+
+        return {}
+    },
+    rotate: value => {
+        if (typeof value === 'object') {
+            return value
+        }
+
+        return {
+            rotate: value,
+        }
+    },
+    scale: value => {
+        if (typeof value === 'object') {
+            return {
+                scaleX: value.x,
+                scaleY: value.y,
+                scaleZ: value.z,
+            }
+        }
+
+        if (typeof value === 'string') {
+            const [x, y, z] = value.split(' ')
+
+            return {
+                scaleX: x,
+                scaleY: y,
+                scaleZ: z,
+            }
+        }
+
+        return {}
+    },
+    transform: value => {
+        if (typeof value === 'string' || Array.isArray(value)) {
+            return {
+                transform: value,
+            }
+        }
+
+        if (typeof value === 'object') {
+            return Object.keys(value).length === 0
+                ? { transform: [] }
+                : value
+        }
+
+        return {}
+    },
+    fontSize: value => {
+        return {
+            fontSize: value,
+            '--uniwind-em': value,
+        }
+    },
+    borderInlineWidth: value => {
+        const borderWidth = typeof value === 'object'
+            ? Object.values(value)[0]
+            : value
+
+        return {
+            borderLeftWidth: borderWidth,
+            borderRightWidth: borderWidth,
+        }
+    },
+    borderBlockWidth: value => {
+        const borderWidth = typeof value === 'object'
+            ? Object.values(value)[0]
+            : value
+
+        return {
+            borderTopWidth: borderWidth,
+            borderBottomWidth: borderWidth,
+        }
+    },
+    borderInlineStyle: value => {
+        return {
+            borderStyle: value,
+        }
+    },
+    borderBlockStyle: value => {
+        return {
+            borderStyle: value,
+        }
+    },
+    borderStyle: value => {
+        const borderStyle = typeof value === 'object'
+            ? Object.values(value)[0]
+            : value
+
+        return {
+            borderStyle,
+        }
+    },
+    transformOrigin: value => {
+        if (typeof value === 'object') {
+            return {
+                transformOrigin: `${value.x} ${value.y}`,
+            }
+        }
+
+        return {
+            transformOrigin: value,
+        }
+    },
+    fontVariantNumeric: value => ({
+        fontVariant: value,
+    }),
+}
+
+export class RN {
+    constructor(private readonly Processor: ProcessorBuilder) {}
+
+    cssToRN(property: string, value: any) {
+        const transformedProperty = property.startsWith('--')
+            ? property
+            : pipe(property)(
+                toCamelCase,
+                x => {
+                    if (x.includes('padding') || x.includes('margin')) {
+                        return x
+                            .replace('Inline', 'Horizontal')
+                            .replace('Block', 'Vertical')
+                    }
+
+                    return x
+                },
+            )
+
+        const rn = this.transformProperty(
+            transformedProperty,
+            typeof value === 'string' ? addMissingSpaces(value) : value,
+        )
+
+        return Object.entries(rn).filter(([, value]) => isDefined(value)) as Array<[string, any]>
+    }
+
+    private transformProperty(property: string, value: any) {
+        if (property in cssToRNMap) {
+            return cssToRNMap[property]!(value)
+        }
+
+        if (typeof value === 'object') {
+            const transformed = this.transformObjectProperty(property, value)
+
+            if (transformed) {
+                return transformed
+            }
+        }
+
+        return {
+            [property]: value,
+        }
+    }
+
+    private transformObjectProperty(property: string, value: Record<string, any>) {
+        const properties = Object.keys(value)
+        // border properties are border{X}Color instead of borderColor{X}
+        const propertyEnd = property.includes('border')
+            ? property.split('border').at(-1) ?? ''
+            : ''
+        const transformedProperty = property.replace(propertyEnd, '')
+        const isSpacing = property.includes('margin') || property.includes('padding')
+
+        const wrapProperty = (prop: string) => `${transformedProperty}${prop}${propertyEnd}`
+
+        if (properties.every(property => ['row', 'column'].includes(property))) {
+            return {
+                rowGap: value.row,
+                columnGap: value.column,
+            }
+        }
+
+        if (properties.every(property => ['start', 'end'].includes(property))) {
+            if (isSpacing && property.includes('Horizontal')) {
+                return {
+                    [`${property.replace('Horizontal', 'Left')}`]: value.start,
+                    [`${property.replace('Horizontal', 'Right')}`]: value.end,
+                }
+            }
+
+            if (isSpacing && property.includes('Vertical')) {
+                return {
+                    [`${property.replace('Vertical', 'Top')}`]: value.start,
+                    [`${property.replace('Vertical', 'Bottom')}`]: value.end,
+                }
+            }
+
+            return {
+                [wrapProperty('Start')]: value.start,
+                [wrapProperty('End')]: value.end,
+            }
+        }
+
+        if (properties.every(property => ['top', 'right', 'bottom', 'left'].includes(property))) {
+            return {
+                [wrapProperty('Top')]: value.top,
+                [wrapProperty('Right')]: value.right,
+                [wrapProperty('Bottom')]: value.bottom,
+                [wrapProperty('Left')]: value.left,
+            }
+        }
+
+        if (properties.every(property => ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'].includes(property))) {
+            return {
+                [wrapProperty('TopLeft')]: value.topLeft,
+                [wrapProperty('TopRight')]: value.topRight,
+                [wrapProperty('BottomRight')]: value.bottomRight,
+                [wrapProperty('BottomLeft')]: value.bottomLeft,
+            }
+        }
+
+        if (properties.every(property => ['style', 'width', 'color'].includes(property))) {
+            return {
+                [wrapProperty('Style')]: value.style,
+                [wrapProperty('Width')]: value.width,
+                [wrapProperty('Color')]: value.color,
+            }
+        }
+    }
+}

package/src/metro/processor/units.ts

@@ -0,0 +1,58 @@
+import { DimensionPercentageFor_LengthValue, Length, LengthValue } from 'lightningcss'
+import { Logger } from '../logger'
+import type { ProcessorBuilder } from './processor'
+
+export class Units {
+    private readonly logger = new Logger('Units')
+
+    constructor(private readonly Processor: ProcessorBuilder) {}
+
+    processLength(length: LengthValue | DimensionPercentageFor_LengthValue | number) {
+        if (typeof length === 'number') {
+            return length
+        }
+
+        if ('unit' in length) {
+            switch (length.unit) {
+                case 'px':
+                    return this.replaceInfinity(length.value)
+                case 'vw':
+                    return `rt.screen.width * ${length.value / 100}`
+                case 'vh':
+                    return `rt.screen.height * ${length.value / 100}`
+                case 'rem':
+                    return length.value * this.Processor.vars['--uniwind-em']
+                case 'em':
+                    return `this[\`--uniwind-em\`] * ${length.value}`
+                default:
+                    this.logger.warn(`Unsupported unit - ${length.unit}`)
+
+                    return length.value
+            }
+        }
+
+        return this.Processor.CSS.processValue(length)
+    }
+
+    processAnyLength(length: DimensionPercentageFor_LengthValue | Length | LengthValue) {
+        if ('type' in length) {
+            switch (length.type) {
+                case 'value':
+                case 'dimension':
+                    return this.processLength(length.value)
+                case 'percentage':
+                    return `${length.value * 100}%`
+                default:
+                    this.logger.warn(`Unsupported length type - ${length.type}`)
+
+                    return length.value
+            }
+        }
+
+        return this.processLength(length)
+    }
+
+    replaceInfinity(value: any) {
+        return value === Infinity ? 99999 : value
+    }
+}

package/src/metro/processor/var.ts

@@ -0,0 +1,18 @@
+import { Variable } from 'lightningcss'
+import type { ProcessorBuilder } from './processor'
+
+export class Var {
+    constructor(private readonly Processor: ProcessorBuilder) {}
+
+    processVar(variable: Variable): string {
+        const value = `this[\`${variable.name.ident}\`]`
+
+        if (!variable.fallback || variable.fallback.length === 0) {
+            return value
+        }
+
+        const fallback = this.Processor.CSS.processValue(variable.fallback)
+
+        return `${value} ?? ${fallback}`
+    }
+}

package/src/metro/resolvers.ts

@@ -0,0 +1,101 @@
+import { CustomResolutionContext, CustomResolver } from 'metro-resolver'
+import { basename, resolve, sep } from 'node:path'
+import { name } from '../../package.json'
+
+type ResolverConfig = {
+    platform: string | null
+    resolver: CustomResolver
+    context: CustomResolutionContext
+    moduleName: string
+}
+
+const thisModuleDist = resolve(__dirname, '../../dist')
+const thisModuleSrc = resolve(__dirname, '../../src')
+
+const isFromThisModule = (filename: string) => filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc)
+
+const SUPPORTED_COMPONENTS = [
+    'ActivityIndicator',
+    'Button',
+    'FlatList',
+    'Image',
+    'ImageBackground',
+    'InputAccessoryView',
+    'KeyboardAvoidingView',
+    'Modal',
+    'Pressable',
+    'RefreshControl',
+    'SafeAreaView',
+    'ScrollView',
+    'SectionList',
+    'Switch',
+    'Text',
+    'TextInput',
+    'TouchableHighlight',
+    'TouchableNativeFeedback',
+    'TouchableOpacity',
+    'TouchableWithoutFeedback',
+    'View',
+    'VirtualizedList',
+]
+
+export const nativeResolver = ({
+    context,
+    moduleName,
+    platform,
+    resolver,
+}: ResolverConfig) => {
+    const resolution = resolver(context, moduleName, platform)
+    const isInternal = isFromThisModule(context.originModulePath)
+    const isReactNativeIndex = context.originModulePath.endsWith(
+        `react-native${sep}index.js`,
+    )
+
+    if (isInternal || resolution.type !== 'sourceFile' || isReactNativeIndex) {
+        return resolution
+    }
+
+    if (moduleName === 'react-native') {
+        return resolver(context, `${name}/components`, platform)
+    }
+
+    if (
+        resolution.filePath.includes(`${sep}react-native${sep}Libraries${sep}`)
+    ) {
+        const filename = basename(resolution.filePath.split(sep).at(-1) ?? '')
+        const module = filename.split('.').at(0)
+
+        if (module !== undefined && SUPPORTED_COMPONENTS.includes(module)) {
+            return resolver(context, `${name}/components/${module}`, platform)
+        }
+    }
+
+    return resolution
+}
+
+export const webResolver = ({
+    context,
+    moduleName,
+    platform,
+    resolver,
+}: ResolverConfig) => {
+    const resolution = resolver(context, moduleName, platform)
+
+    if (
+        isFromThisModule(context.originModulePath)
+        || resolution.type !== 'sourceFile'
+        || !resolution.filePath.includes(`${sep}react-native-web${sep}`)
+    ) {
+        return resolution
+    }
+
+    const segments = resolution.filePath.split(sep)
+    const isIndex = segments.at(-1)?.startsWith('index.')
+    const module = segments.at(-2)
+
+    if (!isIndex || module === undefined || !SUPPORTED_COMPONENTS.includes(module) || context.originModulePath.endsWith(`${module}${sep}index.js`)) {
+        return resolution
+    }
+
+    return resolver(context, `${name}/components/${module}`, platform)
+}

package/src/metro/types.ts

@@ -0,0 +1,74 @@
+import type {
+    AbsoluteFontWeight,
+    Declaration,
+    GradientItemFor_DimensionPercentageFor_LengthValue,
+    LineDirection,
+    MathFunctionFor_DimensionPercentageFor_LengthValue,
+    MathFunctionFor_Length,
+    MediaFeatureValue,
+    ParsedComponent,
+    Token,
+    TokenOrValue,
+    UnresolvedColor,
+} from 'lightningcss'
+import { ColorScheme, Orientation } from '../types'
+
+export type Polyfills = {
+    rem?: number
+}
+
+export type UniwindConfig = {
+    cssEntryFile: string
+    themes: Array<string>
+    extraThemes?: Array<string>
+    dtsFile?: string
+    polyfills?: Polyfills
+    debug?: boolean
+}
+
+export type MediaQueryResolver = {
+    maxWidth: any
+    minWidth: any
+    platform: Platform | null
+    rtl: boolean | null
+    important: boolean
+    importantProperties?: Array<string>
+    colorScheme: ColorScheme | null
+    theme: string | null
+    orientation: Orientation | null
+    disabled: boolean | null
+    active: boolean | null
+    focus: boolean | null
+}
+
+export const enum Platform {
+    Android = 'android',
+    iOS = 'ios',
+    Web = 'web',
+    Native = 'native',
+}
+
+type TakeArray<T> = T extends Array<any> ? T : never
+
+export type DeclarationValues =
+    | Declaration['value']
+    | TakeArray<Declaration['value']>[number]
+    | TokenOrValue
+    | Token
+    | ParsedComponent
+    | Array<TokenOrValue>
+    | MediaFeatureValue
+    | MathFunctionFor_DimensionPercentageFor_LengthValue
+    | MathFunctionFor_Length
+    | LineDirection
+    | GradientItemFor_DimensionPercentageFor_LengthValue
+    | AbsoluteFontWeight
+    | UnresolvedColor
+
+export type ProcessMetaValues = {
+    className?: string | null
+}
+
+export type StyleSheetTemplate = {
+    [K: string]: Array<MediaQueryResolver & Record<string, unknown>>
+}

package/src/metro/utils/common.ts

@@ -0,0 +1,103 @@
+export const isDefined = <T>(value: T): value is NonNullable<T> => value !== null && value !== undefined
+
+export const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+
+type P<I, O> = (data: I) => O
+type PipeFns<T> = {
+    <A>(a: P<T, A>): A
+    <A, B>(a: P<T, A>, b: P<A, B>): B
+    <A, B, C>(a: P<T, A>, b: P<A, B>, c: P<B, C>): C
+    <A, B, C, D>(a: P<T, A>, b: P<A, B>, c: P<B, C>, d: P<C, D>): D
+    <A, B, C, D, E>(a: P<T, A>, b: P<A, B>, c: P<B, C>, d: P<C, D>, e: P<D, E>): E
+    <A, B, C, D, E, F>(a: P<T, A>, b: P<A, B>, c: P<B, C>, d: P<C, D>, e: P<D, E>, f: P<E, F>): F
+    <A, B, C, D, E, F, G>(a: P<T, A>, b: P<A, B>, c: P<B, C>, d: P<C, D>, e: P<D, E>, f: P<E, F>, g: P<F, G>): G
+    <A, B, C, D, E, F, G, H>(a: P<T, A>, b: P<A, B>, c: P<B, C>, d: P<C, D>, e: P<D, E>, f: P<E, F>, g: P<F, G>, h: P<G, H>): H
+    (...fns: Array<P<T, T>>): T
+}
+
+export const pipe = <T>(data: T) => ((...fns: Array<any>) => fns.reduce((acc, fn) => fn(acc), data)) as PipeFns<T>
+
+export const isNumber = (data: any) => {
+    if (typeof data === 'number') {
+        return true
+    }
+
+    if (typeof data === 'string' && data !== '') {
+        return !isNaN(Number(data))
+    }
+
+    return false
+}
+
+export const smartSplit = (str: string, separator = ' ' as string | RegExp) => {
+    const escaper = '&&&'
+
+    return pipe(str)(
+        x => x.replace(/\s\?\?\s/g, `${escaper}??${escaper}`),
+        x => x.replace(/\s([+\-*/])\s/g, `${escaper}$1${escaper}`),
+        x => x.split(separator),
+        x => x.map(token => token.replace(new RegExp(escaper, 'g'), ' ')),
+    )
+}
+
+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(/\)(?=\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 {
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+        new Function(`const test = ${jsValueString}`)
+
+        return true
+    } catch {
+        return false
+    }
+}
+
+export const shouldBeSerialized = (value: string) => {
+    if (value.includes('-')) {
+        return value.split('-').some(shouldBeSerialized)
+    }
+
+    return [
+        isNumber(value),
+        value.startsWith('this['),
+        value.startsWith('rt.'),
+        /[*/+-]/.test(value),
+        value.includes('"'),
+        value.includes(' '),
+    ].some(Boolean)
+}
+
+export const roundToPrecision = (value: number, precision: number) => parseFloat(value.toFixed(precision))
+
+export const deepEqual = <T>(a: T, b: T): boolean => {
+    if (Object.is(a, b)) {
+        return true
+    }
+
+    if (
+        typeof a !== 'object'
+        || a === null
+        || typeof b !== 'object'
+        || b === null
+    ) {
+        return false
+    }
+
+    const keysA = Object.keys(a) as Array<keyof T>
+
+    if (keysA.length !== Object.keys(b).length) {
+        return false
+    }
+
+    return keysA.every(key => deepEqual(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key))
+}

package/src/metro/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './common'
+export * from './serialize'