[Web] Static Theme - useCSSVariable - We couldn't find your variable during SSR

[denniske]

What happened?

When using a color variable defined in a static theme this error is shown:

WARN Uniwind - We couldn't find your variable --color-gold-50. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable

I got this error on web but it might occur on iOS/Android also.

Steps to Reproduce

1. Create a static theme in globals.css

@theme static {
    /* Base Tailwind colors */
    --color-black: #000;
    --color-white: #fff;

    /* Custom gold palette */
    --color-gold-50: #FFFCF5;
    --color-gold-100: #ffebc7;
    --color-gold-200: #ffdf8f;
    --color-gold-300: #ffd24d;
    --color-gold-400: #ffcb1f;
    --color-gold-500: #f9b806;
    --color-gold-600: #dea002;
    --color-gold-700: #b77f06;
    --color-gold-800: #92680c;
    --color-gold-900: #785b0d;
    --color-gold-950: #453802;
}

2. Use one of the colors in useCSSVariable

export default function HomeScreen() {
    const colorGold50 = useCSSVariable('--color-gold-50') as string;
    console.log('colorGold50', colorGold50);

    return (
        <SafeAreaView>
            <View className="p-5 bg-green-300">
                <Text className="text-foreground">Coffee</Text>
            </View>
        </SafeAreaView>
    );
}

Snack or Repository Link

https://github.com/denniske/uniwind-theme-variable-repro

Uniwind version

1.6.5

React Native Version

0.81.5

Platforms

Web

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

Worked without any issues

[denniske]

Yes the app is working fine and in the browser console the correct value for the style is printed.

But the warning is shown in the terminal:

Full output:

➜  npm run web -- --port 8083

> expoicons@1.0.0 web
> expo start --web --port 8083

Starting project at /Users/dennis/Projects/...
React Compiler enabled
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █   █▄ ▀▄██ ▄▄▄▄▄ █
█ █   █ █ ▀▄ █▀█ ██ █   █ █
█ █▄▄▄█ █▀██▀▀█▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █▄█▄█▄▄▄▄▄▄▄█
█▄▄██▄ ▄██▀▀▄▀█▄ ███ ▀▄▄ ▄█
█▀▀▀▀█▄▄  █▀ ▄██ ▀▀ █▄  ▀██
█▀▄ █ ▀▄▄▀▀▄█▄▀▄▀▄▀▄▀▀▄ ▀██
███ ▀▀ ▄▄▀█ █▀██▄▄▄█▄▀ ▀███
█▄▄▄███▄▄ ▀▄▄▀█▄▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀█▀ ▄██▀ █▄█ ▀▀█▀█
█ █   █ █▄▀ █▄▀▄█▄▄ ▄▄▀   █
█ █▄▄▄█ █▀▀ █▀▄▀▄██▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄█▄▄▄▄▄████▄▄▄▄▄▄█

› Metro waiting on exp://192.168.1.40:8083
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:8083

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
λ Bundled 832ms node_modules/expo-router/node/render.js (1026 modules)
Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 99.9% (1382/1382)
λ  WARN  Uniwind - We couldn't find your variable --color-gold-50. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable 
λ  WARN  props.pointerEvents is deprecated. Use style.pointerEvents 
λ  LOG  colorGold50 undefined
Web Bundled 1716ms node_modules/expo-router/entry.js (1382 modules)
Web Bundled 318ms node_modules/expo-router/entry.js (1154 modules)
 LOG  [web] Logs will appear in the browser console
λ Bundled 18ms node_modules/expo-router/node/render.js (1 module)
Web Bundled 144ms node_modules/expo-router/entry.js (1 module)

[Brentlok]

So that's the issue, okay so during the server build for web css variables are not available, I guess we can silent those warnings for SSR. I'll update the issue title