compose component not support "as" prop

[someok]

Bug report

Describe the bug

It is normal for the original component to use "as" prop, However, after the compose the component and use "as", the original attributes are lost.

To Reproduce

const MyButton = styled(Button, {
    background: 'red',
});

<MyButton as="a" size="xl">
    hello world
</MyButton>

<Button as="a" rounded size="xl" color="gradient">
    hello world
</Button>

System information

• OS: macOS
• Browser Edge
• Version of Stitches: v1.2.6
• Version of Node.js: v16.14.0

[lesha1201]

It happens because it uses a instead of Button as a base component:

I think it should check whether DefaultType is a component or host-component (e.g. div, a, etc.). If it's a component then it should ignore as prop and pass it to this component.

[lesha1201]

From example, Button is probably a wrapper on styled component. Possible temporary workaround can be like this:

function Button(...) {
  //...
  return <StyledButton {...} />
}

Button[Symbol.for('sxs.internal')] = StyledButton[Symbol.for('sxs.internal')] ;

I don't like this but at least it can be as a temporary workaround until it's solved in Stitches.

UPD

This workaround still doesn't solve the problem when Button component has some custom props and you want to use it:

function Button({ customProp, ...rest }) {
  //...
  return <StyledButton {...rest} />
}

Button[Symbol.for('sxs.internal')] = StyledButton[Symbol.for('sxs.internal')] ;

const MyButton = styled(Button, {
    background: 'red',
});

// `customProp` won't work because it's passed to `a` instead of `Button`
<MyButton as="a" customProp="foo">
    hello world
</MyButton>