search

jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
https://yak.js.org
109 stars 3 forks source link

TypeScript error when trying to style component inside a styled component #72

Closed KrzysztofKarol closed 2 months ago

KrzysztofKarol commented 6 months ago

To Reproduce https://stackblitz.com/edit/stackblitz-starters-6risew?file=app%2Fpage.tsx Here's a minimal code snippet to reproduce the issue:


import { styled } from 'next-yak';

const Child = styled.div<{ $hasError: boolean }>`
  background: ${({ $hasError }) => ($hasError ? 'red' : 'green')}
`;

const Parent = styled.div`
  ${Child} {
    margin-top: 16px;
  }
`;

export default () => (
  <Parent>
    {/* ^^ Property '$hasError' is missing in type '{ children: Element[]; }' but required in type '{ $hasError: boolean; }'. */}
    <div>foo</div>
    <Child $hasError>bar</Child>
  </Parent>
);