@niibase/uniwind 1.0.0

package/src/metro/processor/functions.ts

@@ -0,0 +1,199 @@
+import { CalcFor_DimensionPercentageFor_LengthValue, CalcFor_Length, CssColor, Function as FunctionType } from 'lightningcss'
+import { Logger } from '../logger'
+import { pipe } from '../utils'
+import type { ProcessorBuilder } from './processor'
+
+export class Functions {
+    private readonly logger = new Logger('Functions')
+
+    constructor(private readonly Processor: ProcessorBuilder) {}
+
+    processCalc(calc: CalcFor_DimensionPercentageFor_LengthValue | CalcFor_Length): string {
+        switch (calc.type) {
+            case 'sum': {
+                const sum = calc.value.map(x => this.processCalc(x)).join(' + ')
+
+                return this.tryEval(sum)
+            }
+            case 'value':
+                return this.Processor.CSS.processValue(calc.value)
+            case 'function':
+                return this.Processor.CSS.processValue(calc.value)
+            case 'number':
+                return String(calc.value)
+            default:
+                this.logger.warn(`Unsupported calc type - ${calc.type}`)
+
+                return ''
+        }
+    }
+
+    processFunction(fn: string | FunctionType) {
+        if (typeof fn !== 'object') {
+            this.logger.warn(`Unsupported function - ${fn}`)
+
+            return fn
+        }
+
+        if (fn.name === 'calc') {
+            const calc = this.Processor.CSS.processValue(fn.arguments)
+
+            return pipe(calc)(
+                String,
+                x => this.Processor.Functions.tryEval(x),
+            )
+        }
+
+        if (fn.name === 'cubic-bezier') {
+            const cubicArguments = pipe(this.Processor.CSS.processValue(fn.arguments))(
+                String,
+                x => x.replace(/,\s/g, ','),
+            )
+
+            return `rt.cubicBezier(${cubicArguments})`
+        }
+
+        if (fn.name === 'max') {
+            return `Math.max(${this.Processor.CSS.processValue(fn.arguments)})`
+        }
+
+        if (fn.name === 'linear-gradient') {
+            return this.Processor.CSS.processValue(fn.arguments)
+        }
+
+        if (fn.name === 'color-mix') {
+            return this.processColorMix(fn)
+        }
+
+        if (
+            [
+                'rgb',
+                'oklab',
+                'oklch',
+                'hsl',
+                'hwb',
+                'lab',
+                'lch',
+                'srgb',
+            ].includes(fn.name)
+        ) {
+            const color = `${fn.name}(${this.Processor.CSS.processValue(fn.arguments)})`
+
+            return this.Processor.Color.processColor(color as CssColor)
+        }
+
+        if (
+            [
+                'blur',
+                'brightness',
+                'contrast',
+                'grayscale',
+                'hue-rotate',
+                'invert',
+                'opacity',
+                'saturate',
+                'sepia',
+                'conic-gradient',
+                'radial-gradient',
+            ].includes(fn.name)
+        ) {
+            // Not supported by RN
+            return '""'
+        }
+
+        if (['skewX', 'skewY'].includes(fn.name)) {
+            return `"${fn.name}(${this.Processor.CSS.processValue(fn.arguments).replace(/"/g, '')})"`
+        }
+
+        if (fn.name === 'hairlineWidth') {
+            return 'rt.hairlineWidth'
+        }
+
+        if (fn.name === 'pixelRatio') {
+            return `rt.pixelRatio(${this.Processor.CSS.processValue(fn.arguments)})`
+        }
+
+        if (fn.name === 'fontScale') {
+            return `rt.fontScale(${this.Processor.CSS.processValue(fn.arguments)})`
+        }
+
+        if (fn.name === 'drop-shadow') {
+            return undefined
+        }
+
+        this.logger.warn(`Unsupported function - ${fn.name}`)
+
+        return fn.name
+    }
+
+    processMathFunction(
+        name: string,
+        value:
+            | Array<CalcFor_DimensionPercentageFor_LengthValue>
+            | Array<CalcFor_Length>
+            | CalcFor_DimensionPercentageFor_LengthValue
+            | CalcFor_Length,
+    ) {
+        if (!Array.isArray(value)) {
+            return `Math.${name}(${this.processCalc(value)})`
+        }
+
+        const values = value.map(x => this.processCalc(x)).join(' , ')
+
+        return `Math.${name}(${values})`
+    }
+
+    private tryEval(value: string) {
+        // Match units like %, deg, rad, grad, turn that are not preceded by letters or hyphens
+        const units = Array.from(
+            value
+                .replace(/"/g, '')
+                .match(/(?<![A-Za-z-])(?:%|deg|rad|grad|turn)(?=\s|$)/g) ?? [],
+        )
+
+        if (units.length === 0) {
+            return value
+        }
+
+        if (new Set(units).size !== 1) {
+            this.logger.error(`Invalid calc, you can't mix multiple units`)
+
+            return value
+        }
+
+        if (units.includes('%') && value.includes('+')) {
+            this.logger.error(`Invalid calc, you can't mix % with other units`)
+
+            return value
+        }
+
+        const unit = units.at(0) ?? ''
+
+        try {
+            const numericValue = value
+                .replace(/"/g, '')
+                .replace(new RegExp(unit, 'g'), '')
+
+            // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+            return new Function(`return ${numericValue} + '${unit}'`)()
+        } catch {
+            this.logger.error(`Invalid calc ${value}`)
+
+            return value
+        }
+    }
+
+    private processColorMix(fn: FunctionType) {
+        const tokens = fn.arguments
+            .map(arg =>
+                pipe(arg)(
+                    x => this.Processor.CSS.processValue(x),
+                    String,
+                    x => x.trim(),
+                )
+            )
+            .filter(token => !['', ',', 'in', 'srgb', 'rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch'].includes(token.replace(/"/g, '')))
+
+        return `rt.colorMix(${tokens.join(', ')})`
+    }
+}

package/src/metro/processor/index.ts

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

package/src/metro/processor/mq.ts

@@ -0,0 +1,82 @@
+import { MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
+import { ColorScheme, Orientation } from '../../types'
+import { MediaQueryResolver, Platform } from '../types'
+import type { ProcessorBuilder } from './processor'
+
+export class MQ {
+    constructor(private readonly Processor: ProcessorBuilder) {}
+
+    processMediaQueries(mediaQueries: Array<MediaQuery>) {
+        const mq = this.getInitialMediaQueryResolver()
+
+        mediaQueries.forEach(mediaQuery => {
+            const { condition, mediaType } = mediaQuery
+
+            if ([Platform.Android, Platform.iOS, Platform.Native].includes(mediaType as Platform)) {
+                mq.platform = mediaType as Platform
+
+                return
+            }
+
+            if (condition?.type !== 'feature') {
+                return
+            }
+
+            if (condition.value.type === 'range') {
+                this.processWidthMediaQuery(condition.value, mq)
+            }
+
+            if (condition.value.type === 'plain') {
+                this.processPlainMediaQuery(condition.value, mq)
+            }
+        })
+
+        return mq
+    }
+
+    private processWidthMediaQuery(query: QueryFeatureFor_MediaFeatureId & { type: 'range' }, mq: MediaQueryResolver) {
+        const { operator, value } = query
+        const result = this.Processor.CSS.processValue(value)
+
+        if (operator === 'greater-than-equal' || operator === 'greater-than') {
+            mq.minWidth = result
+        }
+
+        if (operator === 'less-than-equal' || operator === 'less-than') {
+            mq.maxWidth = result
+        }
+    }
+
+    private processPlainMediaQuery(query: QueryFeatureFor_MediaFeatureId & { type: 'plain' }, mq: MediaQueryResolver) {
+        const { value, name } = query
+
+        switch (name) {
+            case 'orientation':
+                mq.orientation = value.value as Orientation
+
+                break
+            case 'prefers-color-scheme':
+                mq.colorScheme = value.value as ColorScheme
+
+                break
+            default:
+                break
+        }
+    }
+
+    private getInitialMediaQueryResolver(): MediaQueryResolver {
+        return {
+            minWidth: 0,
+            maxWidth: Number.MAX_VALUE,
+            platform: null,
+            rtl: null,
+            important: false,
+            colorScheme: null,
+            orientation: null,
+            theme: null,
+            active: null,
+            focus: null,
+            disabled: null,
+        }
+    }
+}

package/src/metro/processor/processor.ts

@@ -0,0 +1,249 @@
+import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
+import { Polyfills, ProcessMetaValues } from '../types'
+import { Color } from './color'
+import { CSS } from './css'
+import { Functions } from './functions'
+import { MQ } from './mq'
+import { RN } from './rn'
+import { Units } from './units'
+import { Var } from './var'
+
+export class ProcessorBuilder {
+    stylesheets = {} as Record<string, Array<any>>
+    vars = {} as Record<string, any>
+    scopedVars = {} as Record<string, Record<string, any>>
+    CSS = new CSS(this)
+    RN = new RN(this)
+    Var = new Var(this)
+    MQ = new MQ(this)
+    Color = new Color(this)
+    Units = new Units(this)
+    Functions = new Functions(this)
+    meta = {} as ProcessMetaValues
+
+    private declarationConfig = this.getDeclarationConfig()
+
+    constructor(private readonly themes: Array<string>, readonly polyfills: Polyfills | undefined) {
+        this.vars['--uniwind-em'] = polyfills?.rem ?? 16
+    }
+
+    transform(css: string) {
+        transform({
+            filename: 'tailwind.css',
+            code: Buffer.from(css),
+            visitor: {
+                StyleSheet: styleSheet =>
+                    styleSheet.rules.forEach(rule => {
+                        this.declarationConfig = this.getDeclarationConfig()
+                        this.parseRuleRec(rule)
+                    }),
+            },
+        })
+    }
+
+    private getDeclarationConfig() {
+        return ({
+            className: null as string | null,
+            rtl: null as boolean | null,
+            mediaQueries: [] as Array<MediaQuery>,
+            root: false,
+            theme: null as string | null,
+            active: null as boolean | null,
+            focus: null as boolean | null,
+            disabled: null as boolean | null,
+        })
+    }
+
+    private addDeclaration(declaration: Declaration, important = false) {
+        const isVar = this.declarationConfig.root || this.declarationConfig.className === null
+        const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries)
+        const style = (() => {
+            if (!isVar) {
+                return this.stylesheets[this.declarationConfig.className!]?.at(-1)
+            }
+
+            if (mq.platform !== null) {
+                const platformKey = `__uniwind-platform-${mq.platform}`
+                this.scopedVars[platformKey] ??= {}
+
+                return this.scopedVars[platformKey]
+            }
+
+            if (this.declarationConfig.theme === null) {
+                return this.vars
+            }
+
+            const themeKey = `__uniwind-theme-${this.declarationConfig.theme}`
+            this.scopedVars[themeKey] ??= {}
+
+            return this.scopedVars[themeKey]
+        })()
+
+        if (!isVar) {
+            Object.assign(style, mq)
+            style.importantProperties ??= []
+            style.rtl = this.declarationConfig.rtl
+            style.theme = mq.colorScheme ?? this.declarationConfig.theme
+            style.active = this.declarationConfig.active
+            style.focus = this.declarationConfig.focus
+            style.disabled = this.declarationConfig.disabled
+            this.meta.className = this.declarationConfig.className
+        }
+
+        if (declaration.property === 'unparsed') {
+            style[declaration.value.propertyId.property] = this.CSS.processValue(declaration.value.value)
+
+            if (!isVar && important) {
+                style.importantProperties.push(declaration.value.propertyId.property)
+            }
+
+            return
+        }
+
+        if (declaration.property === 'custom') {
+            style[declaration.value.name] = this.CSS.processValue(declaration.value.value)
+
+            if (!isVar && important) {
+                style.importantProperties.push(declaration.value.name)
+            }
+
+            return
+        }
+
+        style[declaration.property] = this.CSS.processValue(declaration.value)
+
+        if (!isVar && important) {
+            style.importantProperties.push(declaration.property)
+        }
+    }
+
+    private parseRuleRec(rule: Rule<Declaration, MediaQuery>) {
+        if (this.declarationConfig.className !== null) {
+            const lastStyle = this.stylesheets[this.declarationConfig.className]?.at(-1)
+
+            if (lastStyle !== undefined && Object.keys(lastStyle).length > 0) {
+                this.stylesheets[this.declarationConfig.className]?.push({})
+            }
+        }
+
+        if (rule.type === 'style') {
+            rule.value.selectors.forEach(selector => {
+                const [maybeClassNameSelector] = selector
+                const newClassName = maybeClassNameSelector?.type === 'class' ? maybeClassNameSelector.name : undefined
+
+                if (newClassName !== undefined) {
+                    this.declarationConfig.className = newClassName
+                    this.stylesheets[newClassName] ??= []
+                    this.stylesheets[newClassName].push({})
+
+                    rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
+                    rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))
+                    rule.value.rules?.forEach(rule => this.parseRuleRec(rule))
+
+                    return
+                }
+
+                let rtl = null as boolean | null
+                let theme = null as string | null
+                let active = null as boolean | null
+                let focus = null as boolean | null
+                let disabled = null as boolean | null
+
+                selector.forEach(selector => {
+                    if (selector.type === 'pseudo-class' && selector.kind === 'where') {
+                        selector.selectors.forEach(selector => {
+                            selector.forEach(selector => {
+                                if (selector.type === 'class' && this.themes.includes(selector.name)) {
+                                    theme = selector.name
+                                }
+
+                                if (selector.type === 'pseudo-class' && selector.kind === 'dir') {
+                                    rtl = selector.direction === 'rtl'
+                                }
+                            })
+                        })
+                    }
+
+                    if (selector.type === 'pseudo-class' && selector.kind === 'active') {
+                        active = true
+                    }
+
+                    if (selector.type === 'pseudo-class' && selector.kind === 'focus') {
+                        focus = true
+                    }
+
+                    if (selector.type === 'pseudo-class' && selector.kind === 'disabled') {
+                        disabled = true
+                    }
+                })
+
+                if ([rtl, theme, active, focus, disabled].some(Boolean)) {
+                    this.declarationConfig.rtl = rtl
+                    this.declarationConfig.theme = theme
+                    this.declarationConfig.active = active
+                    this.declarationConfig.focus = focus
+                    this.declarationConfig.disabled = disabled
+
+                    rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
+                    rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))
+                    rule.value.rules?.forEach(rule => this.parseRuleRec(rule))
+
+                    this.declarationConfig.rtl = null
+                    this.declarationConfig.theme = null
+                    this.declarationConfig.active = null
+                    this.declarationConfig.focus = null
+                    this.declarationConfig.disabled = null
+
+                    return
+                }
+
+                selector.forEach(selectorToken => {
+                    if (selectorToken.type === 'pseudo-class' && selectorToken.kind === 'root') {
+                        this.declarationConfig.root = true
+
+                        rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
+                        rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))
+                        rule.value.rules?.forEach(rule => this.parseRuleRec(rule))
+                    }
+                })
+            })
+
+            return
+        }
+
+        if (rule.type === 'supports') {
+            rule.value.rules.forEach(rule => this.parseRuleRec(rule))
+
+            return
+        }
+
+        if (rule.type === 'media') {
+            const { mediaQueries } = rule.value.query
+
+            this.declarationConfig.mediaQueries.push(...mediaQueries)
+            rule.value.rules.forEach(rule => {
+                this.parseRuleRec(rule)
+                this.declarationConfig = this.getDeclarationConfig()
+            })
+
+            return
+        }
+
+        if (rule.type === 'layer-block') {
+            rule.value.rules.forEach(rule => this.parseRuleRec(rule))
+
+            return
+        }
+
+        if (rule.type === 'nested-declarations') {
+            rule.value.declarations.declarations?.forEach(declaration => this.addDeclaration(declaration))
+            rule.value.declarations.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))
+
+            return
+        }
+
+        if (rule.type === 'property' && rule.value.initialValue) {
+            this.vars[rule.value.name] = this.CSS.processValue(rule.value.initialValue)
+        }
+    }
+}