What is the correct way to type a CSS property, as `React.CSSProperties` is not
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
### Describe the issue
Typescript is not happy when using certain properties with dynamic styles.
### Expected behavior
No type error.
### Steps to reproduce
```tsx
import stylex, { type StyleXStyles } from '@stylexjs/stylex';
type Props = {
style: StyleXStyles;
};
export const MyDiv: React.FC = ({ style }) => (
);
////////////////////////////////////////////////////////////////////////////////
const myStyles = stylex.create({
myWrap: (value: React.CSSProperties['flexWrap']) => ({
flexWrap: value,
}),
});
export const MyComponent: React.FC = () => (
// ^^^^^ ts error here
);
```
Error:
```
Type 'readonly [Readonly<{ flexWrap: StyleXClassNameFor<"flexWrap", FlexWrap | undefined>; }>, unique symbol]' is not assignable to type 'StyleXStyles'.
Type 'readonly [Readonly<{ flexWrap: StyleXClassNameFor<"flexWrap", FlexWrap | undefined>; }>, unique symbol]' is not assignable to type 'readonly [Readonly> | undefined; readonly MozOsxFontSmoothing?: StyleXClassNameFor<"MozOsxFontSmoothing", Readonly<...>> | undefined; ... 527 more ...; readonly '::-webkit-search-results-decoration'?: StyleXClassNameFor<...> ...'.
Type 'readonly [Readonly<{ flexWrap: StyleXClassNameFor<"flexWrap", FlexWrap | undefined>; }>, unique symbol]' is not assignable to type 'readonly [Readonly> | undefined; readonly MozOsxFontSmoothing?: StyleXClassNameFor<"MozOsxFontSmoothing", Readonly<...>> | undefined; ... 527 more ...; readonly '::-webkit-search-results-decoration'?: StyleXClassNameFor<...> ...'.
Type at position 0 in source is not compatible with type at position 0 in target.
The types of 'flexWrap' are incompatible between these types.
Type 'StyleXClassNameFor<"flexWrap", FlexWrap | undefined>' is not assignable to type 'StyleXClassNameFor<"flexWrap", Readonly<"initial" | "inherit" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | null | undefined>> | undefined'.
Type 'StyleXClassNameFor<"flexWrap", FlexWrap | undefined>' is not assignable to type 'StyleXClassNameFor<"flexWrap", Readonly<"initial" | "inherit" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | null | undefined>>'.
Type 'StyleXClassNameFor<"flexWrap", FlexWrap | undefined>' is not assignable to type '{ _opaque: unique symbol; _key: "flexWrap"; _value: Readonly<"initial" | "inherit" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | null | undefined>; }'.ts(2322)
Test.tsx(4, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & Props'
```
Contributor guide
Assessment
This issue has not been assessed yet.