Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

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

Open
@ghost

Description

Prerequisites

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:

image

How it looks with ? removed:

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions