JavaScript (Babel).YAML-tmLanguage

# [PackageDev] target_format: plist, ext: tmLanguage
name: JavaScript (Babel)
scopeName: source.js.jsx
fileTypes: [js, jsx, babel, es6]
firstLineMatch: ^#!\s*/.*\b(node|js)$\n?

patterns:
- include: '#core'

repository:
  core:
    patterns:
    - include: '#literal-function-labels'
    - include: '#literal-arrow-function-labels'
    - include: '#literal-labels'

    - include: '#literal-for'
    - include: '#literal-switch'

    - include: '#styled-components'           # add support for styled-components
    - include: '#graphql'

    - include: '#expression'
    - include: '#literal-punctuation'

  expression:
    patterns:
    - include: '#merge-conflits'
    - include: '#literal-regexp'              # before operators and keywords to avoid ambiguities
    - include: '#literal-jsx'
    - include: '#es7-decorators'
    - include: '#support-class'
    - include: '#support-other'

    - include: '#literal-function'
    - include: '#literal-arrow-function'
    - include: '#literal-prototype'           # after literal-function, which includes some prototype strings

    - include: '#literal-keywords'

    - include: '#literal-method'
    - include: '#literal-module'
    - include: '#literal-class'
    - include: '#flowtype-declaration'

    - include: '#literal-number'              # after literal-method since short methods can be numbers
    - include: '#literal-template-string'
    - include: '#literal-string'
    - include: '#literal-language-constant'
    - include: '#literal-language-variable'

    - include: '#literal-constructor'
    - include: '#literal-method-call'
    - include: '#literal-function-call'

    - include: '#comments'
    - include: '#brackets'

    - include: '#literal-operators'
    - include: '#literal-variable'

  round-brackets:
    patterns:
    - name: meta.group.braces.round.js
      begin: \(
      beginCaptures:
        '0': {name: meta.brace.round.begin.js}
      end: \)
      endCaptures:
        '0': {name: meta.brace.round.end.js}
      patterns:
      - include: '#expression'

  square-brackets:
    patterns:
    - name: meta.group.braces.square.js
      begin: \[
      beginCaptures:
        '0': {name: meta.brace.square.begin.js}
      end: \]
      endCaptures:
        '0': {name: meta.brace.square.end.js}
      patterns:
      - include: '#expression'

  curly-brackets:
    patterns:
    - name: meta.group.braces.curly.js
      begin: '{'
      beginCaptures:
        '0': {name: meta.brace.curly.begin.js}
      end: '}'
      endCaptures:
        '0': {name: meta.brace.curly.end.js}
      patterns:
      - include: $self

  brackets:
    patterns:
    - include: '#round-brackets'
    - include: '#square-brackets'
    - include: '#curly-brackets'

  comments:
    patterns:
    - name: comment.block.documentation.js
      begin: /\*\*(?!/)
      captures:
        '0': {name: punctuation.definition.comment.js}
      end: \*/

    - name: comment.block.js
      begin: /\*
      beginCaptures:
        '0': {name: punctuation.definition.comment.begin.js}
      end: \*/
      endCaptures:
        '0': {name: punctuation.definition.comment.end.js}

    - name: comment.block.html.js
      match: (?><!--|-->)
      captures:
        '0': {name: punctuation.definition.comment.js}

    - name: comment.line.double-slash.js
      match: (//).*$\n?
      captures:
        '1': {name: punctuation.definition.comment.js}

    - name: comment.line.shebang.js
      match: ^(#!).*$\n?
      captures:
        '1': {name: punctuation.definition.comment.js}

  function-declaration-parameters:
    patterns:
    - begin: \(
      beginCaptures:
        '0': {name: punctuation.definition.parameters.begin.js}
      end: \)
      endCaptures:
        '0': {name: punctuation.definition.parameters.end.js}
      patterns:
      - include: '#comments'
      - include: '#flowtype-annotation'
      - name: keyword.operator.spread.js
        match: (?<!\.)\.\.\.
      - name: variable.parameter.function.js
        match: ([_$a-zA-Z][$\w]*)
      - name: punctuation.separator.parameter.function.js
        match: ','
      - name: meta.parameter.optional.js
        begin: '='
        beginCaptures:
          '0': {name: keyword.operator.assignment.js}
        end: (?=[,)])
        patterns:
        - include: '#expression'

  literal-module:
    patterns:
    - name: keyword.operator.module.js
      match: (?<!\.)\b(?>import|export|default|from|as)\b

  literal-class:
    patterns:
    # e.g. class MyClass {  }
    - name: meta.class.js
      begin: (?<!\.)\b(?:(class)|(interface))\b
      beginCaptures:
        '1': {name: storage.type.class.js}
        '2': {name: storage.type.interface.flowtype.js}
      end: \}
      endCaptures:
        '0': {name: meta.brace.curly.end.js}
      patterns:
      - include: '#comments'
      - begin: ([_$a-zA-Z][$\w]*)
        beginCaptures:
          '0': {name: entity.name.class.js}
        end: (?={)
        patterns:
        - include: '#comments'
        - include: '#flowtype-polymorph'
        - name: meta.class.extends.js
          begin: (?<!\.)\b(extends)\b
          beginCaptures:
            '0': {name: storage.type.extends.js}
          end: (?={)
          patterns:
          - include: '#flowtype-polymorph'
          - include: '#expression'
      - begin: \{
        beginCaptures:
          '0': {name: meta.brace.curly.begin.js}
        end: (?=})
        patterns:
        - include: '#es7-decorators'
        - include: '#class-properties'
        - include: '#class-method-definition'
        - include: '#class-method-storage'
        - include: '#brackets'
        - include: '#comments'

  flowtype-declaration:
    patterns:
    - name: support.type.declare.flowtype.js
      match: (?<!\.)\b(declare)\b

    - name: meta.type.flowtype.js
      begin: (?<!\.)\b(type)\b(?=\s*[_$a-zA-Z])
      beginCaptures:
        '1': {name: support.type.type.flowtype.js}
      end: (?=\s*(;|from))
      patterns:
      - include: '#flowtype-tokens'

    - name: meta.type.flowtype.js
      begin: (?<!\.)\b(type)\b(?=\s*{)
      beginCaptures:
        '1': {name: support.type.type.flowtype.js}
      end: (?<=})
      patterns:
      - include: '#comments'
      - include: '#flowtype-brackets'
      - include: '#flowtype-polymorph'
      - name: entity.name.type.js
        match: ([_$a-zA-Z][$\w]*)

  class-method-definition:
    patterns:
    # e,g. @@iterator(): Iterator<[K, V]>;
    # e.g. static (o: ?void): {[key: any]: any};
    # e.g. return<R>(value: R): { done: true, value: R };
    # e.g. <T: Object>(o: T): T;
    - name: meta.short-method.flowtype.js
      begin: (@@[_$a-zA-Z][$\w]*|static|return)(?=\s*[<(])|(?=\s*<)
      beginCaptures:
        '1': {name: keyword.operator.flowtype.js}
      end: (?=\s*[;{])
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'
      - include: '#flowtype-annotation'
      - include: '#comments'
      - include: '#curly-brackets'

    # In objects and flow annotations it can't be assumed that a start quote
    # or start square-bracket is for a method - it may be a computed property.
    # For multi-line quoted short methods and computed property methods, only
    # the polymorphism constraints and parameters are matched.
    - name: meta.class-method.computed.js
      begin: (?<=[]"'])\s*(?=[<(])
      end: (?=\s*[;{])
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'
      - include: '#flowtype-annotation'
      - include: '#comments'
      - include: '#curly-brackets'

    - name: meta.class-accessor.js
      begin: >-
        (?x)
          ((?>get|set)\s+)
          (?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))|
            (([_$a-zA-Z][$\w]*|\d+))
          )(?=\s*[<(])
      beginCaptures:
        '1': {name: storage.type.js}
        '2': {name: string.quoted.js}
        '3': {name: punctuation.definition.string.begin.js}
        '4': {name: entity.name.function.js}
        '5': {name: punctuation.definition.string.end.js}
        '6': {name: string.quoted.js}
        '7': {name: punctuation.definition.string.begin.js}
        '8': {name: entity.name.function.js}
        '9': {name: punctuation.definition.string.end.js}
        '10': {name: string.unquoted.js}
        '11': {name: entity.name.function.js}
      end: (?=\s*[;{])
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'
      - include: '#flowtype-annotation'
      - include: '#comments'
      - include: '#curly-brackets'

    - name: meta.class-method.js
      begin: >-
        (?x)
          (?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))|
            (([_$a-zA-Z][$\w]*|\d+))
          )(?=\s*[<(])
      beginCaptures:
        '1': {name: string.quoted.js}
        '2': {name: punctuation.definition.string.begin.js}
        '3': {name: entity.name.function.js}
        '4': {name: punctuation.definition.string.end.js}
        '5': {name: string.quoted.js}
        '6': {name: punctuation.definition.string.begin.js}
        '7': {name: entity.name.function.js}
        '8': {name: punctuation.definition.string.end.js}
        '9': {name: string.unquoted.js}
        '10': {name: entity.name.function.js}
      end: (?=\s*[;{])
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'
      - include: '#flowtype-annotation'
      - include: '#comments'
      - include: '#curly-brackets'

  class-method-storage:
    patterns:
    - name: storage.modifier.js
      match: (?<!\.)\b(?>static|declare)\b

    - name: storage.type.js
      match: (?<!\.)\b(async)\b

    - name: storage.type.js
      match: (?<!\.)\b(get|set)\b(?!\s*\()

    - name: keyword.generator.asterisk.js
      match: \*

  class-properties:
    patterns:
    - name: meta.class.property.js
      begin: ([_$a-zA-Z][$\w]*)(?=\s*[:=])
      beginCaptures:
        '1': {name: variable.other.property.js}
      end: (?=\s*[;}])
      patterns:
      - include: '#flowtype-annotation'
      - include: '#expression'

  literal-method:
    patterns:
    # e.g. play(arg1, arg2) {  }
    - name: meta.method.js
      begin: >-
        (?x)
          (?:\b(static)\s+)?
          (?:\b(async)\s+)?
          (?:(\*)\s*)?
          (?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))|
            (([_$a-zA-Z][$\w]*|\d+))
          )
          (?=\s*(\((?>(?>[^()]+)|\g<-1>)*\))(?>\s|/\*.*\*/)*\{)
      beginCaptures:
        '1': {name: storage.type.js}
        '2': {name: storage.type.js}
        '3': {name: keyword.generator.asterisk.js}
        '4': {name: string.quoted.js}
        '5': {name: punctuation.definition.string.begin.js}
        '6': {name: entity.name.function.js}
        '7': {name: punctuation.definition.string.end.js}
        '8': {name: string.quoted.js}
        '9': {name: punctuation.definition.string.begin.js}
        '10': {name: entity.name.function.js}
        '11': {name: punctuation.definition.string.end.js}
        '12': {name: string.unquoted.js}
        '13': {name: entity.name.function.js}
      end: (?<=\))
      patterns:
      - include: '#function-declaration-parameters'

    # getter/setter
    - name: meta.accessor.js
      begin: >-
        (?x)
          \b(?:(static)\s+)?
          (get|set)\s+
          ([_$a-zA-Z][$\w]*|\d+)\s*
          (?=(\((?>(?>[^()]+)|\g<-1>)*\))(?>\s|/\*.*\*/)*\{)
      beginCaptures:
        '1': {name: storage.type.js}
        '2': {name: storage.type.accessor.js}
        '3': {name: entity.name.accessor.js}
      end: (?<=\))
      patterns:
      - include: '#function-declaration-parameters'

  literal-prototype:
    patterns:
    # e.g. Sound.prototype = {  } when extending an object
    - name: meta.prototype.declaration.js
      match: ([_$a-zA-Z][$\w]*)(\.)(prototype)\s*(=)\s*
      captures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: variable.language.prototype.js}
        '4': {name: keyword.operator.assignment.js}

    # e.g. Sound.prototype
    - name: meta.prototype.access.js
      match: ([_$a-zA-Z][$\w]*)(\.)(prototype)\b
      captures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: variable.language.prototype.js}

  literal-function:
    patterns:
    # e.g. function play(arg1, arg2) {  }
    # e.g. play = function(arg1, arg2) {  }
    - name: meta.function.js
      begin: >-
        (?x)
          (?:([_$a-zA-Z][$\w]*)\s*(=)\s*)?
          (?:(async)\s+)?
          (function)(?>\s*(\*)|(?=[\s(<]))
          \s*([_$a-zA-Z][$\w]*)?
      beginCaptures:
        '1': {name: entity.name.function.js}
        '2': {name: keyword.operator.assignment.js}
        '3': {name: storage.type.js}
        '4': {name: storage.type.function.js}
        '5': {name: keyword.generator.asterisk.js}
        '6': {name: entity.name.function.js}
      end: (?<=\))
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'

    # e.g. Sound.prototype.play = function(arg1, arg2) {  }
    - name: meta.function.prototype.js
      begin: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)(prototype)
          (\.)([_$a-zA-Z][$\w]*)
          \s*(=)
          \s*(?:(async)\s+)?
          \s*(function)(?>\s*(\*)|(?=[\s(<]))
          \s*([_$a-zA-Z][$\w]*)?\s*
      beginCaptures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: variable.language.prototype.js}
        '4': {name: keyword.operator.accessor.js}
        '5': {name: entity.name.function.js}
        '6': {name: keyword.operator.assignment.js}
        '7': {name: storage.type.js}
        '8': {name: storage.type.function.js}
        '9': {name: keyword.generator.asterisk.js}
        '10': {name: entity.name.function.js}
      end: (?<=\))
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'

    # e.g. Sound.play = function(arg1, arg2) {  }
    - name: meta.function.static.js
      begin: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)([_$a-zA-Z][$\w]*)
          \s*(=)
          \s*(?:(async)\s+)?
          \s*(function)(?>\s*(\*)|(?=[\s(<]))
          \s*([_$a-zA-Z][$\w]*)?\s*
      beginCaptures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: entity.name.function.js}
        '4': {name: keyword.operator.assignment.js}
        '5': {name: storage.type.js}
        '6': {name: storage.type.function.js}
        '7': {name: keyword.generator.asterisk.js}
        '8': {name: entity.name.function.js}
      end: (?<=\))
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'

  literal-function-labels:
    patterns:
    # e.g. play: function(arg1, arg2) {  }
    # e.g. "play": function(arg1, arg2) {  }
    - name: meta.function.json.js
      begin: >-
          (?x)
            (?>
              ((')((?>[^'\\]|\\.)*)('))|
              ((")((?>[^"\\]|\\.)*)("))|
              (([_$a-zA-Z][$\w]*|\d+))
            )
            \s*(:)
            \s*(?:\b(async)\s+)?
            \s*(function)(?>\s*(\*)|(?=[\s(<]))
            \s*([_$a-zA-Z][$\w]*)?
      beginCaptures:
        '1': {name: string.quoted.js}
        '2': {name: punctuation.definition.string.begin.js}
        '3': {name: entity.name.function.js}
        '4': {name: punctuation.definition.string.end.js}
        '5': {name: string.quoted.js}
        '6': {name: punctuation.definition.string.begin.js}
        '7': {name: entity.name.function.js}
        '8': {name: punctuation.definition.string.end.js}
        '9': {name: string.unquoted.js}
        '10': {name: entity.name.function.js}
        '11': {name: punctuation.separator.key-value.js}
        '12': {name: storage.type.js}
        '13': {name: storage.type.function.js}
        '14': {name: keyword.generator.asterisk.js}
        '15': {name: entity.name.function.js}
      end: (?<=\))
      patterns:
      - include: '#flowtype-polymorph'
      - include: '#function-declaration-parameters'

  literal-arrow-function:
    patterns:
    # e.g. (args) => { }
    # e.g. play = (args) => { }
    - name: meta.function.arrow.js
      begin: >-
        (?x)
          (?:([_$a-zA-Z][$\w]*)\s*(=)\s*)?
          (?:\b(async)\s+)?
          (?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      beginCaptures:
        '1': {name: entity.name.function.js}
        '2': {name: keyword.operator.assignment.js}
        '3': {name: storage.type.js}
      end: (?<=\))\s*(=>)
      endCaptures:
        '1': {name: storage.type.function.arrow.js}
      patterns:
      - include: '#function-declaration-parameters'

    # e.g. arg => { }
    # e.g. play = arg => { }
    - name: meta.function.arrow.js
      match: >-
        (?x)
          (?:([_$a-zA-Z][$\w]*)\s*(=)\s*)?
          (?:(async)\s+)?
          \b([_$a-zA-Z][$\w]*)\s*(=>)
      captures:
        '1': {name: entity.name.function.js}
        '2': {name: keyword.operator.assignment.js}
        '3': {name: storage.type.js}
        '4': {name: variable.parameter.function.js}
        '5': {name: storage.type.function.arrow.js}

    # e.g. Sound.prototype.play = (args) => { }
    - name: meta.prototype.function.arrow.js
      begin: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)(prototype)
          (\.)([_$a-zA-Z][$\w]*)
          \s*(=)
          \s*(async)?
          \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      beginCaptures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: variable.language.prototype.js}
        '4': {name: keyword.operator.accessor.js}
        '5': {name: entity.name.function.js}
        '6': {name: keyword.operator.assignment.js}
        '7': {name: storage.type.js}
      end: (?<=\))\s*(=>)
      endCaptures:
        '1': {name: storage.type.function.arrow.js}
      patterns:
      - include: '#function-declaration-parameters'

    # e.g. Sound.prototype.play = arg => { }
    - name: meta.prototype.function.arrow.js
      match: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)(prototype)
          (\.)([_$a-zA-Z][$\w]*)
          \s*(=)
          \s*(async)?
          \s*\b([_$a-zA-Z][$\w]*)\s*(=>)
      captures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: variable.language.prototype.js}
        '4': {name: keyword.operator.accessor.js}
        '5': {name: entity.name.function.js}
        '6': {name: keyword.operator.assignment.js}
        '7': {name: storage.type.js}
        '8': {name: variable.parameter.function.js}
        '9': {name: storage.type.function.arrow.js}

    # e.g. Sound.play = (args) => { }
    - name: meta.function.static.arrow.js
      begin: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)([_$a-zA-Z][$\w]*)
          \s*(=)
          \s*(async)?
          \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      beginCaptures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: entity.name.function.js}
        '4': {name: keyword.operator.assignment.js}
        '5': {name: storage.type.js}
      end: (?<=\))\s*(=>)
      endCaptures:
        '1': {name: storage.type.function.arrow.js}
      patterns:
      - include: '#function-declaration-parameters'

    # e.g. Sound.play = arg => { }
    - name: meta.function.static.arrow.js
      match: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)([_$a-zA-Z][$\w]*)
          \s*(=)
          \s*(async)?
          \s*\b([_$a-zA-Z][$\w]*)\s*(=>)
      captures:
        '1': {name: entity.name.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: entity.name.function.js}
        '4': {name: keyword.operator.assignment.js}
        '5': {name: storage.type.js}
        '6': {name: variable.parameter.function.js}
        '7': {name: storage.type.function.arrow.js}

  literal-arrow-function-labels:
    patterns:
    # e.g. play: (args) => { }
    # e.g. "play": (args) => { }
    - name: meta.function.json.arrow.js
      begin: >-
        (?x)
          (?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))|
            (([_$a-zA-Z][$\w]*|\d+))
          )
          \s*(:)
          \s*(?:\b(async)\s+)?
          \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      beginCaptures:
        '1': {name: string.quoted.js}
        '2': {name: punctuation.definition.string.begin.js}
        '3': {name: entity.name.function.js}
        '4': {name: punctuation.definition.string.end.js}
        '5': {name: string.quoted.js}
        '6': {name: punctuation.definition.string.begin.js}
        '7': {name: entity.name.function.js}
        '8': {name: punctuation.definition.string.end.js}
        '9': {name: string.unquoted.js}
        '10': {name: entity.name.function.js}
        '11': {name: punctuation.separator.key-value.js}
        '12': {name: storage.type.js}
      end: (?<=\))\s*(=>)
      endCaptures:
        '1': {name: storage.type.function.arrow.js}
      patterns:
      - include: '#function-declaration-parameters'

    # e.g. play: arg => { }
    # e.g. "play": arg => { }
    - name: meta.function.json.arrow.js
      match: >-
        (?x)
          (?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))|
            (([_$a-zA-Z][$\w]*|\d+))
          )
          \s*(:)
          \s*(?:\b(async)\s+)?
          \s*\b([_$a-zA-Z][$\w]*)\s*(=>)
      captures:
        '1': {name: string.quoted.js}
        '2': {name: punctuation.definition.string.begin.js}
        '3': {name: entity.name.function.js}
        '4': {name: punctuation.definition.string.end.js}
        '5': {name: string.quoted.js}
        '6': {name: punctuation.definition.string.begin.js}
        '7': {name: entity.name.function.js}
        '8': {name: punctuation.definition.string.end.js}
        '9': {name: string.unquoted.js}
        '10': {name: entity.name.function.js}
        '11': {name: punctuation.separator.key-value.js}
        '12': {name: storage.type.js}
        '13': {name: variable.parameter.function.js}
        '14': {name: storage.type.function.arrow.js}

  literal-function-call:
    patterns:
    - name: meta.function-call.without-arguments.js
      match: ([_$a-zA-Z][$\w]*)\s*(\(\s*\))
      captures:
        '1': {name: entity.name.function.js}
        '2': {name: meta.group.braces.round.function.arguments.js}

    - name: meta.function-call.with-arguments.js
      match: ([_$a-zA-Z][$\w]*)\s*(?=\()
      captures:
        '1': {name: entity.name.function.js}

    - name: meta.function-call.tagged-template.js
      match: ([_$a-zA-Z][$\w]*)\s*(?=`)
      captures:
        '1': {name: entity.name.function.js}

  literal-method-call:
    patterns:
    - name: meta.function-call.static.without-arguments.js
      match: >-
        (?x)
          (?:(?<=\.)|\b)
          ([A-Z][$\w]*)\s*(\.)
          ([_$a-zA-Z][$\w]*)\s*
          (\(\s*\))
      captures:
        '1': {name: variable.other.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: entity.name.function.js}
        '4': {name: meta.group.braces.round.function.arguments.js}

    - name: meta.function-call.static.with-arguments.js
      match: >-
        (?x)
          (?:(?<=\.)|\b)
          ([A-Z][$\w]*)\s*(\.)
          ([_$a-zA-Z][$\w]*)\s*
          (?=\()
      captures:
        '1': {name: variable.other.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: entity.name.function.js}

    - name: meta.function-call.method.without-arguments.js
      match: >-
        (?x)
          (?<=\.)
          ([_$a-zA-Z][$\w]*)\s*
          (\(\s*\))
      captures:
        '1': {name: entity.name.function.js}
        '2': {name: meta.group.braces.round.function.arguments.js}

    - name: meta.function-call.method.with-arguments.js
      match: >-
        (?x)
          (?<=\.)
          ([_$a-zA-Z][$\w]*)\s*
          (?=\()
      captures:
        '1': {name: entity.name.function.js}

  literal-language-variable:
    patterns:
    - name: variable.language.arguments.js
      match: (?<!(?<!\.\.)\.)\b(arguments)\b

    - name: variable.language.super.js
      match: (?<!(?<!\.\.)\.)\b(super)\b

    - name: variable.language.this.js
      match: (?<!(?<!\.\.)\.)\b(this)\b

    - name: variable.language.self.js
      match: (?<!(?<!\.\.)\.)\b(self)\b

    - name: variable.language.proto.js
      match: (?<=\.)(__proto__)\b

    - name: variable.language.constructor.js
      match: (?<=\.)(constructor)\b

    - name: variable.language.prototype.js
      match: (?<=\.)(prototype)\b

  literal-language-constant:
    patterns:
    - name: constant.language.boolean.true.js
      match: (?<!\.)\b(true)\b

    - name: constant.language.boolean.false.js
      match: (?<!\.)\b(false)\b

    - name: constant.language.null.js
      match: (?<!\.)\b(null)\b

    - name: constant.language.undefined.js
      match: (?<!\.)\b(undefined)\b

    - name: constant.language.nan.js
      match: (?<!\.)\b(NaN)\b

  literal-constructor:
    patterns:
    - name: meta.instance.constructor.js
      begin: (new)\s+(?=[_$a-zA-Z][$\w.]*)
      beginCaptures:
        '1': {name: keyword.operator.new.js}
      end: (?![_$a-zA-Z][$\w.]*)
      patterns:
      - include: '#support-class'
      - include: '#support-other'
      - match: ([_$a-zA-Z][$\w.]*\.)?([_$a-zA-Z][$\w]*)
        captures:
          '2': {name: variable.function.constructor.js}

  literal-keyword-storage:
    patterns:
    - name: storage.type.js
      match: (?<!\.)\b(?>const|let|var)\b

  literal-keywords:
    patterns:
    - include: '#literal-keyword-storage'

    - match: (?<!\.)\b((?>await|yield))\b(?:\s*(\*))?
      captures:
        '1': {name: keyword.control.flow.js}
        '2': {name: keyword.generator.asterisk.js}

    - name: keyword.control.flow.js
      match: (?<!\.)\b(return)\b

    - name: keyword.control.conditional.js
      match: (?<!\.)\b(?>if|else)\b

    - name: keyword.control.trycatch.js
      match: (?<!\.)\b(?>catch|finally|throw|try)\b

    - name: keyword.control.loop.js
      match: (?<!\.)\b(?>break|continue|do|goto|while|case|default)\b

    - name: keyword.other.reserved.js
      match: (?<!\.)\b(?>enum|module|public|package|private|interface|protected)\b

    - name: keyword.other.js
      match: (?<!\.)\b(debugger)\b

  literal-for:
    patterns:
    - name: meta.for.js
      begin: (?<!\.)\b(for)\b
      beginCaptures:
        '1': {name: keyword.control.loop.js}
      end: \)
      endCaptures:
        '0': {name: meta.brace.round.end.js}
      patterns:
      - include: '#comments'
      - begin: \(
        beginCaptures:
          '0': {name: meta.brace.round.begin.js}
        end: (?=\))
        patterns:
        - include: '#literal-keyword-storage'
        - include: '#expression'
        - include: '#literal-punctuation'

  literal-switch:
    patterns:
    - name: meta.switch.js
      begin: (?<!\.)\b(switch)\b
      beginCaptures:
        '1': {name: keyword.control.switch.js}
      end: \}
      endCaptures:
        '0': {name: meta.brace.curly.end.js}
      patterns:
      - include: '#comments'
      - include: '#round-brackets'
      - begin: \{
        beginCaptures:
          '0': {name: meta.brace.curly.begin.js}
        end: (?=})
        patterns:
        - begin: (?<!\.)\b(case|default)\b
          beginCaptures:
            '1': {name: keyword.control.switch.js}
          end: (?=:)
          patterns:
          - include: '#expression'
        - include: $self

  literal-operators:
    patterns:
    - name: keyword.operator.js
      match: (?<!\.)\b(?>delete|instanceof|in|new|of|typeof|void|with)\b

    - name: keyword.operator.logical.js
      match: >-
        (?x)
          !(?!=)| # logical-not     right-to-left   right
          &&    | # logical-and     left-to-right   both
          \|\|    # logical-or      left-to-right   both

    - name: keyword.operator.assignment.js
      match: >-
        (?x)
          =(?!=)  # assignment      right-to-left   both

    - name: keyword.operator.assignment.augmented.js
      match: >-
        (?x)
          %=   | # assignment      right-to-left   both
          &=   | # assignment      right-to-left   both
          \*=  | # assignment      right-to-left   both
          \+=  | # assignment      right-to-left   both
          -=   | # assignment      right-to-left   both
          /=   | # assignment      right-to-left   both
          \^=  | # assignment      right-to-left   both
          \|=  | # assignment      right-to-left   both
          <<=  | # assignment      right-to-left   both
          >>=  | # assignment      right-to-left   both
          >>>=   # assignment      right-to-left   both

    - name: keyword.operator.bitwise.js
      match: >-
        (?x)
          ~    | # bitwise-not     right-to-left   right
          <<   | # bitwise-shift   left-to-right   both
          >>>  | # bitwise-shift   left-to-right   both
          >>   | # bitwise-shift   left-to-right   both
          &    | # bitwise-and     left-to-right   both
          \^   | # bitwise-xor     left-to-right   both
          \|     # bitwise-or      left-to-right   both

    - name: keyword.operator.relational.js
      match: >-
        (?x)
          <=   | # relational      left-to-right   both
          >=   | # relational      left-to-right   both
          <    | # relational      left-to-right   both
          >      # relational      left-to-right   both

    - name: keyword.operator.comparison.js
      match: >-
        (?x)
          ===  | # equality        left-to-right   both
          !==  | # equality        left-to-right   both
          ==   | # equality        left-to-right   both
          !=     # equality        left-to-right   both

    - name: keyword.operator.arithmetic.js
      match: >-
        (?x)
          --   | # decrement       n/a             right-or-left
          \+\+ | # increment       n/a             right-or-left
          /    | # division        left-to-right   both
          %    | # modulus         left-to-right   both
          \*   | # multiplication  left-to-right   both
          \+   | # addition        left-to-right   both
          -      # subtraction     left-to-right   both

    - name: keyword.operator.ternary.js
      match: '[?:]'

    - name: keyword.operator.spread.js
      match: (?<!\.)\.\.\.

    - name: keyword.operator.accessor.js
      match: \.

  literal-labels:
    patterns:
    - begin: >-
        (?x)
          (?<!\?)(?<!\?\s)(?=(?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))|
          )\s*:)
      end: ':'
      endCaptures:
        '0': {name: punctuation.separator.key-value.js}
      patterns:
      - include: '#literal-string'

    - name: constant.other.object.key.js
      match: (?<!\.|\?|\?\s)([_$a-zA-Z][$\w]*)\s*(:)
      captures:
        '1': {name: string.unquoted.label.js}
        '2': {name: punctuation.separator.key-value.js}

  literal-number:
    patterns:
    - name: invalid.illegal.numeric.hex.js
      match: (?i)(?:\B[-+]|\b)0x[0-9a-f]*\.(\B|\b[0-9]+)

    - name: invalid.illegal.numeric.octal.js
      match: (?:\B[-+]|\b)0[0-9]+\.(\B|\b[0-9]+)

    - name: constant.numeric.js
      match: >-
        (?xi)
          (?:\B[-+])?
          (?:
            \b0b[0-1]*|                 # binary
            \b0o[0-7]*|                 # octal
            \b0x[0-9a-f]*|              # hex
            (
              \B\.[0-9]+|               # e.g. .999
              \b[0-9]+(\.[0-9]*)?       # e.g. 999.999, 999. or 999
            )(e[-+]?[0-9]+)?            # e.g. e+123, E-123
          )

    - name: constant.language.infinity.js
      match: (?:\B[-+]|\b)(Infinity)\b

  literal-punctuation:
    patterns:
    - name: punctuation.terminator.statement.js
      match: ;

    - name: meta.delimiter.comma.js
      match: ','

  literal-regexp:
    patterns:
    # ignore ++, -- since they're uncommon, distinguishing them is not possible in sublime text, see:
    # http://stackoverflow.com/questions/5519596/when-parsing-javascript-what-determines-the-meaning-of-a-slash
    - name: string.regexp.js
      begin: >-
        (?x)
          (?<=
            \.|\(|,|{|}|\[|;|<|>|<=|>=|==|!=|===|!==|\+|-|\*|%|\+\+|--|<<|>>|>>>|&|\||\^|!|~|&&|\|\||\?|:|=|\+=|-=|\*=|%=|<<=|>>=|>>>=|&=|\|=|\^=|/|/=|
            \Wnew|\Wdelete|\Wvoid|\Wtypeof|\Winstanceof|\Win|\Wdo|\Wreturn|\Wcase|\Wthrow|\Wyield|
            ^new|^delete|^void|^typeof|^instanceof|^in|^do|^return|^case|^throw|^yield|^
          )\s*
          (/)
          (?!/|\*|$)
      beginCaptures:
        '1': {name: punctuation.definition.string.begin.js}
      end: (/)([gimy]*)
      endCaptures:
        '1': {name: punctuation.definition.string.end.js}
        '2': {name: keyword.other.js}
      patterns:
      - include: source.js.regexp

  literal-string:
    patterns:
    - name: string.quoted.js
      begin: (["'])
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.js}
      end: (\1)|(\n)
      endCaptures:
        '1': {name: punctuation.definition.string.end.js}
        '2': {name: invalid.illegal.newline.js}
      patterns:
      - include: '#string-content'

  literal-template-string:
    begin: '`'
    beginCaptures:
      '0': {name: keyword.other.template.begin.js}
    end: '`'
    captures:
      '0': {name: keyword.other.template.end.js}
    patterns:
    - include: '#string-content'
    - name: constant.character.escape.js
      match: \\`
    - begin: \${
      beginCaptures:
        '0': {name: keyword.other.substitution.begin.js}
      end: '}'
      endCaptures:
        '0': {name: keyword.other.substitution.end.js}
      patterns:
      - include: '#expression'
    # Workaround so themes color the contents of template strings as "string",
    # but not any interpolated expression within.
    - name: string.interpolated.js
      match: '.'

  string-content:
    # https://mathiasbynens.be/notes/javascript-escapes
    patterns:
    - name: constant.character.escape.newline.js
      match: \\\s*\n

    - name: constant.character.escape.js
      match: \\([1-7][0-7]{0,2}|[0-7]{2,3}|[bfnrtv0'"\\]|x\h{2}|u\{\h+\}|u\h{4})

  # https://github.com/styled-components/styled-components
  styled-components:
    patterns:
    - name: meta.styled-components.js
      begin: (?<!\.)\b(injectGlobal|keyframes)\s*(`)
      beginCaptures:
        '1': {name: variable.function.tagged-template.js}
        '2': {name: punctuation.definition.string.template.begin.js}
      contentName: source.css.embedded.js
      end: '`'
      endCaptures:
        '0': {name: punctuation.definition.string.template.end.js}
      patterns:
      - include: source.js.css

    - name: meta.styled-components.js
      begin: (?<!\.)\b(styled)(\.)([_$a-zA-Z][$\w]*)\s*(`)
      beginCaptures:
        '1': {name: variable.other.object.js}
        '2': {name: punctuation.accessor.js}
        '3': {name: variable.function.tagged-template.js}
        '4': {name: punctuation.definition.string.template.begin.js}
      contentName: source.css.embedded.js
      end: '`'
      endCaptures:
        '0': {name: punctuation.definition.string.template.end.js}
      patterns:
      - include: source.js.css

    - name: meta.styled-components.js
      begin: (?<!\.)\b(styled)\s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*`)
      captures:
        '1': {name: meta.function-call.with-arguments.js entity.name.function.js}
      end: (?<=`)
      patterns:
      # Like #round-brackets, but with "meta.function-call.with-arguments.js" so
      # it can stop before the template starts.
      - name: meta.function-call.with-arguments.js meta.group.js
        begin: \(
        beginCaptures:
          '0': {name: punctuation.definition.group.begin.js}
        end: \)
        endCaptures:
          '0': {name: punctuation.definition.group.end.js}
        patterns:
        - include: '#expression'
      - begin: '`'
        beginCaptures:
          '0': {name: punctuation.definition.string.template.begin.js}
        end: '`'
        contentName: source.css.embedded.js
        endCaptures:
          '0': {name: punctuation.definition.string.template.end.js}
        patterns:
        - include: source.js.css

  graphql:
    patterns:
    - name: meta.graphql.js
      begin: '\s*+gql`'
      end: '`'
      patterns:
      - include: source.graphql
      - name: js
        begin: '\${'
        end: '}'
        patterns:
        - include: '#core'

    - name: meta.graphql.js
      begin: '\s*+`#graphql'
      end: '`'
      patterns:
      - include: source.graphql
      - name: js
        begin: '\${'
        end: '}'
        patterns:
        - include: '#core'


  literal-variable:
    patterns:
    # e.g. CONSTANT
    - name: variable.other.constant.js
      match: _*?[A-Z][_$\dA-Z]*\b

    # e.g. Class.property
    - name: meta.property.class.js
      match: \b([A-Z][$\w]*)\s*(\.)([_$a-zA-Z][$\w]*)
      captures:
        '1': {name: variable.other.class.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: variable.other.property.static.js}

    # e.g. obj.property
    - name: variable.other.object.js
      match: (?<!\.)([_$a-zA-Z][$\w]*)\s*(?=[\[\.])
      captures:
        '1': {name: variable.other.object.js}

    # e.g. obj.property
    - name: meta.property.object.js
      match: (?<=\.)\s*([_$a-zA-Z][$\w]*)
      captures:
        '1': {name: variable.other.property.js}

    - name: variable.other.readwrite.js
      match: '[_$a-zA-Z][$\w]*'

  support-class:
    patterns:
    - name: support.class.builtin.js
      match: (?<!\.)\b(Array|ArrayBuffer|Boolean|DataView|Date|Float32Array|Float64Array|Function|Infinity|Int16Array|Int32Array|Int8Array|JSON|Map|Math|NaN|Number|Object|Promise|Proxy|Reflect|RegExp|Set|String|Symbol|System|TypeError|Uint16Array|Uint32Array|Uint8Array|Uint8ClampedArray|WeakMap|WeakSet)\b

    - name: support.class.error.js
      match: (?<!\.)\b((?>Eval|Range|Reference|Syntax|Type|URI)?Error)\b

    - name: support.class.node.js
      match: \b(?>Buffer)\b

  support-other:
    patterns:
    - name: support.function.builtin.js
      match: (?<!\.)\b(constructor|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|escape|eval|hasOwnProperty|isFinite|isNaN|isPrototypeOf|parseFloat|parseInt|propertyIsEnumerable|toLocaleString|toString|unescape|valueOf)\b

    - name: support.function.node.js
      match: (?<!\.)\b(clearImmediate|clearInterval|clearTimeout|require|setImmediate|setInterval|setTimeout)\b

    - name: support.type.object.dom.js
      match: (?<!\.)\b(?>document|window)\b

    - name: support.type.object.node.js
      match: (?<!\.)\b(?>global|GLOBAL|root|__dirname|__filename)\b

    - match: (?<!\.)\b(console)(?:(\.)(assert|count|dir|error|group|groupCollapsed|groupEnd|info|log|profile|profileEnd|table|time|timeEnd|trace|warn))?\b
      captures:
        '1': {name: support.type.object.console.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: support.function.console.js}

    - match: (?<!\.)\b(process)(?:(\.)(?:(arch|argv|config|env|execArgv|execPath|exitCode|mainModule|pid|platform|stderr|stdin|stdout|title|version|versions)|(abort|chdir|cwd|exit|getgid|getgroups|getuid|hrtime|initgroups|kill|memoryUsage|nextTick|setgid|setgroups|setuid|umask|uptime)))?\b
      captures:
        '1': {name: support.type.object.process.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: support.type.object.process.js}
        '4': {name: support.function.process.js}

    - match: (?<!\.)\b(exports|module)(?:(\.)(children|exports|filename|id|loaded|parent))?\b
      captures:
        '1': {name: support.type.object.module.js}
        '2': {name: keyword.operator.accessor.js}
        '3': {name: support.type.object.module.js}

    # mustache
    - name: meta.tag.mustache.js
      begin: '{{'
      end: '}}'

  literal-jsx:
    contentName: meta.jsx.js
    begin: (?<=\(|\{|\[|,|&&|\|\||\?|:|=|=>|\Wreturn|^return|\Wdefault|^)(?=\s*<[_$a-zA-Z])
    end: (?<=/>|>)
    patterns:
    - include: '#jsx-tag-start'

  jsx-tag-start:
    patterns:
    - begin: (<)([_$a-zA-Z][-$:.\w]*[$\w]*)
      beginCaptures:
        '1': {name: punctuation.definition.tag.begin.jsx}
        '2': {name: entity.name.tag.html.jsx}
      end: (</)(\2)(>)|(/>)
      endCaptures:
        '1': {name: punctuation.definition.tag.begin.jsx}
        '2': {name: entity.name.tag.jsx}
        '3': {name: punctuation.definition.tag.end.jsx}
        '4': {name: punctuation.definition.tag.end.jsx}
      patterns:
      - include: '#jsx-tag-end'
      - include: '#jsx-attributes'

    - name: invalid.illegal.tag.incomplete.jsx
      match: '<'

  jsx-tag-end:
    begin: '>'
    beginCaptures:
      '0': {name: punctuation.definition.tag.end.jsx}
    end: (?=</)
    patterns:
    - include: '#jsx-tag-start'
    - include: '#jsx-evaluated-code'
    - include: '#jsx-entities'

  jsx-attributes:
    patterns:
    - include: '#jsx-attribute-name'
    - include: '#jsx-attribute-assignment'
    - include: '#jsx-string-quoted'
    - include: '#jsx-evaluated-code'
    - include: '#comments'

  jsx-attribute-name:
    name: entity.other.attribute-name.jsx
    match: '[_$a-zA-Z][-$\w]*'

  jsx-attribute-assignment:
    name: keyword.operator.assignment.jsx
    match: '='

  jsx-evaluated-code:
    name: meta.embedded.expression.jsx
    begin: '{'
    beginCaptures:
      '0': {name: punctuation.section.embedded.begin.jsx}
    end: '}'
    endCaptures:
      '0': {name: punctuation.section.embedded.end.jsx}
    patterns:
    - include: '#expression'

  jsx-string-quoted:
    name: string.quoted.jsx
    begin: (["'])
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.jsx}
    end: \1
    endCaptures:
      '0': {name: punctuation.definition.string.end.jsx}
    patterns:
    - include: '#jsx-entities'

  jsx-entities:
    patterns:
    - name: constant.character.entity.jsx
      match: '&(?:[a-zA-Z0-9]+|#\d+|#x\h+);'
    - name: invalid.illegal.bad-ampersand.jsx
      match: '&\S*;'

  # https://github.com/wycats/javascript-decorators
  es7-decorators:
    patterns:
    - name: tag.decorator.js
      match: >-
        (?x)
          (@)([_$a-zA-Z][$\w]*)\b
      captures:
        '1': {name: punctuation.definition.tag.js}
        '2': {name: entity.name.tag.js}

  merge-conflits:
    patterns:
    - match: ^([<]{7})\s(.+)$
      captures:
        '1': {name: invalid.illegal.conflict-marker.merge-into.js}
        '2': {name: invalid.illegal.string.js}
    - match: ^([=|]{7})$
      captures:
        '1': {name: invalid.illegal.conflict-marker.separator.js}
    - match: ^([>]{7})\s(.+)$
      captures:
        '1': {name: invalid.illegal.conflict-marker.other-commit.js}
        '2': {name: invalid.illegal.string.js}

  flowtype-polymorph:
    # http://flowtype.org/blog/2015/03/12/Bounded-Polymorphism.html
    name: meta.flowtype.polymorph.js
    begin: '<'
    beginCaptures:
      '0': {name: punctuation.section.flowtype.begin.js}
    end: '>'
    endCaptures:
      '0': {name: punctuation.section.flowtype.end.js}
    patterns:
    - include: '#flowtype-tokens'

  flowtype-annotation:
    patterns:
    - name: meta.flowtype.annotation.js
      begin: (?:(\?)\s*)?(:)
      beginCaptures:
        '1': {name: keyword.operator.flowtype.optional.js}
        '2': {name: keyword.operator.flowtype.annotation.js}
      end: (?=\S)
      applyEndPatternLast: 1
      patterns:
      - include: '#flowtype-tokens'

  flowtype-brackets:
    patterns:
    - begin: '{'
      beginCaptures:
        '0': {name: punctuation.section.flowtype.begin.js}
      end: '}'
      endCaptures:
        '0': {name: punctuation.section.flowtype.end.js}
      patterns:
      - include: '#flowtype-tokens'

  flowtype-identifier:
    patterns:
    - include: '#support-class'

    - name: constant.other.primitve.flowtype.js
      match: \b(?:any|bool|boolean|mixed|number|string|void)\b

    - name: variable.other.flowtype.js
      match: '[_$a-zA-Z][$\w]*'

    - name: keyword.operator.flowtype.optional.js
      match: \?

  flowtype-tokens:
    patterns:
    - begin: (?<=[:?|&=])(?=\s*{)
      end: (?<=})
      patterns:
      - include: '#flowtype-brackets'

    - name: meta.flowtype.set.js
      match: \s*([|&])\s*
      captures:
        '1': {name: keyword.operator.flowtype.other.js}

    - name: keyword.operator.flowtype.other.js
      match: '[*:?&|.]|\.\.\.|\b(typeof)\b'

    - begin: '<'
      beginCaptures:
        '0': {name: punctuation.section.flowtype.begin.js}
      end: '>'
      endCaptures:
        '0': {name: punctuation.section.flowtype.end.js}
      patterns:
      - include: '#flowtype-tokens'

    - begin: \[
      beginCaptures:
        '0': {name: punctuation.section.flowtype.begin.js}
      end: \]
      endCaptures:
        '0': {name: punctuation.section.flowtype.end.js}
      patterns:
      - include: '#flowtype-tokens'

    - begin: \(
      beginCaptures:
        '0': {name: punctuation.section.flowtype.begin.js}
      end: \)
      endCaptures:
        '0': {name: punctuation.section.flowtype.end.js}
      patterns:
      - include: '#flowtype-tokens'

    - name: meta.flowtype.function.js
      begin: '=>'
      beginCaptures:
        '0': {name: keyword.operator.flowtype.js}
      end: (?<=}|[_$a-zA-Z])
      patterns:
      - include: '#flowtype-brackets'
      - include: '#flowtype-identifier'
      - include: '#comments'

    - include: '#flowtype-identifier'
    - include: '#literal-string'
    - include: '#comments'