Web experimentalCSSMediaQueries: fix when value is undefined

[chr314]

Summary

Using experimentalCSSMediaQueries on web, if the value is undefined it will crash

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-unistyles-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 2, 2024 1:53pm

[jpudysz]

Hey, can you give me some context? When it happens?

[chr314]

Hello,
in this example if the param color is undefined and experimentalCSSMediaQueries is enabled then it will crash

const stylesheet = createStyleSheet(theme => ({
    container: (color) => ({
        backgroundColor: color,
    }),
}));

my workaround is to use a default value like

 backgroundColor: color || '#fffffff',

[jpudysz]

Interesting!
Thanks for the details. I will try to repro & review PR

[jpudysz]

Hmm I've tested your example, and used experimentalCSSMediaQueries: true, but passing undefined as a color is not crashing an app.

My code:

const stylesheet = createStyleSheet(theme => ({
    example: (color: string) => ({
        backgroundColor: undefined
    })
}))

Stylesheet is attached to single View:

<View style={styles.example()} />

Without experimentalCSSMediaQueries:

No class name, no inline styles, deault class .css-view-175oi2r

With experimentalCSSMediaQueries, default class .css-view-175oi2r.

.css-view-175oi2r {
    align-items: stretch;
    background-color: rgba(0, 0, 0, 0);
    // other styles
}

Tried with few other props, but with no luck to reproduce.

Do you have more context, or better example?