Incorrect handling of restyled components with CSS selectors with nested components

Current behavior:

If you style already existing styled component, it will lose all styles that base component received via CSS selectors with nested components.

To reproduce:

import styled from '@emotion/styled';

const Link = styled.a`
    color: red;
`;

const LinkContainer = styled.div`
    ${Link} {
        color: blue;
    }
`;

const StyledLink = styled(Link)`
    border: 1px grey solid;
`;

ReactDOM.render(
    <LinkContainer>
        <StyledLink>I must be blue</StyledLink>
    </LinkContainer>,
    document.getElementById('root')
);

Expected behaviour:

In this example StyledLink should be blue, but appears to be red.

styled-components handles this case properly: https://codesandbox.io/s/styled-components-playground-forked-v3829?file=/src/index.js

Environment information:

• react version: 16.13.1
• @emotion/react version: 11.1.4

[emmatown]

This sounds good. My general thoughts on styled(SomeStyledComponent) are that it should be equivalent to styled(forwardRef((props, ref) => <SomeStyledComponent {...props} ref={ref} />)) and here we’re doing the wrong thing so we should fix it.

There aren’t really performance concerns with this, it’s just adding some extra class names.

[Andarist]

@penx this is a different issue - you are referring to & being based on the hashed styles rather than based on the component identity. This is by design and won’t change.

@iChenLei the issue can be seen here: https://codesandbox.io/s/recursing-bassi-s6809?file=/src/index.js so it’s still there.