Created additional overload to prevent AdditionalProps getting inferr… (

emotion-js#1664)

* Created additional overload to prevent AdditionalProps getting inferred as the composed component type

Fixes emotion-js#1655

* Added additional test showing additional props

* Update .changeset/lucky-swans-kneel.md

Co-Authored-By: Mateusz Burzyński <mateuszburzynski@gmail.com>

.changeset/lucky-swans-kneel.md

@@ -0,0 +1,5 @@
+---
+'@emotion/styled': patch
+---
+
+Fixed issue when using "component as selector" in styled interpolations which caused the wrong type to be inferred.

packages/styled/types/base.d.ts

@@ -79,10 +79,18 @@ export interface CreateStyledComponent<
       >
     >
   ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
+
+  (
+    template: TemplateStringsArray,
+    ...styles: Array<
+      Interpolation<ComponentProps & SpecificComponentProps & StyleProps>
+    >
+  ): StyledComponent<ComponentProps, SpecificComponentProps>
+
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
    */
-  <AdditionalProps extends {} = {}>(
+  <AdditionalProps extends {}>(
     template: TemplateStringsArray,
     ...styles: Array<
       Interpolation<

packages/styled/types/tests.tsx

@@ -80,3 +80,56 @@ const StyledOriginal = styled(Original, {
 
 // No more type conflict error
 ;<StyledOriginal prop1="1" prop2={2} />
+
+const Label = styled.label``
+const Button = styled.button``
+const Input = styled.input`
+  & + ${Label}: {
+    margin-left: 3px;
+  }
+`
+
+const Input2 = styled.input`
+  & + ${Label}: {
+    margin-left: 3px;
+  }
+  & + ${Button}: {
+    margin-left: 3px;
+  }
+`
+
+const Input3 = styled.input({
+  [`& + ${Label}`]: {
+    marginLeft: '3px'
+  }
+})
+
+interface AdditionalTest {
+  left: string
+}
+const Input4 = styled.input<AdditionalTest>`
+  & + ${Label}: ${props => ({
+  marginLeft: props.left
+})}
+`
+;<Input
+  onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+    console.log(evt.target.value)
+  }
+/>
+;<Input2
+  onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+    console.log(evt.target.value)
+  }
+/>
+;<Input3
+  onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+    console.log(evt.target.value)
+  }
+/>
+;<Input4
+  left="3px"
+  onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+    console.log(evt.target.value)
+  }
+/>