atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.98k stars 68 forks source link

Types on `css={…}` don't block using the top-level object from `cssMap()` #1642

Open kylorhall-atlassian opened 6 months ago

kylorhall-atlassian commented 6 months ago

Describe the bug

There's no type protection when consuming cssMap incorrectly, meaning TypeScript will allow code that won't compile properly.

To Reproduce

For raw cssMap, jump into https://github.com/atlassian-labs/compiled/blob/master/packages/react/src/css-map/__tests__/index.test.tsx#L29 and remove .danger

-const Foo = () => <div css={styles.danger}>hello world</div>;
+const Foo = () => <div css={styles}>hello world</div>;

Same, for the strict version: https://github.com/atlassian-labs/compiled/blob/f093635244ca5accecd5093013694084408be2f7/packages/react/src/create-strict-api/__tests__/index.test.tsx#L162

Expected behavior

These should both have a type error.

Screenshots

No error 😞

Screenshot 2024-03-07 at 11 53 13 AM
itsdouges commented 6 months ago

Thanks for raising this!