@niibase/uniwind 1.0.0

package/src/metro/utils/serialize.ts

@@ -0,0 +1,116 @@
+import { Logger } from '../logger'
+import { addMissingSpaces, isNumber, isValidJSValue, pipe, roundToPrecision, smartSplit } from './common'
+
+const parseStringValue = (value: string) => {
+    if (isValidJSValue(value)) {
+        return value
+    }
+
+    if (value.startsWith('function')) {
+        return value
+    }
+
+    const tokens = smartSplit(addMissingSpaces(value))
+    const parsedTokens = tokens.map(token => {
+        // String literals
+        if (token.startsWith('"')) {
+            return token.replace(/"/g, '')
+        }
+
+        // Plain words
+        if (/^[a-z]+$/i.test(token.replace(/,/g, ''))) {
+            return token
+        }
+
+        // Numbers
+        if (isNumber(token)) {
+            return token
+        }
+
+        // Expressions that need to be wrapped with ${}
+        const endsWithComma = token.endsWith(',')
+
+        return [
+            '${',
+            endsWithComma ? token.slice(0, -1) : token,
+            '}',
+            endsWithComma ? ',' : '',
+        ].join('')
+    })
+
+    return [
+        '`',
+        parsedTokens.join(' '),
+        '`',
+    ].join('')
+}
+
+export const serialize = (value: any): string => {
+    const typeOfValue = typeof value
+
+    switch (typeOfValue) {
+        case 'string':
+            return parseStringValue(value)
+        case 'symbol':
+            return String(value)
+        case 'number':
+        case 'bigint':
+            return String(roundToPrecision(value, 2))
+        case 'boolean':
+            return value.toString()
+        case 'object':
+            if (value === null) {
+                return 'null'
+            }
+
+            if (Array.isArray(value)) {
+                return [
+                    '[',
+                    value.map(serialize).join(', '),
+                    ']',
+                ].join('')
+            }
+
+            return [
+                '{',
+                Object.entries(value).map(([key, val]) => {
+                    const serializedKey = isNumber(key) ? key : `"${key}"`
+
+                    return `${serializedKey}: ${serialize(val)}`
+                }).join(', '),
+                '}',
+            ].join('')
+        case 'undefined':
+            return 'undefined'
+        case 'function':
+            return ''
+        default:
+            typeOfValue satisfies never
+            return ''
+    }
+}
+
+export const serializeJSObject = (obj: Record<string, any>, serializer: (key: string, value: string) => string) => {
+    const serializedObject = pipe(obj)(
+        Object.entries,
+        entries => entries.map(([key, value]) => serializer(key, serialize(value))),
+        entries => entries.join(','),
+        result => {
+            if (result === '') {
+                return ''
+            }
+
+            return `${result},`
+        },
+    )
+
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+        new Function(`function validateJS() { const obj = ({ ${serializedObject} }) }`)
+    } catch {
+        Logger.error('Failed to serialize javascript object')
+        return ''
+    }
+
+    return serializedObject
+}

package/src/metro/withUniwindConfig.ts

@@ -0,0 +1,60 @@
+import type { MetroConfig } from 'metro-config'
+import { cacheStore, patchMetroGraphToSupportUncachedModules } from './metro-css-patches'
+import { nativeResolver, webResolver } from './resolvers'
+import { Platform, UniwindConfig } from './types'
+import { uniq } from './utils'
+
+export const withUniwindConfig = <T extends MetroConfig>(
+    config: T,
+    uniwindConfig: UniwindConfig,
+): T => {
+    uniwindConfig.themes = uniq([
+        'light',
+        'dark',
+        ...(uniwindConfig.extraThemes ?? []),
+    ])
+
+    patchMetroGraphToSupportUncachedModules()
+
+    if (typeof uniwindConfig === 'undefined') {
+        throw new Error('Uniwind: You need to pass second parameter to withUniwindConfig')
+    }
+
+    if (typeof uniwindConfig.cssEntryFile === 'undefined') {
+        throw new Error(
+            'Uniwind: You need to pass css css entry file to withUniwindConfig, e.g. withUniwindConfig(config, { cssEntryFile: "./global.css" })',
+        )
+    }
+
+    return {
+        ...config,
+        cacheStores: [cacheStore],
+        transformerPath: require.resolve('./metro-transformer.cjs'),
+        transformer: {
+            ...config.transformer,
+            uniwind: uniwindConfig,
+        },
+        resolver: {
+            ...config.resolver,
+            sourceExts: [
+                ...config.resolver?.sourceExts ?? [],
+                'css',
+            ],
+            assetExts: config.resolver?.assetExts?.filter(
+                ext => ext !== 'css',
+            ),
+            resolveRequest: (context, moduleName, platform) => {
+                const resolver = config.resolver?.resolveRequest ?? context.resolveRequest
+                const platformResolver = platform === Platform.Web ? webResolver : nativeResolver
+                const resolved = platformResolver({
+                    context,
+                    moduleName,
+                    platform,
+                    resolver,
+                })
+
+                return resolved
+            },
+        },
+    }
+}

package/src/types.ts

@@ -0,0 +1,24 @@
+export enum StyleDependency {
+    ColorScheme = 1,
+    Theme = 2,
+    Dimensions = 3,
+    Orientation = 4,
+    Insets = 5,
+    FontScale = 6,
+    Rtl = 7,
+    AdaptiveThemes = 8,
+    Variables = 9,
+}
+
+export const enum Orientation {
+    Portrait = 'portrait',
+    Landscape = 'landscape',
+}
+
+export const enum ColorScheme {
+    Light = 'light',
+    Dark = 'dark',
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface UniwindConfig {}

package/src/utils/buildDtsFile.ts

@@ -0,0 +1,27 @@
+import fs from 'fs'
+import { name } from '../../package.json'
+
+export const buildDtsFile = (dtsPath: string, stringifiedThemes: string) => {
+    const oldDtsContent = fs.existsSync(dtsPath)
+        ? fs.readFileSync(dtsPath, 'utf-8')
+        : ''
+    const dtsContent = [
+        `// NOTE: This file is generated by ${name} and it should not be edited manually.`,
+        `/// <reference types="${name}/types" />`,
+        '',
+        `declare module '${name}' {`,
+        `    export interface UniwindConfig {`,
+        `        themes: readonly ${stringifiedThemes}`,
+        `    }`,
+        `}`,
+        '',
+        `export {}`,
+        '',
+    ].join('\n')
+
+    if (oldDtsContent === dtsContent) {
+        return
+    }
+
+    fs.writeFileSync(dtsPath, dtsContent)
+}

package/src/utils/stringifyThemes.ts

@@ -0,0 +1 @@
+export const stringifyThemes = (themes: Array<string> = []) => `[${themes.map((theme) => `'${theme}'`).join(', ')}]`

package/src/vite/index.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from 'vite'
+
+type UniwindConfig = {
+    cssEntryFile: string
+    extraThemes?: Array<string>
+    dtsFile?: string
+}
+
+export declare function uniwind(config: UniwindConfig): Plugin

package/src/vite/index.ts

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

package/src/vite/vite.ts

@@ -0,0 +1,86 @@
+import { normalizePath } from '@tailwindcss/node'
+import path from 'path'
+import type { Plugin } from 'vite'
+import { name as UNIWIND_PACKAGE_NAME } from '../../package.json'
+import { buildCSS } from '../css'
+import { processFunctions } from '../css/processFunctions'
+import { uniq } from '../metro/utils'
+import { buildDtsFile } from '../utils/buildDtsFile'
+import { stringifyThemes } from '../utils/stringifyThemes'
+
+type UniwindConfig = {
+    cssEntryFile: string
+    extraThemes?: Array<string>
+    dtsFile?: string
+}
+
+const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
+const componentPath = path.resolve(
+    dirname,
+    '../module/components/web/index.js',
+)
+
+export const uniwind = ({
+    cssEntryFile,
+    extraThemes,
+    dtsFile = 'uniwind-types.d.ts',
+}: UniwindConfig): Plugin => {
+    const themes = uniq([
+        'light',
+        'dark',
+        ...(extraThemes ?? []),
+    ])
+    const stringifiedThemes = stringifyThemes(themes)
+
+    return {
+        name: 'uniwind',
+        config: () => ({
+            css: {
+                transformer: 'lightningcss',
+                lightningcss: {
+                    visitor: {
+                        Function: processFunctions,
+                    },
+                },
+            },
+            optimizeDeps: {
+                exclude: [UNIWIND_PACKAGE_NAME, 'react-native'],
+            },
+            resolve: {
+                alias: [
+                    {
+                        find: /^react-native$/,
+                        replacement: componentPath,
+                        customResolver: {
+                            resolveId(_, importer) {
+                                // Check if import comes from uniwind
+                                if (importer !== undefined && normalizePath(importer).includes(`${UNIWIND_PACKAGE_NAME}/dist`)) {
+                                    return this.resolve('react-native-web')
+                                }
+
+                                return componentPath
+                            },
+                        },
+                    },
+                ],
+            },
+        }),
+        transform: (code, id) => {
+            const normalizedId = normalizePath(id)
+
+            if (normalizedId.includes(`${UNIWIND_PACKAGE_NAME}/dist`) && normalizedId.includes('config/config.js')) {
+                return {
+                    code: `${code}Uniwind.__reinit(() => ({}), ${stringifiedThemes})`,
+                }
+            }
+        },
+        buildStart: async () => {
+            await buildCSS(themes, cssEntryFile)
+            buildDtsFile(dtsFile, stringifiedThemes)
+        },
+        generateBundle: async () => {
+            await buildCSS(themes, cssEntryFile)
+            buildDtsFile(dtsFile, stringifiedThemes)
+        },
+    }
+}

package/types.d.ts

@@ -0,0 +1,109 @@
+import {
+    ScrollViewProps,
+    ScrollViewPropsAndroid,
+    ScrollViewPropsIOS,
+    Touchable,
+    VirtualizedListProps,
+} from 'react-native'
+
+declare module '@react-native/virtualized-lists' {
+    export interface VirtualizedListWithoutRenderItemProps<ItemT> extends ScrollViewProps {
+        ListFooterComponentClassName?: string
+        ListHeaderComponentClassName?: string
+    }
+}
+
+declare module 'react-native' {
+    interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
+        columnWrapperClassName?: string
+        contentContainerClassName?: string
+    }
+
+    interface ImageBackgroundProps extends ImagePropsBase {
+        imageClassName?: string
+        tintColorClassName?: string
+    }
+
+    interface ImagePropsBase {
+        className?: string
+        tintColorClassName?: string
+    }
+
+    interface InputAccessoryViewProps {
+        className?: string
+    }
+
+    interface KeyboardAvoidingViewProps extends ViewProps {
+        contentContainerClassName?: string
+    }
+
+    interface ScrollViewProps extends ViewProps, ScrollViewPropsIOS, ScrollViewPropsAndroid, Touchable {
+        contentContainerClassName?: string
+        endFillColorClassName?: string
+    }
+
+    interface SectionListProps<ItemT> extends VirtualizedListProps<ItemT> {
+        contentContainerClassName?: string
+    }
+
+    interface SwitchProps {
+        className?: never
+        ios_backgroundColorClassName?: string
+        thumbColorClassName?: string
+        trackColorOnClassName?: string
+        trackColorOffClassName?: string
+    }
+
+    interface TextProps {
+        className?: string
+        selectionColorClassName?: string
+    }
+
+    interface TouchableWithoutFeedbackProps {
+        className?: string
+    }
+
+    interface ViewProps {
+        className?: string
+    }
+
+    interface PressableProps {
+        className?: string
+    }
+
+    interface TextInputProps {
+        className?: string
+        cursorColorClassName?: string
+        underlineColorAndroidClassName?: string
+        placeholderTextColorClassName?: string
+        selectionColorClassName?: string
+        selectionHandleColorClassName?: string
+    }
+
+    interface RefreshControlProps {
+        colorsClassName?: string
+        progressBackgroundColorClassName?: string
+        tintColorClassName?: string
+        titleColorClassName?: string
+    }
+
+    interface TouchableHighlightProps {
+        underlayColorClassName?: string
+    }
+
+    interface ActivityIndicatorProps {
+        colorClassName?: string
+    }
+
+    interface ModalBaseProps {
+        backdropColorClassName?: string
+    }
+
+    interface ButtonProps {
+        colorClassName?: string
+    }
+
+    interface InputAccessoryViewProps {
+        backgroundColorClassName?: string
+    }
+}

package/uniwind.css

@@ -0,0 +1,262 @@
+@custom-variant ios (@media ios);
+@custom-variant android (@media android);
+@custom-variant web (html &);
+@custom-variant native (@media native);
+
+@utility h-screen-safe {
+    height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+}
+
+@utility m-safe {
+    margin-top: env(safe-area-inset-top);
+    margin-bottom: env(safe-area-inset-bottom);
+    margin-left: env(safe-area-inset-left);
+    margin-right: env(safe-area-inset-right);
+}
+
+@utility m-safe-or-* {
+    margin-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    margin-top: max(env(safe-area-inset-top), --value([length]));
+    margin-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    margin-bottom: max(env(safe-area-inset-bottom), --value([length]));
+    margin-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    margin-left: max(env(safe-area-inset-left), --value([length]));
+    margin-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    margin-right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility m-safe-offset-* {
+    margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    margin-top: calc(env(safe-area-inset-top) + --value([length]));
+    margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    margin-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+    margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    margin-left: calc(env(safe-area-inset-left) + --value([length]));
+    margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    margin-right: calc(env(safe-area-inset-right) + --value([length]));
+}
+    
+@utility mx-safe {
+    margin-left: env(safe-area-inset-left);
+    margin-right: env(safe-area-inset-right);
+}
+
+@utility mx-safe-or-* {
+    margin-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    margin-left: max(env(safe-area-inset-left), --value([length]));
+    margin-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    margin-right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility mx-safe-offset-* {
+    margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    margin-left: calc(env(safe-area-inset-left) + --value([length]));
+    margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    margin-right: calc(env(safe-area-inset-right) + --value([length]));
+}
+    
+@utility my-safe {
+    margin-top: env(safe-area-inset-top);
+    margin-bottom: env(safe-area-inset-bottom);
+}
+
+@utility my-safe-or-* {
+    margin-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    margin-top: max(env(safe-area-inset-top), --value([length]));
+    margin-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    margin-bottom: max(env(safe-area-inset-bottom), --value([length]));
+}
+
+@utility my-safe-offset-* {
+    margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    margin-top: calc(env(safe-area-inset-top) + --value([length]));
+    margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    margin-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+}
+    
+@utility mt-safe {
+    margin-top: env(safe-area-inset-top);
+}
+
+@utility mt-safe-or-* {
+    margin-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    margin-top: max(env(safe-area-inset-top), --value([length]));
+}
+
+@utility mt-safe-offset-* {
+    margin-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    margin-top: calc(env(safe-area-inset-top) + --value([length]));
+}
+    
+@utility mb-safe {
+    margin-bottom: env(safe-area-inset-bottom);
+}
+
+@utility mb-safe-or-* {
+    margin-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    margin-bottom: max(env(safe-area-inset-bottom), --value([length]));
+}
+
+@utility mb-safe-offset-* {
+    margin-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    margin-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+}
+    
+@utility ml-safe {
+    margin-left: env(safe-area-inset-left);
+}
+
+@utility ml-safe-or-* {
+    margin-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    margin-left: max(env(safe-area-inset-left), --value([length]));
+}
+
+@utility ml-safe-offset-* {
+    margin-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    margin-left: calc(env(safe-area-inset-left) + --value([length]));
+}
+    
+@utility mr-safe {
+    margin-right: env(safe-area-inset-right);
+}
+
+@utility mr-safe-or-* {
+    margin-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    margin-right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility mr-safe-offset-* {
+    margin-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    margin-right: calc(env(safe-area-inset-right) + --value([length]));
+}
+    
+@utility p-safe {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+}
+
+@utility p-safe-or-* {
+    padding-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    padding-top: max(env(safe-area-inset-top), --value([length]));
+    padding-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    padding-bottom: max(env(safe-area-inset-bottom), --value([length]));
+    padding-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    padding-left: max(env(safe-area-inset-left), --value([length]));
+    padding-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    padding-right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility p-safe-offset-* {
+    padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    padding-top: calc(env(safe-area-inset-top) + --value([length]));
+    padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    padding-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+    padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    padding-left: calc(env(safe-area-inset-left) + --value([length]));
+    padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    padding-right: calc(env(safe-area-inset-right) + --value([length]));
+}
+    
+@utility px-safe {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+}
+
+@utility px-safe-or-* {
+    padding-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    padding-left: max(env(safe-area-inset-left), --value([length]));
+    padding-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    padding-right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility px-safe-offset-* {
+    padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    padding-left: calc(env(safe-area-inset-left) + --value([length]));
+    padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    padding-right: calc(env(safe-area-inset-right) + --value([length]));
+}
+    
+@utility py-safe {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+@utility py-safe-or-* {
+    padding-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    padding-top: max(env(safe-area-inset-top), --value([length]));
+    padding-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    padding-bottom: max(env(safe-area-inset-bottom), --value([length]));
+}
+
+@utility py-safe-offset-* {
+    padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    padding-top: calc(env(safe-area-inset-top) + --value([length]));
+    padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    padding-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+}
+    
+@utility pt-safe {
+    padding-top: env(safe-area-inset-top);
+}
+
+@utility pt-safe-or-* {
+    padding-top: max(env(safe-area-inset-top), --spacing(--value(integer)));
+    padding-top: max(env(safe-area-inset-top), --value([length]));
+}
+
+@utility pt-safe-offset-* {
+    padding-top: calc(env(safe-area-inset-top) + --spacing(--value(integer)));
+    padding-top: calc(env(safe-area-inset-top) + --value([length]));
+}
+    
+@utility pb-safe {
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+@utility pb-safe-or-* {
+    padding-bottom: max(env(safe-area-inset-bottom), --spacing(--value(integer)));
+    padding-bottom: max(env(safe-area-inset-bottom), --value([length]));
+}
+
+@utility pb-safe-offset-* {
+    padding-bottom: calc(env(safe-area-inset-bottom) + --spacing(--value(integer)));
+    padding-bottom: calc(env(safe-area-inset-bottom) + --value([length]));
+}
+    
+@utility pl-safe {
+    padding-left: env(safe-area-inset-left);
+}
+
+@utility pl-safe-or-* {
+    padding-left: max(env(safe-area-inset-left), --spacing(--value(integer)));
+    padding-left: max(env(safe-area-inset-left), --value([length]));
+}
+
+@utility pl-safe-offset-* {
+    padding-left: calc(env(safe-area-inset-left) + --spacing(--value(integer)));
+    padding-left: calc(env(safe-area-inset-left) + --value([length]));
+}
+    
+@utility pr-safe {
+    padding-right: env(safe-area-inset-right);
+}
+
+@utility pr-safe-or-* {
+    padding-right: max(env(safe-area-inset-right), --spacing(--value(integer)));
+    padding-right: max(env(safe-area-inset-right), --value([length]));
+}
+
+@utility pr-safe-offset-* {
+    padding-right: calc(env(safe-area-inset-right) + --spacing(--value(integer)));
+    padding-right: calc(env(safe-area-inset-right) + --value([length]));
+}
+
+@custom-variant light (&:where(.light, .light *));
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant premium (&:where(.premium, .premium *));
+
+@theme {
+    --color-background: unset;
+}