jantimon / next-yak

🦀 Zero-runtime CSS-in-JS powered by Rust. Write styled-components syntax, get build-time CSS extraction and full RSC compatibility
https://yak.js.org
139 stars 4 forks source link

Mixins with selectors only should not alter type of component #218

Closed Mad-Kat closed 2 days ago

Mad-Kat commented 1 week ago

When having a component with a property and using it as a selector in another component works without a type error:

const Comp = styled.div<{ $primary: boolean }>`
  color: green;
`;

const Wrapper = styled.div`
  ${Comp} {
    color: blue;
  }
`;

while having the selector on a mixin and using the mixin in the same component fails with a type error:

const Mixin = css`
  ${Comp} {
    color: red;
  }
`;

const Wrapper = styled.div`
  ${Mixin};
`;

Resulting error:

Argument of type 'ComponentStyles<{ $primary: boolean; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>' is not assignable to parameter of type 'CSSInterpolation$1<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { theme: YakTheme; }>'.
  Type 'ComponentStyles<{ $primary: boolean; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>' is not assignable to type 'ComponentStyles$1<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { theme: YakTheme; }>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { theme: YakTheme; }' is not assignable to type '{ $primary: boolean; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>'.
        Property '$primary' is missing in type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { theme: YakTheme; }' but required in type '{ $primary: boolean; }'.ts(2345)