@niibase/uniwind 1.6.1 → 1.6.3

package/dist/vite/index.mjs

@@ -1,7 +1,7 @@
 import { normalizePath } from '@tailwindcss/node';
 import path from 'path';
-import { u as uniq, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
-import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.C-rHhHOg.mjs';
+import { u as uniq, n as name } from '../shared/uniwind.PtWWxxnh.mjs';
+import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.BGiqYvxb.mjs';
 import 'fs';
 import 'lightningcss';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.6.1",
+    "version": "1.6.3",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -12,8 +12,8 @@
         "precommit": "bun lint",
         "build": "unbuild",
         "check:typescript": "tsc --noEmit",
-        "lint": "eslint src",
-        "lint:fix": "eslint src --fix",
+        "lint": "oxlint src",
+        "lint:fix": "oxlint src --fix",
         "format": "dprint fmt",
         "prepublishOnly": "bun run build",
         "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",

package/src/common/utils.ts

@@ -0,0 +1,9 @@
+export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
+
+export const arrayEquals = <T>(a: Array<T>, b: Array<T>) => {
+    if (a.length !== b.length) {
+        return false
+    }
+
+    return a.every((value, index) => value === b[index])
+}

package/src/components/native/ActivityIndicator.tsx

@@ -1,10 +1,11 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
     const { Component, style } = useStyle(RNActivityIndicator, props.className, props, { isPressed: Boolean(props.animating) })
-    const color = useStyle(props.colorClassName, props).accentColor
+    const color = useAccentColor(props.colorClassName, props)
 
     return (
         <Component

package/src/components/native/Button.tsx

@@ -1,9 +1,9 @@
 import { Button as RNButton, ButtonProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
-import { useStyle } from './useStyle'
+import { useAccentColor } from './useAccentColor'
 
 export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
-    const color = useStyle(props.colorClassName, props).accentColor
+    const color = useAccentColor(props.colorClassName, props)
 
     return (
         <RNButton

package/src/components/native/FlatList.tsx

@@ -1,5 +1,6 @@
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
@@ -8,7 +9,7 @@ export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProp
     const styleContentContainer = useStyle(props.contentContainerClassName, props)
     const styleListFooterComponent = useStyle(props.ListFooterComponentClassName, props)
     const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
     const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
 
     return (

package/src/components/native/Image.tsx

@@ -1,10 +1,11 @@
 import { Image as RNImage, ImageProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
     const { Component, style } = useStyle(RNImage, props.className, props)
-    const tintColor = useStyle(props.tintColorClassName, props).accentColor
+    const tintColor = useAccentColor(props.tintColorClassName, props)
 
     return (
         <Component

package/src/components/native/ImageBackground.tsx

@@ -1,11 +1,12 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
     const { Component, style } = useStyle(RNImageBackground, props.className, props)
     const imageStyle = useStyle(props.imageClassName, props)
-    const tintColor = useStyle(props.tintColorClassName, props).accentColor
+    const tintColor = useAccentColor(props.tintColorClassName, props)
 
     return (
         <Component

package/src/components/native/InputAccessoryView.tsx

@@ -1,13 +1,14 @@
 import { ForwardedRef } from 'react'
 import { InputAccessoryView as RNInputAccessoryView, InputAccessoryViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const InputAccessoryView = copyComponentProperties(
     RNInputAccessoryView,
     (props: InputAccessoryViewProps & { ref?: ForwardedRef<RNInputAccessoryView> }) => {
         const { Component, style } = useStyle(RNInputAccessoryView, props.className, props)
-        const backgroundColor = useStyle(props.backgroundColorClassName, props).accentColor
+        const backgroundColor = useAccentColor(props.backgroundColorClassName, props)
 
         return (
             <Component

package/src/components/native/Modal.tsx

@@ -1,10 +1,11 @@
 import { Modal as RNModal, ModalProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
     const { Component, style } = useStyle(RNModal, props.className, props)
-    const backdropColor = useStyle(props.backdropColorClassName, props).accentColor
+    const backdropColor = useAccentColor(props.backdropColorClassName, props)
 
     return (
         <Component

package/src/components/native/RefreshControl.tsx

@@ -1,15 +1,16 @@
 import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
     const { Component, style } = useStyle(RNRefreshControl, props.className, props, {
         isPressed: Boolean(props.refreshing),
     })
-    const color = useStyle(props.colorsClassName, props).accentColor
-    const tintColor = useStyle(props.tintColorClassName, props).accentColor
-    const titleColor = useStyle(props.titleColorClassName, props).accentColor
-    const progressBackgroundColor = useStyle(props.progressBackgroundColorClassName, props).accentColor
+    const color = useAccentColor(props.colorsClassName, props)
+    const tintColor = useAccentColor(props.tintColorClassName, props)
+    const titleColor = useAccentColor(props.titleColorClassName, props)
+    const progressBackgroundColor = useAccentColor(props.progressBackgroundColorClassName, props)
 
     return (
         <Component

package/src/components/native/ScrollView.tsx

@@ -1,11 +1,12 @@
 import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollViewProps) => {
     const { Component, style } = useStyle(RNScrollView, props.className, props)
     const contentContainerStyle = useStyle(props.contentContainerClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
 
     return (
         <Component

package/src/components/native/SectionList.tsx

@@ -1,5 +1,6 @@
 import { SectionList as RNSectionList, SectionListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
@@ -7,7 +8,7 @@ export const SectionList = copyComponentProperties(RNSectionList, (props: Sectio
     const contentContainerStyle = useStyle(props.contentContainerClassName, props)
     const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props)
     const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
 
     return (
         <Component

package/src/components/native/Switch.tsx

@@ -1,6 +1,7 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
@@ -9,10 +10,10 @@ export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) =>
         isPressed: Boolean(props.value),
     } satisfies ComponentState
     const { Component, style } = useStyle(RNSwitch, props.className, props, state)
-    const trackColorOn = useStyle(props.trackColorOnClassName, props, state).accentColor
-    const trackColorOff = useStyle(props.trackColorOffClassName, props, state).accentColor
-    const thumbColor = useStyle(props.thumbColorClassName, props, state).accentColor
-    const ios_backgroundColor = useStyle(props.ios_backgroundColorClassName, props, state).accentColor
+    const trackColorOn = useAccentColor(props.trackColorOnClassName, props, state)
+    const trackColorOff = useAccentColor(props.trackColorOffClassName, props, state)
+    const thumbColor = useAccentColor(props.thumbColorClassName, props, state)
+    const ios_backgroundColor = useAccentColor(props.ios_backgroundColorClassName, props, state)
 
     return (
         <Component

package/src/components/native/Text.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Text as RNText, TextProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 type StyleWithWebkitLineClamp = {
@@ -15,7 +16,7 @@ export const Text = copyComponentProperties(RNText, (props: TextProps) => {
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
     const { Component, style } = useStyle(RNText, props.className, props, state)
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
 
     return (
         <Component

package/src/components/native/TextInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
@@ -13,11 +14,11 @@ export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputP
         isPressed,
     } satisfies ComponentState
     const { Component, style } = useStyle(RNTextInput, props.className, props, state)
-    const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
-    const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor
-    const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor
-    const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor
+    const cursorColor = useAccentColor(props.cursorColorClassName, props, state)
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
+    const placeholderTextColor = useAccentColor(props.placeholderTextColorClassName, props, state)
+    const selectionHandleColor = useAccentColor(props.selectionHandleColorClassName, props, state)
+    const underlineColorAndroid = useAccentColor(props.underlineColorAndroidClassName, props, state)
 
     return (
         <Component

package/src/components/native/TouchableHighlight.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
@@ -13,7 +14,7 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
         isFocused,
     } satisfies ComponentState
     const { Component, style } = useStyle(RNTouchableHighlight, props.className, props, state)
-    const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor
+    const underlayColor = useAccentColor(props.underlayColorClassName, props, state)
 
     return (
         <Component

package/src/components/native/VirtualizedList.tsx

@@ -1,5 +1,6 @@
 import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props: VirtualizedListProps<unknown>) => {
@@ -7,7 +8,7 @@ export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props
     const contentContainerStyle = useStyle(props.contentContainerClassName, props)
     const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props)
     const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
 
     return (
         <Component

package/src/components/native/useAccentColor.ts

@@ -0,0 +1,19 @@
+import { isDefined } from '../../common/utils'
+import { Logger } from '../../core/logger'
+import { ComponentState } from '../../core/types'
+import { useStyle } from './useStyle'
+
+let warnedOnce = false
+
+export const useAccentColor = (className: string | undefined, componentProps: Record<string, any>, state?: ComponentState) => {
+    const styles = useStyle(className, componentProps, state)
+
+    if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && styles.accentColor === undefined) {
+        warnedOnce = true
+        Logger.warn(
+            `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+        )
+    }
+
+    return styles.accentColor
+}

package/src/components/react-native-gesture-handler/native/FlatList.tsx

@@ -1,5 +1,6 @@
 import { FlatListProps } from 'react-native'
 import { FlatList as RNGHFlatList } from 'react-native-gesture-handler'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
@@ -9,7 +10,7 @@ export const FlatList = copyComponentProperties(RNGHFlatList, (props: FlatListPr
     const styleContentContainer = useStyle(props.contentContainerClassName, props)
     const styleListFooterComponent = useStyle(props.ListFooterComponentClassName, props)
     const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
     const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
 
     return (

package/src/components/react-native-gesture-handler/native/RefreshControl.tsx

@@ -1,14 +1,15 @@
 import { RefreshControlProps } from 'react-native'
 import { RefreshControl as RNGHRefreshControl } from 'react-native-gesture-handler'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
 export const RefreshControl = copyComponentProperties(RNGHRefreshControl, (props: RefreshControlProps) => {
     const style = useStyle(props.className, props)
-    const color = useStyle(props.colorsClassName, props).accentColor
-    const tintColor = useStyle(props.tintColorClassName, props).accentColor
-    const titleColor = useStyle(props.titleColorClassName, props).accentColor
-    const progressBackgroundColor = useStyle(props.progressBackgroundColorClassName, props).accentColor
+    const color = useAccentColor(props.colorsClassName, props)
+    const tintColor = useAccentColor(props.tintColorClassName, props)
+    const titleColor = useAccentColor(props.titleColorClassName, props)
+    const progressBackgroundColor = useAccentColor(props.progressBackgroundColorClassName, props)
 
     return (
         <RNGHRefreshControl

package/src/components/react-native-gesture-handler/native/Text.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TextProps } from 'react-native'
 import { Text as RNGHText } from 'react-native-gesture-handler'
 import { ComponentState } from '../../../core/types'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
@@ -16,7 +17,7 @@ export const Text = copyComponentProperties(RNGHText, (props: TextProps) => {
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
     const style = useStyle(props.className, props, state)
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
 
     return (
         <RNGHText

package/src/components/react-native-gesture-handler/native/TextInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TextInputProps } from 'react-native'
 import { TextInput as RNGHTextInput } from 'react-native-gesture-handler'
 import { ComponentState } from '../../../core/types'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
@@ -15,10 +16,10 @@ export const TextInput = copyComponentProperties(RNGHTextInput, (props: TextInpu
     } satisfies ComponentState
     const style = useStyle(props.className, props, state)
     const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
-    const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor
-    const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor
-    const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
+    const placeholderTextColor = useAccentColor(props.placeholderTextColorClassName, props, state)
+    const selectionHandleColor = useAccentColor(props.selectionHandleColorClassName, props, state)
+    const underlineColorAndroid = useAccentColor(props.underlineColorAndroidClassName, props, state)
 
     return (
         <RNGHTextInput

package/src/components/web/ActivityIndicator.tsx

@@ -1,8 +1,8 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
     const color = useUniwindAccent(props.colorClassName)

package/src/components/web/Button.tsx

@@ -1,7 +1,7 @@
 import { Button as RNButton, ButtonProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
     const color = useUniwindAccent(props.colorClassName)

package/src/components/web/Image.tsx

@@ -1,8 +1,9 @@
 import { Image as RNImage, ImageProps } from 'react-native'
-import { useResolveClassNames, useUniwindAccent } from '../../hooks'
+import { useResolveClassNames } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
     const tintColor = useUniwindAccent(props.tintColorClassName)

package/src/components/web/ImageBackground.tsx

@@ -1,8 +1,8 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
     const tintColor = useUniwindAccent(props.tintColorClassName)

package/src/components/web/Switch.tsx

@@ -1,8 +1,8 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
     const trackColorOn = useUniwindAccent(props.trackColorOnClassName)

package/src/components/web/TextInput.tsx

@@ -1,8 +1,8 @@
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
     const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName)

package/src/components/web/TouchableHighlight.tsx

@@ -1,8 +1,8 @@
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
     const underlayColor = useUniwindAccent(props.underlayColorClassName)

package/src/components/web/useUniwindAccent.ts

@@ -0,0 +1,21 @@
+import { isDefined } from '../../common/utils'
+import { Logger } from '../../core/logger'
+import { formatColor } from '../../core/web/formatColor'
+import { useResolveClassNames } from '../../hooks/useResolveClassNames'
+
+let warnedOnce = false
+
+export const useUniwindAccent = (className: string | undefined) => {
+    const styles = useResolveClassNames(className ?? '')
+
+    if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && styles.accentColor === undefined) {
+        warnedOnce = true
+        Logger.warn(
+            `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+        )
+    }
+
+    return styles.accentColor !== undefined
+        ? formatColor(styles.accentColor)
+        : undefined
+}

package/src/core/config/config.common.ts

@@ -7,8 +7,7 @@ import { UniwindListener } from '../listener'
 import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 
 const SYSTEM_THEME = 'system' as const
-
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+// Platform.constants is not defined in RNW
 const RN_VERSION = Platform.constants?.reactNativeVersion?.minor ?? 0
 const UNSPECIFIED_THEME = RN_VERSION >= 82 ? 'unspecified' : undefined
 
@@ -21,7 +20,6 @@ export class UniwindConfigBuilder {
         Appearance.addChangeListener(event => {
             const colorScheme = event.colorScheme === 'unspecified'
                 ? ColorScheme.Light
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 : event.colorScheme ?? ColorScheme.Light
             const prevTheme = this.#currentTheme
 
@@ -108,15 +106,14 @@ export class UniwindConfigBuilder {
         }
     }
 
-    updateCSSVariables(theme: ThemeName, variables: CSSVariables) {
+    // oxlint-disable-next-line typescript/no-unused-vars
+    updateCSSVariables(theme: ThemeName, cssVariables: CSSVariables) {
         // noop
-        theme
-        variables
     }
 
+    // oxlint-disable-next-line typescript/no-unused-vars
     updateInsets(insets: Insets) {
         // noop
-        insets
     }
 
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {

package/src/core/config/config.native.ts

@@ -44,9 +44,7 @@ class UniwindConfigBuilder extends UniwindConfigBuilderBase {
             })
         })
 
-        if (theme === this.currentTheme) {
-            UniwindListener.notify([StyleDependency.Variables])
-        }
+        UniwindListener.notify([StyleDependency.Variables])
     }
 
     updateInsets(insets: Insets) {