Styling breaks when using passed prop with backticks helpers

[pjg]

Minimal reproducible testcase:

import styled from 'styled-components'

const media = {}

const Container = styled.main`
  padding: 10px;

  transform: translateX(var(--menu-${({ state }) => state}-width));

  ${media.md`
    transform: translateX(0);
  `}
`

const Content = () => {
  const state = 'open'

  return <Container state={state}>X</Container>
}

export default Content

Results in the following breaking of styling right after the backtick for the styled component definition (for the rest of the file):

(media is an external helper that I just replaced with an empty object for the purpose of documenting this issue).

[christopher-francisco]

Same issue here

[arantebw]

I have that same problem as well.