fix: x.* must pass through props for as={Component}

This is from discussion at
#231 (comment)

Author: agriffis

packages/styled-components/src/createX.test.tsx

@@ -20,6 +20,40 @@ describe('#createX', () => {
       font-size: 10px;
     `)
   })
+
+  it('avoids passing system props to HTML element', () => {
+    const x = createX<FontSizeProps<Theme>>(fontSize)
+    const { container } = render(<x.div fontSize={10} />)
+    expect(container.firstChild).not.toHaveAttribute('fontSize')
+  })
+
+  it('passes HTML attrs to HTML element', () => {
+    const x = createX<FontSizeProps<Theme>>(fontSize)
+    const { container } = render(<x.div role="presentation" />)
+    expect(container.firstChild).toHaveAttribute('role', 'presentation')
+  })
+
+  it('avoids passing system props to "as" component', () => {
+    const Component = props => <div {...props} />
+    const x = createX<FontSizeProps<Theme>>(fontSize)
+    const { container } = render(<x.div as={Component} fontSize={10} />)
+    expect(container.firstChild).not.toHaveAttribute('fontSize')
+  })
+
+  it('passes non-system props to "as" component', () => {
+    const Component = ({asdf, ...props}) => <div {...props}>{asdf}</div>
+    const x = createX<FontSizeProps<Theme>>(fontSize)
+    const { container } = render(<x.div as={Component} asdf="boo!" />)
+    expect(container.firstChild).toHaveTextContent('boo!')
+  })
+
+  // skip because this depends on unreleased styled-components 5.2.4 or 6
+  it.skip('avoids passing non-HTML attrs to HTML element', () => {
+    const x = createX<FontSizeProps<Theme>>(fontSize)
+    const { container } = render(<x.div asdf="boo!" />)
+    expect(container.firstChild).not.toHaveAttribute('asdf')
+  })
+
 })
 
 describe('#x.extend', () => {

packages/styled-components/src/createX.ts

@@ -32,10 +32,18 @@ export const createX = <TProps extends object>(generator: StyleGenerator) => {
   tags.forEach((tag) => {
     // @ts-ignore
     x[tag] = styled(tag).withConfig({
-      shouldForwardProp: (prop, defaultValidatorFn) => {
+      shouldForwardProp: (prop, defaultValidatorFn, elementToBeCreated) => {
         if (typeof prop === 'string' && generator.meta.props.includes(prop))
           return false
-        return defaultValidatorFn(prop)
+        // We must test elementToBeCreated so we can pass through props for
+        // <x.div as={Component} />. However elementToBeCreated isn't available
+        // until styled-components 5.2.4 or 6, and in the meantime will be
+        // undefined. This means that HTML elements could get unwanted props,
+        // but ultimately this is a bug in the caller, because why are they
+        // passing unwanted props?
+        if (typeof elementToBeCreated === 'string')
+          return defaultValidatorFn(prop)
+        return true
       },
       // @ts-ignore
     })<TProps>(() => [`&&{`, generator, `}`])