Don't infer types of selectors in mixins (#217)

DigitecGalaxus · Nov 29, 2024 · 365af90 · 365af90
1 parent 411ad36
commit 365af90
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/.changeset/wild-pants-report.md b/.changeset/wild-pants-report.md
@@ -0,0 +1,5 @@
+---
+"next-yak": patch
+---
+
+Fix typings of selectors within mixin
diff --git a/packages/next-yak/runtime/__tests__/typeTest.tsx b/packages/next-yak/runtime/__tests__/typeTest.tsx
@@ -278,3 +278,22 @@ const KeyframesWithConstants = () => {
     }
   `;
 };
+
+const SelectorMixinsShouldNotAlterType = () => {
+  const Button = styled.button<{ $primary?: boolean }>``;
+
+  const Mixin = css`
+    ${Button} {
+      color: red;
+    }
+  `;
+
+  const X = styled.div`
+    ${Button} {
+      color: blue;
+    }
+    ${Mixin};
+  `;
+
+  <X />;
+};
diff --git a/packages/next-yak/runtime/cssLiteral.tsx b/packages/next-yak/runtime/cssLiteral.tsx
@@ -61,7 +61,7 @@ export type PropsToClassNameFn = (props: unknown) =>
 export function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;
 export function css<TProps = {}>(
   styles: TemplateStringsArray,
-  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]
+  ...values: CSSInterpolation<NoInfer<TProps> & { theme: YakTheme }>[]
 ): ComponentStyles<TProps>;
 export function css<TProps>(
   ...args: Array<any>

diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx
@@ -137,7 +137,7 @@ const yakStyled = <
       CSSInterpolation<T & NoInfer<TCSSProps> & { theme: YakTheme }>
     >
   ) => {
-    const getRuntimeStyles = css(styles, ...values);
+    const getRuntimeStyles = css(styles, ...(values as any));
     const yak = (props: Substitute<TCSSProps & T, TAttrsIn>, ref: unknown) => {
       // if the css component does not require arguments
       // it can be called without arguments and we skip calling useTheme()