developit / developit/microbundle

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

未关闭
#818 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
JavaScript
星标
8.1k
派生
358
PR 合并指标
30 天内没有已合并 PR

描述

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.

贡献指南

这个仓库没有索引到贡献指南

调研方向

Reproduce the build with the Emotion template literal shown in the issue, then inspect babel.config.js and how microbundle applies the Babel configuration. Compare the resulting behavior with the reported webpack behavior. Done means the sample builds without the illegal escape sequence error or the configuration limitation is clearly documented.

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript
领域
build-system
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。