developit / developit/microbundle
Issue Emotion.js, "illegal escape sequence in your template literal"
- 主要语言
- 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