CSS code after a function call nested in some media query breaks

Current behavior:

This works perfectly

const mqUntil = (bp: number) => `@media (max-width: ${bp}px)`

const NavbarWrapper = styled.div`
  ${props => mqUntil(props.theme.breakpoints.mobile)} {
    padding-left: ${props => props.theme.space[3]};
    padding-right: ${props => props.theme.space[3]};
  }

  background-color: green;
`

Whereas, in some scenarios I couldn’t reproduce consistently, this breaks :

const mqUntil = (bp: number) => `@media (max-width: ${bp}px)`

export const CustomHorizontalPadding = (x: number) => css`
  padding-left: ${x}px;
  padding-right: ${x}px;
`

const NavbarWrapper = styled.div`
  ${props => mqUntil(props.theme.breakpoints.mobile)} {
    ${props => CustomHorizontalPadding(props.theme.space[3])}
  }

  /* HERE : ⚠️ this line is basically ignored */
  background-color: green;
`

Commenting ${props => CustomHorizontalPadding(props.theme.space[3])} (leaving just the empty media query) makes the background appear

To reproduce:

It’s very hard 😞 I have no clue why, but this exact same piece of code is working in other parts of application.

Environment information:

• react version: 16.13.1
• emotion version: 10.0.28

[srmagura]

Hey @badsyntax, you can fix it like this:

const StyledButton = styled.button`
  ${true
    ? css`
    @media (min-width: 20px) {
      ${nestedMediaQuery}
    }`
    : nestedMediaQuery}
  background-color: red;
`;

The only change is adding css on the line with the question mark. It seems to just have been a case of bad syntax 😂.

The reason css is necessary there is that nestedMediaQuery is a SerializedStyles object. An object like that cannot be interpolated into a string using the normal JavaScript string interpolation. That’s why you have to make it a css tagged template literal which does know how to interpolate SerializedStyles objects.

[badsyntax]

@srmagura thank you for the reply, solution, and explanation 😃