Enable as specification at declaration for composed components

[dylanklohr]

Is your feature request related to a problem? Please describe.

The existing polymorphic as prop from @stitches/react works incredibly well for allowing control over the rendered element at time of consumption. One thing that has been a frequent pain point however is that there is no way to specify a value for as when composing components.

Example

const Box = styled('div',{
  padding: 0,
  margin: 0,
});

const Text = styled(Box, {
  fontSize: ...,
  fontFamily: ...,
});

const Consumer = () => {
  return <Text as="h1">...</Text>
};

This leads to forcing instances of <Text /> to provide a value for as every time it is consumed.

Current Workaround

// defined but not exported for consumption
const InternalText = styled(Box, {
  fontSize: ...,
  fontFamily: ...,
});

const Text = (props) => <InnerText as="h1" {...props} />

but this forces the onus of handling polymorphism for any other props that may be provided to <Text /> to consumers.

Desired Solution

If one is able to provide a value for the as prop when declaring a new styled component that composes another component, like the following, consumers would be able to have access to the full power and awesome DX that @stitches/react offers, with greater flexibility for component composition

const Text = styled(Box, {
  fontSize: ...,
  fontFamily: ...,

  defaultTag: 'h1',
});

Alternative APIs

Optional third Argument

const Text = styled(Box {
  fontSize: ...,
  fontFamily: ...,
}, 'h1');

Array as first Argument

const Text = styled([Box, 'h1'], {
  fontSize: ...,
  fontFamily: ...,
});

Special @as Property

const Text = styled(Box {
  '@as': 'h1',

  fontSize: ...,
  fontFamily: ...,
});

---

Potentially Related Issues/Discussions

• default 'as' in composite component. #444
• How to handle as prop on styled(Component) components #448

[afzalsayed96]

Alternative API:

const Box = styled('div', {})
cont Text = styled(Box.as('p'), {})

Benefit of this is when we make TextLink = styled(Box.as('a'), {}), then it will have href and other anchor props by default

[afzalsayed96]

I was able to come up with a pattern to solve this in the userland. Posting below for those who seek solution for the same

const BoxAs = <T extends Parameters<typeof styled>[0]>(tag: T) => styled(tag, {});

const Box = BoxAs("div");

const TextAs = <T extends Parameters<typeof styled>[0]>(tag: T) => styled(BoxAs(tag), {});

const Text = TextAs("p");

const TextLink = styled(TextAs("a"), {});

Full example: https://codesandbox.io/s/composition-with-default-as-mf3x9

[rafgraph]

@dylanklohr @afzalsayed96 check out #609 for some ideas related to this.

[dylanklohr]

Looks great to me!

[cometkim]

This feature was previously proposed, but was rejected for several reasons.

#207