@niibase/uniwind 1.6.4 → 1.7.0

package/src/{metro → bundler/adapters/metro}/index.d.ts

@@ -2,11 +2,13 @@ import type { MetroConfig } from 'metro-config'
 
 type Polyfills = {
     rem?: number
+    responsive?: 'text' | 'components' | boolean
 }
 
 type UniwindConfig = {
     cssEntryFile: string
     extraThemes?: Array<string>
+    extraComponents?: Record<string, string>
     dtsFile?: string
     polyfills?: Polyfills
     debug?: boolean

package/src/bundler/adapters/metro/index.ts

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

package/src/{metro/withUniwindConfig.ts → bundler/adapters/metro/metro.ts}

@@ -1,39 +1,24 @@
+import { UniwindBundlerConfig } from '@/bundler/config'
+import type { UniwindConfig } from '@/bundler/types'
+import { Platform } from '@/common/consts'
 import type { MetroConfig } from 'metro-config'
-import { Platform } from '../common/consts'
-import { cacheStore, patchMetroGraphToSupportUncachedModules } from './metro-css-patches'
+import { cacheStore, patchMetroGraphToSupportUncachedModules } from './patches'
 import { nativeResolver, webResolver } from './resolvers'
-import { 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 ?? []),
-    ])
-
+    const bundlerConfig = UniwindBundlerConfig.fromMetroConfig(uniwindConfig)
     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'),
+        transformerPath: require.resolve('./transformer.cjs'),
         transformer: {
             ...config.transformer,
-            uniwind: uniwindConfig,
+            uniwind: bundlerConfig.toMetroConfig(),
         },
         resolver: {
             ...config.resolver,

package/src/{metro/metro-css-patches.ts → bundler/adapters/metro/patches.ts}

@@ -1,5 +1,6 @@
 import type { Graph, Result as GraphResult } from '@expo/metro/metro/DeltaBundler/Graph'
 import FileStoreBase from 'metro-cache/private/stores/FileStore'
+import type * as MetroGraphModule from 'metro/private/DeltaBundler/Graph'
 import type { Options as GraphOptions } from 'metro/private/DeltaBundler/types'
 import os from 'os'
 import path from 'path'
@@ -24,7 +25,7 @@ interface TraverseDependencies {
 }
 
 export const patchMetroGraphToSupportUncachedModules = () => {
-    const { Graph } = require('metro/private/DeltaBundler/Graph') as typeof import('metro/private/DeltaBundler/Graph')
+    const { Graph } = require('metro/private/DeltaBundler/Graph') as typeof MetroGraphModule
 
     // oxlint-disable-next-line @typescript-eslint/unbound-method
     const original_traverseDependencies = Graph.prototype.traverseDependencies as unknown as TraverseDependencies

package/src/{metro → bundler/adapters/metro}/resolvers.ts

@@ -1,6 +1,6 @@
-import { CustomResolutionContext, CustomResolver } from 'metro-resolver'
+import type { CustomResolutionContext, CustomResolver } from 'metro-resolver'
 import { basename, dirname, sep } from 'node:path'
-import { name } from '../../package.json'
+import { name as UNIWIND_PACKAGE_NAME } from '../../../../package.json'
 
 type ResolverConfig = {
     platform: string | null
@@ -48,7 +48,7 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
 
     if (cachedInternalBasePath === null) {
         try {
-            cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`))
+            cachedInternalBasePath = dirname(require.resolve(`${UNIWIND_PACKAGE_NAME}/package.json`))
         } catch {
             cachedInternalBasePath = ''
         }
@@ -69,11 +69,11 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
     }
 
     if (moduleName === 'react-native') {
-        return resolver(context, `${name}/components`, platform)
+        return resolver(context, `${UNIWIND_PACKAGE_NAME}/components`, platform)
     }
 
     if (moduleName === 'react-native-gesture-handler') {
-        return resolver(context, `${name}/components/react-native-gesture-handler`, platform)
+        return resolver(context, `${UNIWIND_PACKAGE_NAME}/components/react-native-gesture-handler`, platform)
     }
 
     if (
@@ -83,7 +83,7 @@ export const nativeResolver = (extraComponents: Record<string, string>) =>
         const module = filename.split('.').at(0)
 
         if (module !== undefined && SUPPORTED_COMPONENTS.includes(module)) {
-            return resolver(context, `${name}/components/${module}`, platform)
+            return resolver(context, `${UNIWIND_PACKAGE_NAME}/components/${module}`, platform)
         }
     }
 
@@ -106,7 +106,7 @@ export const webResolver = (extraComponents: Record<string, string>) =>
 
     if (cachedInternalBasePath === null) {
         try {
-            cachedInternalBasePath = dirname(require.resolve(`${name}/package.json`))
+            cachedInternalBasePath = dirname(require.resolve(`${UNIWIND_PACKAGE_NAME}/package.json`))
         } catch {
             cachedInternalBasePath = ''
         }
@@ -139,5 +139,5 @@ export const webResolver = (extraComponents: Record<string, string>) =>
         return resolution
     }
 
-    return resolver(context, `${name}/components/${module}`, platform)
+    return resolver(context, `${UNIWIND_PACKAGE_NAME}/components/${module}`, platform)
 }

package/src/bundler/adapters/metro/transformer.ts

@@ -0,0 +1,85 @@
+import { UniwindBundlerConfig } from '@/bundler/config'
+import { compileCSS } from '@/bundler/css-compiler'
+import type { UniwindMetroConfig } from '@/bundler/types'
+import { Platform } from '@/common/consts'
+import type * as ExpoMetroConfig from '@expo/metro-config'
+import type * as MetroTransformWorker from 'metro-transform-worker'
+import type { JsTransformerConfig, JsTransformOptions } from 'metro-transform-worker'
+import path from 'path'
+import { name as UNIWIND_PACKAGE_NAME } from '../../../../package.json'
+
+const cssArtifactPath = path.resolve(__dirname, '../../uniwind.css')
+
+let worker: typeof MetroTransformWorker
+
+try {
+    try {
+        const { unstable_transformerPath } = require('@expo/metro-config') as typeof ExpoMetroConfig
+
+        worker = require(unstable_transformerPath)
+    } catch {
+        worker = require('@expo/metro-config/build/transform-worker/transform-worker.js')
+    }
+} catch {
+    worker = require('metro-transform-worker')
+}
+
+export const transform = async (
+    config: JsTransformerConfig & {
+        uniwind: UniwindMetroConfig
+    },
+    projectRoot: string,
+    filePath: string,
+    data: Buffer,
+    options: JsTransformOptions,
+) => {
+    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(projectRoot, filePath)
+
+    if (filePath.endsWith('/components/web/metro-injected.js')) {
+        const bundlerConfig = UniwindBundlerConfig.fromMetroConfig(config.uniwind, Platform.Web)
+
+        data = Buffer.from(
+            [
+                `import { Uniwind } from '${UNIWIND_PACKAGE_NAME}';`,
+                `Uniwind.__reinit(() => ({}), ${bundlerConfig.stringifiedThemes});`,
+            ].join(''),
+            'utf-8',
+        )
+    }
+
+    if (!isCss) {
+        return worker.transform(config, projectRoot, filePath, data, options)
+    }
+
+    const bundlerConfig = UniwindBundlerConfig.fromMetroConfig(config.uniwind, options.platform)
+    await bundlerConfig.generateArtifacts(cssArtifactPath)
+    const virtualCode = await compileCSS(bundlerConfig)
+    const isWeb = bundlerConfig.platform === Platform.Web
+
+    data = Buffer.from(
+        isWeb
+            ? virtualCode
+            : [
+                `const { Uniwind } = require('${UNIWIND_PACKAGE_NAME}');`,
+                `Uniwind.__reinit(rt => ${virtualCode}, ${bundlerConfig.stringifiedThemes});`,
+            ].join(''),
+        'utf-8',
+    )
+
+    const transform: any = await worker.transform(
+        config,
+        projectRoot,
+        `${filePath}${isWeb ? '' : '.js'}`,
+        data,
+        options,
+    )
+
+    transform.output[0].data.css ??= {}
+    transform.output[0].data.css.skipCache = true
+
+    if (!isWeb) {
+        transform.output[0].data.css.code = ''
+    }
+
+    return transform
+}

package/src/{vite → bundler/adapters/vite}/vite.ts

@@ -1,18 +1,10 @@
 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 { UniwindCSSVisitor } from '../css-visitor'
-import { uniq } from '../metro/utils'
-import { buildDtsFile } from '../utils/buildDtsFile'
-import { stringifyThemes } from '../utils/stringifyThemes'
+import { name as UNIWIND_PACKAGE_NAME } from '../../../../package.json'
 
-type UniwindConfig = {
-    cssEntryFile: string
-    extraThemes?: Array<string>
-    dtsFile?: string
-}
+import { UniwindBundlerConfig } from '@/bundler/config'
+import type { UniwindConfig } from '@/bundler/types'
 
 const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
 const componentPath = path.resolve(
@@ -23,18 +15,10 @@ const styleSheetPath = path.resolve(
     dirname,
     '../module/components/web/createOrderedCSSStyleSheet.js',
 )
+const cssArtifactPath = path.resolve(dirname, '../../uniwind.css')
 
-export const uniwind = ({
-    cssEntryFile,
-    extraThemes,
-    dtsFile = 'uniwind-types.d.ts',
-}: UniwindConfig): Plugin => {
-    const themes = uniq([
-        'light',
-        'dark',
-        ...(extraThemes ?? []),
-    ])
-    const stringifiedThemes = stringifyThemes(themes)
+export const uniwind = (config: UniwindConfig): Plugin => {
+    const bundlerConfig = UniwindBundlerConfig.fromViteConfig(config)
 
     return {
         name: 'uniwind',
@@ -52,7 +36,7 @@ export const uniwind = ({
             css: {
                 transformer: 'lightningcss',
                 lightningcss: {
-                    visitor: new UniwindCSSVisitor(themes),
+                    visitor: bundlerConfig.cssVisitor,
                 },
             },
             optimizeDeps: {
@@ -97,17 +81,15 @@ export const uniwind = ({
 
             if (normalizedId.includes(`${UNIWIND_PACKAGE_NAME}/dist`) && normalizedId.includes('config/config.js')) {
                 return {
-                    code: `${code}Uniwind.__reinit(() => ({}), ${stringifiedThemes})`,
+                    code: `${code}\n;Uniwind.__reinit(() => ({}), ${bundlerConfig.stringifiedThemes})`,
                 }
             }
         },
         buildStart: async () => {
-            await buildCSS(themes, cssEntryFile)
-            buildDtsFile(dtsFile, stringifiedThemes)
+            await bundlerConfig.generateArtifacts(cssArtifactPath)
         },
         generateBundle: async () => {
-            await buildCSS(themes, cssEntryFile)
-            buildDtsFile(dtsFile, stringifiedThemes)
+            await bundlerConfig.generateArtifacts(cssArtifactPath)
         },
     }
 }

package/src/{css → bundler/artifacts/css}/extraUtilities.ts

@@ -1,4 +1,4 @@
-import { RNStyle } from '../core/types'
+import type { RNStyle } from '../../../core/types'
 
 const toKebabCase = (str: string) => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
 

package/src/{css → bundler/artifacts/css}/index.ts

@@ -1,16 +1,12 @@
 import fs from 'fs'
-import path from 'path'
 import { EXTRA_UTILITIES_CSS } from './extraUtilities'
 import { INSETS_CSS } from './insets'
 import { OVERWRITE_CSS } from './overwrite'
 import { generateCSSForThemes } from './themes'
 import { VARIANTS_CSS } from './variants'
 
-const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
-
-export const buildCSS = async (themes: Array<string>, input: string) => {
+export const buildCSS = async (themes: Array<string>, input: string, cssFilePath: string) => {
     const themesCSS = await generateCSSForThemes(themes, input)
-    const cssFilePath = path.join(dirname, '../../uniwind.css')
     const oldCSSFile = fs.existsSync(cssFilePath)
         ? fs.readFileSync(cssFilePath, 'utf-8')
         : ''

package/src/{css → bundler/artifacts/css}/themes.ts

@@ -1,8 +1,8 @@
+import { Logger } from '@/bundler/logger'
 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 {

package/src/{utils/buildDtsFile.ts → bundler/artifacts/dts.ts}

@@ -1,15 +1,14 @@
 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" />`,
+        `// NOTE: This file is generated by uniwind and it should not be edited manually.`,
+        `/// <reference types="uniwind/types" />`,
         '',
-        `declare module '${name}' {`,
+        `declare module 'uniwind' {`,
         `    export interface UniwindConfig {`,
         `        themes: readonly ${stringifiedThemes}`,
         `    }`,

package/src/bundler/config.ts

@@ -0,0 +1,84 @@
+import { buildCSS } from '@/bundler/artifacts/css'
+import { buildDtsFile } from '@/bundler/artifacts/dts'
+import { UniwindCSSVisitor } from '@/bundler/css-visitor'
+import type { UniwindConfig, UniwindMetroConfig } from '@/bundler/types'
+import { Platform } from '@/common/consts'
+import { isDefined } from '@/common/utils'
+import path from 'path'
+
+export class UniwindBundlerConfig {
+    static fromMetroConfig(config: UniwindMetroConfig, platform?: string | null) {
+        const getPlatform = () => {
+            if (!isDefined(platform)) {
+                return Platform.Native
+            }
+
+            if (!config.isTV) {
+                return platform as Platform
+            }
+
+            if (platform === Platform.Android) {
+                return Platform.AndroidTV
+            }
+
+            if (platform === Platform.iOS) {
+                return Platform.AppleTV
+            }
+
+            throw new Error(`Platform ${platform} not supported`)
+        }
+
+        if (typeof config === 'undefined') {
+            throw new Error('Uniwind: You need to pass second parameter to withUniwindConfig')
+        }
+
+        if (typeof config.cssEntryFile === 'undefined') {
+            throw new Error(
+                'Uniwind: You need to pass css css entry file to withUniwindConfig, e.g. withUniwindConfig(config, { cssEntryFile: "./global.css" })',
+            )
+        }
+
+        return new UniwindBundlerConfig(config, getPlatform())
+    }
+
+    static fromViteConfig(config: UniwindConfig) {
+        return new UniwindBundlerConfig(config, Platform.Web)
+    }
+
+    constructor(private readonly config: UniwindMetroConfig, readonly platform: Platform) {}
+
+    get cssPath() {
+        return path.join(process.cwd(), this.config.cssEntryFile)
+    }
+
+    get themes() {
+        return Array.from(
+            new Set([
+                'light',
+                'dark',
+                ...this.config.extraThemes ?? [],
+            ]),
+        )
+    }
+
+    get cssVisitor() {
+        return new UniwindCSSVisitor(this)
+    }
+
+    get polyfills() {
+        return this.config.polyfills
+    }
+
+    get stringifiedThemes() {
+        return `[${this.themes.map((theme) => `'${theme}'`).join(', ')}]`
+    }
+
+    toMetroConfig() {
+        return this.config
+    }
+
+    async generateArtifacts(cssArtifactPath: string) {
+        await buildCSS(this.themes, this.config.cssEntryFile, cssArtifactPath)
+        buildDtsFile(this.config.dtsFile ?? 'uniwind-types.d.ts', this.stringifiedThemes)
+    }
+}

package/src/bundler/css-compiler/compileCSS.ts

@@ -0,0 +1,15 @@
+import { Platform } from '@/common/consts'
+import type { UniwindBundlerConfig } from '../config'
+import { compileNativeCSS } from './compileNativeCSS'
+import { compileTailwind } from './compileTailwind'
+import { compileWebCSS } from './compileWebCSS'
+
+export const compileCSS = async (bundlerConfig: UniwindBundlerConfig) => {
+    const tailwindCSS = await compileTailwind(bundlerConfig)
+
+    if (bundlerConfig.platform === Platform.Web) {
+        return compileWebCSS(bundlerConfig, tailwindCSS)
+    }
+
+    return compileNativeCSS(bundlerConfig, tailwindCSS)
+}

package/src/bundler/css-compiler/compileNativeCSS.ts

@@ -0,0 +1,41 @@
+import type { UniwindBundlerConfig } from '../config'
+import { addMetaToStylesTemplate, ProcessorBuilder, serializeJSObject } from '../css-processor'
+
+export const compileNativeCSS = (bundlerConfig: UniwindBundlerConfig, tailwindCSS: string) => {
+    const Processor = new ProcessorBuilder(bundlerConfig)
+
+    Processor.transform(tailwindCSS)
+
+    const stylesheet = serializeJSObject(
+        addMetaToStylesTemplate(Processor, bundlerConfig.platform),
+        (key, value) => `"${key}": ${value}`,
+    )
+    const vars = serializeJSObject(
+        Processor.vars,
+        (key, value) => `get "${key}"() { return ${value} }`,
+    )
+    const keyframes = serializeJSObject(
+        Processor.keyframes,
+        (key, value) => `get "${key}"() { return ${value} }`,
+    )
+    const scopedVars = Object.fromEntries(
+        Object.entries(Processor.scopedVars)
+            .map(([scopedVarsName, scopedVars]) => [
+                scopedVarsName,
+                serializeJSObject(scopedVars, (key, value) => `get "${key}"() { return ${value} }`),
+            ]),
+    )
+    const serializedScopedVars = Object.entries(scopedVars)
+        .map(([scopedVarsName, scopedVars]) => `"${scopedVarsName}": ({ ${scopedVars} }),`)
+        .join('')
+    const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`
+
+    return [
+        '({',
+        `scopedVars: ({ ${serializedScopedVars} }),`,
+        `vars: ({ ${currentColorVar} ${vars} }),`,
+        `stylesheet: ({ ${stylesheet} }),`,
+        `keyframes: ({ ${keyframes} }),`,
+        '})',
+    ].join('')
+}

package/src/bundler/css-compiler/compileTailwind.ts

@@ -0,0 +1,25 @@
+import { compile } from '@tailwindcss/node'
+import { Scanner } from '@tailwindcss/oxide'
+import fs from 'fs'
+import path from 'path'
+import type { UniwindBundlerConfig } from '../config'
+
+export const compileTailwind = async (bundlerConfig: UniwindBundlerConfig) => {
+    const css = await fs.promises.readFile(bundlerConfig.cssPath, 'utf-8')
+    const compiler = await compile(css, {
+        base: path.dirname(bundlerConfig.cssPath),
+        onDependency: () => void 0,
+    })
+    const scanner = new Scanner({
+        sources: [
+            ...compiler.sources,
+            {
+                negated: false,
+                pattern: '**/*',
+                base: path.dirname(bundlerConfig.cssPath),
+            },
+        ],
+    })
+
+    return compiler.build(scanner.scan())
+}

package/src/bundler/css-compiler/compileWebCSS.ts

@@ -0,0 +1,10 @@
+import { transform } from 'lightningcss'
+import type { UniwindBundlerConfig } from '../config'
+
+export const compileWebCSS = (bundlerConfig: UniwindBundlerConfig, tailwindCSS: string) => {
+    return transform({
+        code: Buffer.from(tailwindCSS),
+        filename: 'uniwind.css',
+        visitor: bundlerConfig.cssVisitor,
+    }).code.toString()
+}

package/src/bundler/css-compiler/index.ts

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

package/src/{metro → bundler/css-processor}/addMetaToStylesTemplate.ts

@@ -1,9 +1,9 @@
-import { Platform } from '../common/consts'
-import { isDefined } from '../common/utils'
-import { StyleDependency } from '../types'
-import { ProcessorBuilder } from './processor'
-import { StyleSheetTemplate } from './types'
-import { serialize, toCamelCase } from './utils'
+import { Platform, StyleDependency } from '@/common/consts'
+import { isDefined } from '@/common/utils'
+import type { ProcessorBuilder } from './processor'
+import { serialize } from './serialize'
+import type { StyleSheetTemplate } from './types'
+import { toCamelCase } from './utils'
 
 const extractVarsFromString = (value: string) => {
     const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index)
@@ -29,6 +29,30 @@ const makeSafeForSerialization = (value: any) => {
     return value
 }
 
+const hasThemedVarDependency = (varName: string, Processor: ProcessorBuilder, visited = new Set<string>()): boolean => {
+    if (visited.has(varName)) {
+        return false
+    }
+
+    visited.add(varName)
+
+    const isScopedVar = Object.values(Processor.scopedVars).some(scopedVars => varName in scopedVars)
+
+    if (isScopedVar) {
+        return true
+    }
+
+    const globalVarValue = Processor.vars[varName]
+
+    if (typeof globalVarValue !== 'string') {
+        return false
+    }
+
+    return extractVarsFromString(globalVarValue).some(usedVarName => {
+        return hasThemedVarDependency(usedVarName, Processor, visited)
+    })
+}
+
 export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlatform: Platform) => {
     const stylesheetsEntries = Object.entries(Processor.stylesheets as StyleSheetTemplate)
         .map(([className, stylesPerMediaQuery]) => {
@@ -70,13 +94,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                 const dependencies: Array<StyleDependency> = []
                 const stringifiedEntries = JSON.stringify(entries)
                 const usedVars = extractVarsFromString(stringifiedEntries)
-                const isUsingThemedVar = usedVars.some(usedVarName => {
-                    return Object.values(Processor.scopedVars).some(scopedVars => {
-                        const scopedVarsNames = Object.keys(scopedVars)
-
-                        return scopedVarsNames.includes(usedVarName)
-                    })
-                })
+                const isUsingThemedVar = usedVars.some(usedVarName => hasThemedVarDependency(usedVarName, Processor))
 
                 if (usedVars.length > 0) {
                     dependencies.push(StyleDependency.Variables)
@@ -97,6 +115,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                 if (
                     Number(minWidth) !== 0
                     || Number(maxWidth) !== Number.MAX_VALUE
+                    || stringifiedEntries.includes('rt.makeResponsive')
                     || stringifiedEntries.includes('rt.screen')
                 ) {
                     dependencies.push(StyleDependency.Dimensions)
@@ -126,7 +145,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     focus,
                     disabled,
                     importantProperties: importantProperties
-                        ?.map(property => property.startsWith('--') ? property : toCamelCase)
+                        ?.map(property => property.startsWith('--') ? property : toCamelCase(property))
                         .map(makeSafeForSerialization) ?? [],
                     dataAttributes,
                     complexity: [

package/src/{metro/processor → bundler/css-processor}/animation.ts

@@ -1,11 +1,11 @@
 import type { TokenOrValue } from 'lightningcss'
-import type { DeclarationValues } from '../types'
-import { toCamelCase } from '../utils'
 
-import {
+import type {
     CSSAnimationDelay,
 } from 'react-native-reanimated'
-import { ParametrizedTimingFunction } from 'react-native-reanimated/lib/typescript/css/easing'
+import type { ParametrizedTimingFunction } from 'react-native-reanimated/lib/typescript/css/easing'
+import type { DeclarationValues } from './types'
+import { toCamelCase } from './utils'
 
 type GetProcessedValue = (value: DeclarationValues) => any
 

package/src/{metro/processor → bundler/css-processor}/color.ts

@@ -1,8 +1,9 @@
-import { Color as ColorType, converter, formatHex, formatHex8, parse } from 'culori'
-import { CssColor, UnresolvedColor } from 'lightningcss'
+import type { Color as ColorType } from 'culori'
+import { converter, formatHex, formatHex8, parse } from 'culori'
+import type { CssColor, UnresolvedColor } from 'lightningcss'
 import { Logger } from '../logger'
-import { pipe } from '../utils'
 import type { ProcessorBuilder } from './processor'
+import { pipe } from './utils'
 
 export class Color {
     private toRgb = converter('rgb')