Styling styled components acts unexpectedly

Current behavior:

Styling information is lost for consecutive styles. I suspect but cannot confirm that it’s a regression, because it appears that the code no longer works. Nevertheless, currently it doesn’t throw any errors besides not functioning as expected.

To reproduce:

import { css } from "@emotion/css";
import styled from "@emotion/styled";

export const ClearButton = styled('button')`
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit; 
    /* // Inherit font settings (doesn’t work in IE7-) */
    /* // line-height: normal; // Override line-height to avoid spacing issues */
    line-height: 0; /* // Due to Flexbox issues */
    /* Remove mystery padding in Gecko browsers.
     * See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
     */
    ::-moz-focus-inner {
        padding: 0;
        border: 0;
    }
    cursor: pointer;
    :focus {
        outline: none;
    }
`;

const newstyle = css`
    :hover {
        opacity: 0.7;
    }
    :focus {
        opacity: 0.7;
        outline: none;
    }
`

// Result has no hover activity, however, no error is thrown either.
export const ClearButtonHover_Broken = styled(ClearButton)(newstyle)
export const ClearButtonHover_AlsoBroken = styled(ClearButton)`${newstyle}`
export const ClearButtonHover_Works = styled(ClearButton)`
    :hover {
        opacity: 0.7;
    }
    :focus {
        opacity: 0.7;
        outline: none;
    }
`;
`

export const ClearButtonHover = styled(ClearButton)(newstyle)

Expected behavior:

Consistent styling or errors if this isn’t valid usage of the new API

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.1.5

[awgeorge]

Is Emotion meant to support inherence in the way styled-components does? I assumed it should, but this suggests otherwise: https://codesandbox.io/s/trusting-boyd-uvc6x?file=/src/App.js

import React from "react";
import styled from "@emotion/styled";

const Green = ({ children }) => {
  return <StyledGreen>{children}</StyledGreen>;
};

const StyledGreen = styled("section")({
  backgroundColor: "#0f0"
});

const Red = ({ children }) => {
  return <StyledRed>{children}</StyledRed>;
};

const StyledRed = styled(Green)({
  backgroundColor: "#f00"
});

export default function App() {
  return <Red>Should be red</Red>;
}

Emotion-react v11.7.1 Emotion-styled v11.6.0

[rsxdalv]

Fair enough, since there’s a solution inside this thread that should suffice for now. I also got a lot busier since making this issue.