Issue Emotion.js, "illegal escape sequence in your template literal"

[fcisio]

Hi, I'm having trouble when building components that use Emotion's template literal syntax.

export const Component = styled.div`
  background-color: 'blue';
  
  &:hover {
    background-color: 'red';
  }
`

I get the error log:

You have illegal escape sequence in your template literal, most likely inside content's property value. Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\00d7';" should become "content: '\00d7';".

You can read more about this here

---

Technically, using @emotion/babel-plugin, should fix it; see this thread

Nothing seems to work, and I haven't encountered this issue using webpack on other projects.

My babel.config.js does seem to be used by microbundle, so I don't know why I have this issue.

[developit]

I don't think Microbundle uses babel.config.js, only .babelrc.

[fcisio]

It doesn't seem to work either for me wi .babelrc.

[wardpeet]

Hi @fcisio!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.