developit / developit/microbundle

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

Open
#818 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
8.1k
Forks
358
PR merge metrics
No merged PRs in 30d

Description

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

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences)

---

Technically, using `@emotion/babel-plugin`, should fix it; [see this thread](https://github.com/emotion-js/emotion/issues/1755)

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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.