Emotion: Unterminated comment literal causes infinite loop

[philip-peterson]

Hello! I was recently developing an app and the browser got stuck in an infinite loop. After some investigating, it turned out to be because I had an unterminated comment token.

Relevant code:

const { css } = require('emotion');
const x = css`/*`;

What happened:

Infinite loop

Suggested solution:

Throw exception for unterminated comment token.

[Andarist]

This seems like a stylis bug - gonna report it there right now.

[Andarist]

When you have reported this I've added dev-only error in https://github.com/emotion-js/emotion/pull/1020 so it's easy to catch and correct the mistake. Seems like there is nothing more to do here. Thanks for the report!

[Slapbox]

@Andarist I just hit this, or something closely related. The issue only occurs after bundling our project. I'd guess I've hit this sort of bug 5 or 6 times over the past year; always only triggered in our bundled production build. Again it does appear to be a Stylis bug though.

The string that was causing an infinite loop was "line-height:1.45;width:50%;/* &:active,&:focus{border:1px solid #969296;;"

If we can determine what exactly triggers this issue, it would be amazing to have a dev warning about this.

The input code looked like below. I'm guessing that perhaps nesting a single line comment inside of a multi-line comment caused it?

return css`
  line-height: 1.45;
  width: 50%;

  /*
    &:active,
    &:focus {
      border: 1px solid ${editMode.button.active.border}; //  @TODO 3.14 -- Remove from palette if unused
    } */
`

[Andarist]

The input code looked like below. I'm guessing that perhaps nesting a single line comment inside of a multi-line comment caused it?

Hard to tell. You would have to prepare a runnable repro case so I could take a look at this.

@Andarist I just hit this, or something closely related. The issue only occurs after bundling our project. I'd guess I've hit this sort of bug 5 or 6 times over the past year; always only triggered in our bundled production build. Again it does appear to be a Stylis bug though.

I strongly recommend checking out v11 - it's almost ready and includes Stylis v4 that has resolved all known issues that Stylis v3 had.

[Slapbox]

Thanks for the tip! I'm definitely down to give v11 a try. Is there a newer release than 11.0.0-next.10 from January, or is that the one to install?

[Andarist]

Just check npm versions - we have released some this month. I think .17 or .18 might be latest, but please recheck that.

[Slapbox]

Actually that's how I checked, by running npm info @emotion/core time. But the latest v11 release I saw was from January which didn't seem right.

I see now on the Github releases there are definitely newer versions, so perhaps something's wrong with publishing?

[Andarist]

@emotion/core has been renamed to @emotion/react. People have found out the previous name to be really confusing and we've decided to rename it. When upgrading a simple find&replace all should do the trick for this change.