Optional chaining inside arrow function inside template literals doesn't work #584

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

We're using React with styled-components, which uses template literals for CSS definition. Inside this you can also specify arrow functions that receive props. Here, we're using optional chaining for conditionally accessing properties of props. This breaks the syntax highlighting of subsequent lines up until the end of the file.

Example:

export default styled.button`
  width: ${props => props.theme?.width || '100%'};
  height: ${props => props.theme?.height || '100%'};
`

How it looks:

How it looks with ? removed:

Steps to Reproduce

1. Add the code above to a file

Expected behavior: Syntax highlighting doesn't break with optional chaining

Actual behavior: Syntax highlighting of subsequent lines up until the end of the file breaks

Reproduces how often: 100%

Versions

> atom --version
Atom    : 1.28.0
Electron: 2.0.3
Chrome  : 61.0.3163.100
Node    : 8.9.3

> apm --version
apm  1.19.0
npm  3.10.10
node 6.9.5 x64
atom 1.28.0
python 2.7.12
git 2.8.2