Passing tagged template literals to .withComponent()

If I’m correct, styled-component’s main feature leverages tagged template literals for its whole ecosystem, with the star function being styled + taggedTemplateLiterals, so that we can create a new element and attach new styles to it:

const Text = styled.span`
    fontSize: 1em;
`

Also, extend + taggedTemplateLiterals is possible so we can quite add styles to an existing element:

const MyNewText = extend`
    fontSize: 2em;
`

The helper css also comes bundled with taggedTemplateLiterals :

const textStyles = css`
    font-size: 1em;
    color: #252525;
    margin-bottom: .4 rem;
`

Then we got the cool withComponent kid and can create a new element inheriting styles from another component:

const Paragraph = Text.withComponent('p')

However, to my surprise, we cannot use withComponent + taggedTemplateLiterals…

This would be really nice :

const Text = styled.span`
    font-size: 1em;
    color: #252525;
    margin-bottom: .4 rem;
`
Text.h1 = Text.withComponent('h1')`
    font-size: 3em;
`
Text.h2 = Text.withComponent('h2')`
    font-size: 2.7em;
`
Text.h3 = Text.withComponent('h3')`
    font-size: 2.1em;
`
Text.h4 = Text.withComponent('h4')`
    font-size: 1.8em;
`
Text.h5 = Text.withComponent('h5')`
    font-size: 1.3em;
`
Text.h6 = Text.withComponent('h6')`
    font-size: .9em;
`
export default Text;

Today, I end up doing:

const textStyles = css`
    font-size: 1em;
    color: #252525;
    margin-bottom: .4 rem;
`
Text = styled.span`
    ${textStyles}
`
Text.h1 = styled.h1`
    ${textStyles}
    font-size: 3em;
`
Text.h2 = styled.h2`
    ${textStyles}
    font-size: 2.7em;
`
Text.h3 = styled.h3`
    ${textStyles}
    font-size: 2.1em;
`
Text.h4 = styled.h4`
    ${textStyles}
    font-size: 1.8em;
`
Text.h5 = styled.h5`
    ${textStyles}
    font-size: 1.3em;
`
Text.h6 = styled.h6`
    ${textStyles}
    font-size: .9em;
`
export default Text;

Don’t know if there are other patterns though (??), but for consistency I would like to see this feature. Not sure if this is difficult to implement or feasible at all. What do you think ? 😉

[mxstbr]

const Paragraph = Text.withComponent('p').extend`
  color: blue;
`

Reference explanation: #851

[mxstbr]

@philpl we should add this pattern to the docs since it seems like folks are confused about this!