TypeScript issues in v3.1.0

yamitzky commented 2 years ago

🐛 Bug Report

With xstyled@3.1.0 and emotion, SystemProps does not infer correctly.

For example, py={4} makes TypeScript error Type '4' is not assignable to type 'SystemProp<PaddingTop<0 | (string & {})> & PaddingBottom<0 | (string & {})>, Theme> | undefined' with creating a d.ts file.

Without custom d.ts, pt={y} is valid, but wrong utilities are also valid such as opacity={{ xxx: 'typo' }}.

To Reproduce

Install latest xstyled with emotion
Create styled.d.ts and paste the example d.ts
Pass numeric value to system props, e.g. <x.div py={4}>
yarn tsc --noEmit

src/pages/index.tsx:12:7 - error TS2322: Type '4' is not assignable to type 'SystemProp<PaddingTop<0 | (string & {})> & PaddingBottom<0 | (string & {})>, Theme> | undefined'.

12       py={4}
         ~~

  node_modules/@xstyled/system/dist/index.d.ts:600:5
    600     py?: SystemProp<ThemeSpace<T> | (CSS.Property.PaddingTop & CSS.Property.PaddingBottom), T>;
            ~~
    The expected type comes from property 'py' which is declared here on type 'IntrinsicAttributes & SystemProps<Theme> & { as?: ElementType<any> | undefined; theme?: Theme | undefined; } & Omit<...> & { ...; }'

Expected behavior

With/without d.ts,

<x.div mt={4}> must not be type error
<x.div opacity={{ hov: 'typo' }}> must be type error

Link to repl or repo (highly encouraged)

prepared two examples to reproduce.

Run `npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard`

Paste the results here:

## System:
 - OS: macOS 11.4
 - CPU: (8) arm64 Apple M1
 - Memory: 87.31 MB / 8.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.7.0 - ~/.nvm/versions/node/v16.7.0/bin/node
 - Yarn: 1.22.10 - /opt/homebrew/bin/yarn
 - npm: 7.20.3 - ~/.nvm/versions/node/v16.7.0/bin/npm
## npmPackages:
 - @emotion/react: ^11.4.1 => 11.4.1 
 - @emotion/styled: ^11.3.0 => 11.3.0 
 - @xstyled/emotion: ^3.1.0 => 3.1.0 
 - @xstyled/system: ^3.1.0 => 3.1.0

yamitzky commented 2 years ago

This issue can be fixed by reverting https://github.com/gregberge/xstyled/pull/310

gregberge commented 2 years ago

@probablyup maybe you could help on this, this bug is introduced by your PR. But I could take a deeper look when I have a moment.

quantizor commented 2 years ago

Will attempt to fix, thanks!

quantizor commented 2 years ago

@yamitzky this should do the trick https://github.com/gregberge/xstyled/pull/319/files

styled-components / xstyled