From 365af907cc946230273b10f047a0f808758ab868 Mon Sep 17 00:00:00 2001
From: Luca Schneider <7972860+Mad-Kat@users.noreply.github.com>
Date: Fri, 29 Nov 2024 11:15:52 +0100
Subject: [PATCH] Don't infer types of selectors in mixins (#217)

---
 .changeset/wild-pants-report.md               |  5 +++++
 .../next-yak/runtime/__tests__/typeTest.tsx   | 19 +++++++++++++++++++
 packages/next-yak/runtime/cssLiteral.tsx      |  2 +-
 packages/next-yak/runtime/styled.tsx          |  2 +-
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wild-pants-report.md

diff --git a/.changeset/wild-pants-report.md b/.changeset/wild-pants-report.md
new file mode 100644
index 00000000..46ead31f
--- /dev/null
+++ 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
index c2dd3c52..499bc637 100644
--- 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
index ee761ca0..760a4a3a 100644
--- 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
index 6c63715c..a6ee6552 100644
--- 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()