Unexpected "You have illegal escape sequence..." in Chrome DevTools

Current behavior:

I have got the error message saying

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

While my one and only tsx file never contains a backslash.

import React from 'react'
import ReactDOM from 'react-dom'
import { css } from '@emotion/core'

const RED = 'red'

ReactDOM.render(
  <div
    css={css`
      color: ${RED};
    `}
  >
    Hey
  </div>,
  document.getElementById('root')
)

To reproduce:

1. git clone https://github.com/ThisIsManta/parcel-ts-emotion
2. yarn
3. yarn start
4. Open http://localhost:1234/ in Google Chrome (may possible to reproduce in other browsers as well)

Expected behavior:

Expect NOT to see the error message in Google console.

The error message will be gone if I put "resolutions": { "@emotion/serialize": "0.11.4" } in my package.json as the latest version of @emotion/core auto installs v0.11.5 which prints the error message unexpectedly.

Environment information:

• I’m using Parcel + TS + Emotion via .babelrc
• react version: 16.12.0
• @emotion/core version: v10.0.27
• See the rest in package.json
• Chrome for Windows: 80.0.3987.87 (Official Build) (64-bit)

[tills13]

edit: for visibility, I’ve extracted this comment into a new issue: https://github.com/emotion-js/emotion/issues/2802

Apologies in advance for digging up an old issue.

I’m seeing this on a Next 12.2 project using their Emotion SWC compiler – just hoping to get some clarification before filing an issue with them. Can you briefly explain the logic behind these lines? Particularly in the context of sourceMap insertion?

Let’s say I have

const Element = styled.span`
  display: block;
`

Note how there’s no interpolation. This means the anon function in the linked lines should receive [['display: block']] as its arguments. With sourcemaps enabled, the function receives the sourcemap as the second arg (implying interpolation, not sure if that’s relevant).

args.length === 2 args[0][1] === undefined

Despite there being no escaping at all, I receive the error talked about in this issue.

~In all honesty, I really don’t see how that particular block of code checks for illegal escape sequences at all since escaped sequences (valid or not) don’t result in extra args.~

After further testing I realize there are some specific about escapes e.g.

> function x() { console.log([...arguments]) }
> x`content: '\00d7'`
[Arguments] { '0': [ undefined ] }
> x`content: '\\00d7'`
[Arguments] { '0': [ "content: '\\00d7'" ] }

which seems to support the logic of those lines.

I guess my question is, then, is this NextJS inserting the sourceMaps incorrectly or do those lines need a little extra logic to ignore the interpolated source map?

[Andarist]

As mentioned - I’m super busy right now. +1 comment is not really helpful in any way - if you care about the issue at hand I encourage you to just fix it and prepare a PR with the fix. If you don’t want to do that, please just wait patiently for the fix.