Throwing a "semi-colon expected" error on a seemingly valid syntax

[GabeDuarteM]

I have the code below, and ts-styled-plugin is complaining about it, even though it appears to be syntactically valid...

const CardSize = styled.div`
  width: 400px;
  height: 400px;

  @media (max-width: 575px) {
    width: 200px;
    height: 400px;
  }
`

const FlipContainer = styled(CardSize)`
  perspective: 1000px;
`

const Flipper = styled.div`
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  ${FlipContainer}:hover & { // [ts-styled-plugin] semi-colon expected (on the '{')
    transform: rotateY(180deg);
  } // [ts-styled-plugin] at-rule or selector expected (on the '}')
`

On the Flipper variable, it complains about the { and }, the first error being [ts-styled-plugin] semi-colon expected and the second being [ts-styled-plugin] at-rule or selector expected.

Not sure if it's related, but if I change the Flipper to the code below, it stops complaining about the last line (on the })

const Flipper = styled.div`
  ${FlipContainer}:hover & {
    transform: rotateY(180deg);
  }
`

Any idea why this is happening?

[Jonir227]

I had a same problem like you. and I solved it trough line break between lines.
try this.

const Flipper = styled.div`
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;

  ${FlipContainer}:hover & { // [ts-styled-plugin] semi-colon expected (on the '{')
    transform: rotateY(180deg);
  } // [ts-styled-plugin] at-rule or selector expected (on the '}')
`

still I don't know what's really problem is.

[GabeDuarteM]

@Jonir227 Doing that just dismisses the last error (on the }), but the one on the { stays 🤔

[skykanin]

I'm having the same issue with this code. This should be syntactically correct according to the styled-components docs:

const Button = styled.div`
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
`

const Content = styled.div`
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
`

const Container = styled.div`
  position: relative;
  display: inline-block;
  margin: 3%;

  ${Content}:hover & {
    display: block;
  }
  
  ${Button}:hover & {
    background-color: #3e8e41;
  }
`