Fix composition types

[Mad-Kat]

Fixes #72

Use NoInfer<T> in order to be explicit for the tagged template literal types and not inferring them from the functions that are used for dynamic props or child components.

Added bonus: The destructuring of the props in the tagged template literal gives you now type hints, as TypeScript doesn't want to infer it dynamically and the type is known when you start with the literal.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-yak-benchmark	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 11:17am
yacijs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 11:17am

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #104 will not alter performance

_{Comparing fix-composition-types (ef119e8) with main (7b0de33)}

Summary

✅ 2 untouched benchmarks

[jantimon]

Just checked and styled-component seems to behave the same: https://stackblitz.com/edit/vitejs-vite-vttcyb?file=src%2Fmain.tsx,src%2FApp.tsx&terminal=dev

I adjusted the tests and added @ts-expect-error

[Mad-Kat]

Yeah I think you need to write it like this:

const Parent = styled.div<{ $colorMe: boolean }>`
      ${Child} {
        color: blue;
      }
      color: ${({ $colorMe }) => $colorMe ? `blue` : `red`};
    `;

you have to add the type parameter in order to say that $colorMe exists. It doesn't automatically infer it from the functions you provide.

[jantimon]

released as 0.2.2