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
118 stars 4 forks source link

typecasts break cross file selectors #162

Open jantimon opened 1 month ago

jantimon commented 1 month ago

it looks like typesrcript type casts (as) confuse our ast visitor and therefore break cross file selectors:

import { StyledSvg1 } from "./works";
import { StyledSvg1 } from "./broken";

export const Foo = styled.button`
  ${StyledSvg1} { color: red } 
  ${StyledSvg2} { color: red } 
`

works.tsx

export const StyledSvg1 = styled.svg``;

broken.tsx

import { type DefaultTheme, type StyledComponent } from "styled-components";
export const StyledSvg2 = styled.svg``as unknown as StyledComponent<
  "svg",
  DefaultTheme,
  {}
> & {
  __yak: true;
};