SSR media query hydration error

[Vadim]

Description

Hydration error with media queries:

Component:
<View style={styles.linksContainer}> ... </View>

Styles:
`linksContainer: { display: { xs: 'none', xl: 'flex', }, flexDirection: 'row', },

On the first render on the desktop (xl size) the linksContainer is hidden, even though it shouldn't be. Moreover, if I resize the window to a smaller, and then to a larger screen size (xl+), the media query seems to start working.

Steps to reproduce

I'm using https://solito.dev/expo-router started pack.
Installed unistyles to packages/app directory.
Write a component with some css media queries.

Snack or a link to a repository (optional)

No response

Unistyles version

1.1.1

React Native version

Platforms

React Native Web

[Jacek Pudysz]

Thank you @HellYeahOmg for the report. It was easy to fix, but hard to spot 😄

[Vadim]

Even though it fixed the issue, I can still see an error in the console:

linksContainer: { // display: 'flex', display: { xs: 'none', xl: 'flex', }, flexDirection: 'row', },

[Jacek Pudysz]

Let me try to repro it 👀

[Jacek Pudysz]

Yeah, I have a repro.
I missed this part:

On the first render on the desktop (xl size) the linksContainer is hidden, even though it shouldn't be.

[Jacek Pudysz]

Patched, will be available in ~10 minutes.

[Jacek Pudysz]

Please try with 1.1.3

[Vadim]

Xd it became worse. Now a simple view breaks down everything (no styles at all):
<View> <Text>lorem</Text> </View>

[Jacek Pudysz]

Got it, sorry I had a cached version locally and after push I run yarn and it injected broked version. I'm working on it 👌

[Jacek Pudysz]

Ok, fixed and released in 1.1.4.

Keep in mind that in version 1.0 unistyles breakpoints live on JS side. So you may expect https://web.dev/articles/cls

Here is a way to address it:
jpudysz/react-native-unistyles-ssr-exmaple@9d809ad

With next versions I will move it to media queries so it will have no CLS.

[Vadim]

Works like a charm!
Tho the solution with isClient is probably gonna kill your seo?

[Jacek Pudysz]

Yeah, you can also fix it with some global loader (on first load):

{!isClient && (
    <View style={styles.loader}>
        <ActivityIndicator />
    </View>
)}

const stylesheet = createStyleSheet(theme => ({
    loader: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: theme.colors.backgroundColor
    }
})

It will be displayed only once, but you gonna get full HTML content.
To fix this I'm need to move media queries to CSS.
I've added it to todo list for 2.0

Screen.Recording.2023-11-06.at.14.56.59.mov