Emotion: More than 10 computed values in one class breaks the babel replacement.

[hamlim]

Any number of more than 10 computed values using css or styled don't get their replacements replaced.

(Sorry for yet another issue, just been stress testing Emotion recently 😆 )

• emotion version: ^5.1.3
• react version: ^15.6.1

Relevant code.

See the demo repo here: https://github.com/hamlim/emotion-breaks-after-ten-computed/blob/master/src/App.js

const app = css`
  background: ${'white'};
  color: ${'black'};
  text-decoration: ${'underline'};
  display: ${'block'};
  border-radius: ${'3px'};
  padding: ${'25px'};
  width: ${'500px'};
  z-index: ${100};
  font-size: ${'18px'};
  text-align: ${'center'};
  border: ${'solid 1px red'};
`;

What happened:

The 11th computed value only shows as xxx10xxx:

Reproduction:

Use css or styled and have 11 computed values of any kind (just template expressions will work like in the sample above)

Problem description:

Seems like Emotion only catches single digits when matching xxx[number]xxx.

Suggested solution:

The plugin should catch more than just single digit replacements.

[hamlim]

Sounds like changing possibly changing this line https://github.com/tkh44/emotion/blob/master/src/babel.js#L22 to:

const re = /xxx(\S*)xxx|attr\(([^,\s)]+)(?:\s*([^,)]*)?)(?:,\s*(\S+))?\)/gm

(added an * right after the \S in-between the xxx's

This allows it to match xxx10xxx and up. But I don't have too much experience with regex pattern matching, only tested roughly here: https://regex101.com/r/tPdzC7/1 so this might act in different ways too.

[tkh44]

Released in 5.1.4

cc @hamlim

[hamlim]

Thanks a ton for fixing this!