Warning: Expected style "shadowOpacity: 0.75px" to be unitless

[radekzz]

When applying shadow-opacity numeric value, it get's converted to string with pixels, which is wrong.

Environment

RN 0.67.5
styled-components 5.3.5

Reproduction

Steps to reproduce

Use style 'shadow-opacity': 0.75

Same problems are reported in closed issue

Expected Behavior

No warning

Actual Behavior

Warning appears Warning: Expected style "shadowOpacity: 0.75px" to be unitless

[quantizor]

We use @emotion/unitless for this; can you see if we need to upgrade it or if a bug needs to be filed to get the property added?

[radekzz]

Unfortunately i don't see what is in (name in unitless) but most probably the property is wrongly evaluated as needsUnit.

[nerdberg792]

@radekzz can I work on this issue

[nerdberg792]

@radekzz I guess the problem is in the @emotion/unitless , the shadow-opacity property is not listed in the unitless keys list

[danielmason89]

Oh ummm I see that this is being worked on though can I work on this issue too? @radekzz

[quantizor]

I think the fix is waiting to be merged on Emotion’s side: emotion-js/emotion#3014

[jerridan]

Stumbled across this issue and thought I'd take a look.
Based on the closed issue in Emotion mentioned above (emotion-js/emotion#3014), shadowOpacity won't be added to their unitless list because it is not a CSS property, but a React Native property. So it seems Emotion can't be expected to solve this issue on their end, which I get from their point of view.

So I'm wondering if this is something to be solved within this repo. Is styled-components expected to handle React Native styling properties?
I'm guessing yes, since there are React Native - related tests in the repo.

I'm also wondering, does css-to-react-native solve this issue? I only just learned about that tool, so apologies if that's a silly question.

If we do want to solve this issue here, a map of overrides could be added to the addUnitIfNeeded utility. Simple to do, though not great to maintain if it turns out there are a lot to add over time. I have a draft PR with that solution, if that's acceptable.

[quantizor]

I think what probably needs to happen here is to adjust objToCssArray to take an arbitrary addUnitIfNeeded function (falling back to the current if not passed) and then do a similar update to flatten.

react-native uses the InlineStyle model, so that is where we would want to provide a modified version of addUnitIfNeeded that opts out additional react-native-specific properties so we don't need to ship them for web.