Cannot use conditional CSS blocks inside styled() definitions written as functions

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/exciting-agnesi-xnoes2?file=/demo.js

1. There are 2 elements creating an override for a background color
2. First override uses the styled()/* styles here */ syntax and this works correctly
3. Second uses uses the styled()(({ theme }) => /* styles here */ syntax and the overrides are not applied

The syntax follows: https://github.com/styled-components/styled-components/issues/3189

Current behavior 😯

Conditional styles should get applied to a provided element.

Expected behavior 🤔

Styles don't get applied, and no errors are thrown.

Context 🔦

I'm trying to render a css block conditionally within a block using theme variables. Excerpt from the demo:

const MyComponent = () => {
  const Component = styled("div")(
    ({ theme }) => `
      background: black;
      ${true && css`
        background: red;
      `}
  `);
  return <Component />;
};

The result is element with black background rather than red;

Your environment 🌎

No response

Start with demo.js in the linked CodeSandbox and reproduce the difference between the direct styled() form and the function form. Compare how the conditional css block is handled in each case. Done means the function form applies the conditional red background to the rendered element without errors.