bug(React Native, TypeScript): Non-string `transform` property is disallowed as a type

[tjzel]

Describe the issue

React-Native-like transform property is disallowed by TypeScript but works as expected in runtime.

Repro

```tsx import React from 'react'; import { css, html } from 'react-strict-dom'; const styles = css.create({ container: { display: 'flex', flexDirection: 'column', flexGrow: 1, alignItems: 'center', justifyContent: 'center', }, kickedBox: { width: '100px', height: '100px', backgroundColor: 'blue', transform: [{ rotate: '45deg' }], }, }); export default function App() { return ( {/* Error: `transform` property is expected to be a string */} ); } ```

Screenshot from app


Expected behavior

There's no TypeScript error or there's a runtime error about incompatible types.

Steps to reproduce

See the code with the reproduction.

Test case

No response

Additional comments

react-native@0.75.2 react-strict-dom@0.0.27

[necolas]

The type error is correct

[nmn]

Should we close this issue?

[tjzel]

Why should we close it? The code that yield the type error works perfectly fine in React Native.

[necolas]

Lots of code works at runtime after a type error. But that code won't work on web at runtime.

[nmn]

@tjzel The goal of react-strict-dom is to provide a unified API for styles that work on both React Native and the web. The type error in your example is correctly warning you against code that wouldn't work on the web. There are similar type errors for styles that work on the web and not React Native.

Instead of using {rotate: '45deg'} use 'rotate(45deg)'.

[tjzel]

While I understand the drive for a unified API, I don't think forwarding the API that's based on string interpolation is the correct measure here. I'd much rather embrace JavaScript instead of CSS here - but that's maybe due to fact I do more native than web. Regardless, thanks for your insight on this.

I think enabling css.create to convert RN types to unified types would be beneficial for users that want to embed react-strict-dom in their RN apps without rewriting every single style they have - only for type checking, since in runtime everything works fine.