lit-html.sublime-syntax

%YAML 1.2
---
# http://www.sublimetext.com/docs/3/syntax.html
name: Lit HTML / Cami.js
file_extensions: [js, jsx, babel, es6]
first_line_match: ^#!\s*/.*\b(node|js)$\n?
scope: source.js

variables:
  ident: '[_$a-zA-Z][$\w]*'

contexts:
  main:
    - include: core

  prototype:
    - include: comments

  core:
    - include: literal-function-labels
    - include: literal-arrow-function-labels
    - include: literal-labels
    - include: literal-for
    - include: literal-switch
    - include: expression
    - include: literal-punctuation

  expression:
    - 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: lit-html
    - include: lit-css
    - 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: brackets

    - include: literal-operators
    - include: literal-variable

  round-brackets:
    - match: \(
      scope: meta.brace.round.begin.js
      push:
        - meta_scope: meta.group.braces.round.js
        - match: \)
          scope: meta.brace.round.end.js
          pop: true
        - include: expression

  square-brackets:
    - match: \[
      scope: meta.brace.square.begin.js
      push:
        - meta_scope: meta.group.braces.square.js
        - match: \]
          scope: meta.brace.square.end.js
          pop: true
        - include: expression

  curly-brackets:
    - match: '{'
      scope: meta.brace.curly.begin.js
      push:
        - meta_scope: meta.group.braces.curly.js
        - match: '}'
          scope: meta.brace.curly.end.js
          pop: true
        - include: main

  brackets:
    - include: round-brackets
    - include: square-brackets
    - include: curly-brackets

  comments:
    - match: /\*\*(?!/)
      scope: punctuation.definition.comment.js
      push:
        - meta_scope: comment.block.documentation.js
        - match: \*/
          scope: punctuation.definition.comment.js
          pop: true

    - match: /\*
      scope: punctuation.definition.comment.begin.js
      push:
        - meta_scope: comment.block.js
        - match: \*/
          scope: punctuation.definition.comment.end.js
          pop: true

    - match: <!--
      scope: punctuation.definition.comment.begin.html
      push:
        - meta_scope: comment.block.html
        - match: -->
          scope: punctuation.definition.comment.end.html
          pop: true

    - match: //
      scope: punctuation.definition.comment.js
      push:
        - meta_scope: comment.line.double-slash.js
        - match: $\n?
          pop: true

    - match: ^#!
      scope: punctuation.definition.comment.js
      push:
        - meta_scope: comment.line.shebang.js
        - match: $
          pop: true

  function-declaration-parameters:
    - match: \(
      scope: punctuation.definition.parameters.begin.js
      push:
        - include: flowtype-annotation
        - match: \)
          scope: punctuation.definition.parameters.end.js
          pop: true
        - match: (?<!\.)\.\.\.
          scope: keyword.operator.spread.js
        - match: ({{ident}})
          scope: variable.parameter.function.js
        - match: ','
          scope: punctuation.separator.parameter.function.js
        - match: =
          scope: keyword.operator.assignment.js
          push:
            - meta_scope: meta.parameter.optional.js
            - match: (?=[,)])
              pop: true
            - include: expression

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

  literal-class:
    # e.g. class MyClass extends OtherClass {  }
    - match: (?<!\.)(?=\b(class|interface)\b)
      push: class_def

  class_def:
    - meta_scope: meta.class.js
    - match: \b(class|interface)\b
      captures:
        1: storage.type.class.js
        2: storage.type.interface.flowtype.js
      scope: storage.type.class.js
      push: [class_body, class_extends, class_name]
    - match: (?<=})
      pop: true

  class_name:
    - match: ({{ident}})
      scope: entity.name.class.js
      set:
        - include: flowtype-polymorph
        - match: (?=\s*(?>extends|>|{))
          pop: true

  class_extends:
    - match: \b(extends)\b
      scope: storage.type.extends.js
      set:
        - match: (?={)
          pop: true
        - include: flowtype-polymorph
        - include: expression
    - match: (?={)
      pop: true

  class_body:
    - match: '{'
      scope: punctuation.definition.class.body.begin.js
      set:
        - match: '}'
          scope: punctuation.definition.class.body.end.js
          pop: true
        - include: es7-decorators
        - include: class-properties
        - include: class-method-definition
        - include: class-method-storage
        - include: brackets

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

    - match: (?<!\.)\b(type)\b(?=\s*[_$a-zA-Z])
      scope: support.type.type.flowtype.js
      push:
        - meta_scope: meta.type.flowtype.js
        - match: (?=\s*(;|from))
          pop: true
        - include: flowtype-tokens

    - match: (?<!\.)\b(type)\b(?=\s*{)
      scope: support.type.type.flowtype.js
      push:
        - meta_scope: meta.type.flowtype.js
        - match: (?<=})
          pop: true
        - include: flowtype-brackets
        - include: flowtype-polymorph
        - match: ([_$a-zA-Z][$\w]*)
          scope: entity.name.type.js

  class-method-definition:
    # 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;
    - match: (@@[_$a-zA-Z][$\w]*|static|return)(?=\s*[<(])|(?=\s*<)
      scope: keyword.operator.flowtype.js
      push:
        - meta_scope: meta.short-method.flowtype.js
        - match: (?=\s*[;{])
          pop: true
        - include: flowtype-polymorph
        - include: function-declaration-parameters
        - include: flowtype-annotation
        - 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.
    - match: (?<=[]"''])\s*(?=[<(])
      push:
        - meta_scope: meta.class-method.computed.js
        - match: (?=\s*[;{])
          pop: true
        - include: flowtype-polymorph
        - include: function-declaration-parameters
        - include: flowtype-annotation
        - include: curly-brackets

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

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

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

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

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

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

  class-properties:
    - match: ([_$a-zA-Z][$\w]*)(?=\s*[:=])
      scope: variable.other.property.js
      push:
        - meta_scope: meta.class.property.js
        - match: (?=\s*[;}])
          pop: true
        - include: flowtype-annotation
        - include: expression

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

    # getter/setter
    - match: >-
        (?x)
          \b(?:(static)\s+)?
          (get|set)\s+
          ({{ident}}|\d+)\s*
          (?=(\((?>(?>[^()]+)|\g<-1>)*\))(?>\s|/\*.*\*/)*\{)
      captures:
        1: storage.type.js
        2: storage.type.accessor.js
        3: entity.name.accessor.js
      push:
        - meta_scope: meta.accessor.js
        - match: (?<=\))
          pop: true
        - include: function-declaration-parameters

  literal-prototype:
    # e.g. Sound.prototype = {  } when extending an object
    - match: ({{ident}})(\.)(prototype)\s*(=)\s*
      scope: meta.prototype.declaration.js
      captures:
        1: entity.name.class.js
        2: keyword.operator.accessor.js
        3: variable.language.prototype.js
        4: keyword.operator.assignment.js

    # e.g. Sound.prototype
    - match: ({{ident}})(\.)(prototype)\b
      scope: meta.prototype.access.js
      captures:
        1: entity.name.class.js
        2: keyword.operator.accessor.js
        3: variable.language.prototype.js

  literal-function:
    # e.g. function play(arg1, arg2) {  }
    # e.g. play = function(arg1, arg2) {  }
    - match: >-
        (?x)
          (?:({{ident}})\s*(=)\s*)?
          (?:(async)\s+)?
          (function)(?>\s*(\*)|(?=[\s(<]))
          \s*({{ident}})?
      captures:
        1: entity.name.function.js
        2: keyword.operator.assignment.js
        3: storage.type.js
        4: storage.type.function.js
        5: keyword.generator.asterisk.js
        6: entity.name.function.js
      push:
        - meta_scope: meta.function.js
        - match: (?<=\))
          pop: true
        - include: flowtype-polymorph
        - include: function-declaration-parameters

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

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

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

  literal-arrow-function:
    # e.g. (args) => { }
    # e.g. play = (args) => { }
    - match: >-
        (?x)
          (?:({{ident}})\s*(=)\s*)?
          (?:\b(async)\s+)?
          (?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      captures:
        1: entity.name.function.js
        2: keyword.operator.assignment.js
        3: storage.type.js
      push:
        - meta_scope: meta.function.arrow.js
        - match: (?<=\))\s*(=>)
          captures:
            1: storage.type.function.arrow.js
          pop: true
        - include: function-declaration-parameters

    # e.g. arg => { }
    # e.g. play = arg => { }
    - match: >-
        (?x)
          (?:({{ident}})\s*(=)\s*)?
          (?:(async)\s+)?
          \b({{ident}})\s*(=>)
      scope: meta.function.arrow.js
      captures:
        1: entity.name.function.js
        2: keyword.operator.assignment.js
        3: storage.type.js
        4: variable.parameter.function.js
        5: storage.type.function.arrow.js

    # e.g. Sound.prototype.play = (args) => { }
    - match: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)(prototype)
          (\.)({{ident}})
          \s*(=)
          \s*(async)?
          \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      captures:
        1: entity.name.class.js
        2: keyword.operator.accessor.js
        3: variable.language.prototype.js
        4: keyword.operator.accessor.js
        5: entity.name.function.js
        6: keyword.operator.assignment.js
        7: storage.type.js
      push:
        - meta_scope: meta.prototype.function.arrow.js
        - match: (?<=\))\s*(=>)
          captures:
            1: storage.type.function.arrow.js
          pop: true
        - include: function-declaration-parameters

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

    # e.g. Sound.play = (args) => { }
    - match: >-
        (?x)
          (\b_?[A-Z][$\w]*)?
          (\.)({{ident}})
          \s*(=)
          \s*(async)?
          \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>))
      captures:
        1: entity.name.class.js
        2: keyword.operator.accessor.js
        3: entity.name.function.js
        4: keyword.operator.assignment.js
        5: storage.type.js
      push:
        - meta_scope: meta.function.static.arrow.js
        - match: (?<=\))\s*(=>)
          captures:
            1: storage.type.function.arrow.js
          pop: true
        - include: function-declaration-parameters

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

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

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

  literal-function-call:
    - match: ({{ident}})\s*(\(\s*\))
      scope: meta.function-call.without-arguments.js
      captures:
        1: variable.function.js
        2: meta.group.braces.round.function.arguments.js

    - match: ({{ident}})\s*(?=\()
      scope: meta.function-call.with-arguments.js
      captures:
        1: variable.function.js

    - match: ({{ident}})\s*(?=`)
      scope: meta.function-call.tagged-template.js
      captures:
        1: variable.function.js

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

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

    - match: >-
        (?x)
          (?<=\.)
          ({{ident}})\s*
          (\(\s*\))
      scope: meta.function-call.method.without-arguments.js
      captures:
        1: variable.function.js
        2: meta.group.braces.round.function.arguments.js

    - match: >-
        (?x)
          (?<=\.)
          ({{ident}})\s*
          (?=\()
      scope: meta.function-call.method.with-arguments.js
      captures:
        1: variable.function.js

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

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

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

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

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

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

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

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

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

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

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

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

  literal-constructor:
    - match: (new)\s+(?=[_$a-zA-Z][$\w.]*)
      captures:
        1: keyword.operator.new.js
      push:
        - meta_scope: meta.instance.constructor.js
        - match: (?![_$a-zA-Z][$\w.]*)
          pop: true
        - include: support-class
        - include: support-other
        - match: ([_$a-zA-Z][$\w.]*\.)?({{ident}})
          captures:
            2: variable.function.constructor.js

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

  literal-keywords:
    - include: literal-keyword-storage

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

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

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

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

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

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

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

  literal-for:
    - match: (?<!\.)\b(for)\b
      scope: keyword.control.loop.js
      push:
        - meta_scope: meta.for.js
        - match: \)
          scope: meta.brace.round.end.js
          pop: true
        - match: \(
          scope: meta.brace.round.begin.js
          push:
            - match: (?=\))
              pop: true
            - include: literal-keyword-storage
            - include: expression
            - include: literal-punctuation

  literal-switch:
    - match: (?<!\.)\b(switch)\b
      scope: keyword.control.switch.js
      push:
        - meta_scope: meta.switch.js
        - match: \}
          scope: meta.brace.curly.end.js
          pop: true
        - include: round-brackets
        - match: \{
          scope: meta.brace.curly.begin.js
          push:
            - match: (?=})
              pop: true
            - match: (?<!\.)\b(case|default)\b
              captures:
                1: keyword.control.switch.js
              push:
                - match: (?=:)
                  pop: true
                - include: expression
            - include: main

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

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

    - match: >-
        (?x)
          =(?!=)| # assignment      right-to-left   both
      scope: keyword.operator.assignment.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
      scope: keyword.operator.assignment.augmented.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
      scope: keyword.operator.bitwise.js

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

    - match: >-
        (?x)
          ===  | # equality        left-to-right   both
          !==  | # equality        left-to-right   both
          ==   | # equality        left-to-right   both
          !=     # equality        left-to-right   both
      scope: keyword.operator.comparison.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
      scope: keyword.operator.arithmetic.js

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

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

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

  literal-labels:
    - match: >-
        (?x)
          (?<!\?)(?<!\?\s)(?=(?>
            ((')((?>[^'\\]|\\.)*)('))|
            ((")((?>[^"\\]|\\.)*)("))
          )\s*:)
      push:
        - match: ':'
          scope: punctuation.separator.key-value.js
          pop: true
        - include: literal-string

    - match: (?<!\.|\?|\?\s)({{ident}})\s*(:)
      scope: constant.other.object.key.js
      captures:
        1: string.unquoted.label.js
        2: punctuation.separator.key-value.js

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

    - match: (?:\B[-+]|\b)0[0-9]+\.(\B|\b[0-9]+)
      scope: invalid.illegal.numeric.octal.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
          )
      scope: constant.numeric.js

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

  literal-punctuation:
    - match: ;
      scope: punctuation.terminator.statement.js

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

  literal-regexp:
    # 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
    - match: >-
        (?x)
          (?<=
            \.|\(|,|{|}|\[|;|<|>|<=|>=|==|!=|===|!==|\+|-|\*|%|\+\+|--|<<|>>|>>>|&|\||\^|!|~|&&|\|\||\?|:|=|\+=|-=|\*=|%=|<<=|>>=|>>>=|&=|\|=|\^=|/|/=|
            \Wnew|\Wdelete|\Wvoid|\Wtypeof|\Winstanceof|\Win|\Wdo|\Wreturn|\Wcase|\Wthrow|\Wyield
            ^new|^delete|^void|^typeof|^instanceof|^in|^do|^return|^case|^throw|^yield|^
          )\s*
          (/)
          (?!/|\*|$)
      captures:
        1: punctuation.definition.string.begin.js
      push:
        - meta_scope: string.regexp.js
        - match: (/)([gimy]*)
          captures:
            1: punctuation.definition.string.end.js
            2: keyword.other.js
          pop: true
        - include: scope:source.regexp.js

  literal-string:
    - match: (["'])
      scope: punctuation.definition.string.quoted.begin.js
      push:
        - meta_include_prototype: false
        - meta_scope: string.quoted.js
        - match: \n
          scope: invalid.illegal.newline.js
          pop: true
        - match: \1
          scope: punctuation.definition.string.quoted.end.js
          pop: true
        - include: string-content


  lit-html:
    - match: 'html`'
      scope: punctuation.section.flowtype.begin
      push: lit-html-body

  lit-html-body:
    - include: html-tag
    - match: \\`
      scope: constant.character.escape.js
    - match: '`'
      scope: punctuation.section.flowtype.end
      pop: true
    - match: \${
      scope: keyword.other.substitution.begin.js
      push:
        - match: '}'
          scope: keyword.other.substitution.end.js
          pop: true
        - include: expression
    - include: string-content

  html-tag:
    - match: (</?)((?:[_$a-zA-Z][-$:.\w]*[$\w]*))
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.html
      push:
        - meta_scope: meta.tag.html
        - match: (/?>)
          scope: punctuation.definition.tag.end.html
          pop: true
        - include: html-tag-attributes
    - match: (</)((?:[_$a-zA-Z][-$:.\w]*[$\w]*))(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.html
        3: punctuation.definition.tag.end.html
    - match: (<)(svg)(\s+[^>]*)(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.html
        3: meta.attribute-with-value.html
        4: punctuation.definition.tag.end.html
      push:
        - meta_scope: meta.tag.svg.html
        - match: (</)(svg)(>)
          captures:
            1: punctuation.definition.tag.begin.html
            2: entity.name.tag.html
            3: punctuation.definition.tag.end.html
          pop: true
        - include: svg-content

  html-tag-attributes:
    - match: \s+(@[_$a-zA-Z][-$:.\w]*[$\w]*)
      captures:
        1: entity.other.attribute-name.event.html
      push:
        - match: (?=\s|/?>)
          pop: true
        - match: =
          scope: punctuation.separator.key-value.html
          set:
            - match: (?<=})
              pop: true
            - include: html-attribute-value
    - match: \s+(\.?[_$a-zA-Z][-$:.\w]*[$\w]*)
      captures:
        1: entity.other.attribute-name.html
      push:
        - match: (?=\s|/?>)
          pop: true
        - match: =
          scope: punctuation.separator.key-value.html
          set:
            - match: (?<=["'`}])
              pop: true
            - include: html-attribute-value

  html-attribute-value:
    - match: '"'
      scope: punctuation.definition.string.begin.html
      push:
        - meta_scope: string.quoted.double.html
        - match: '"'
          scope: punctuation.definition.string.end.html
          pop: true
        - include: html-interpolation
    - match: "'"
      scope: punctuation.definition.string.begin.html
      push:
        - meta_scope: string.quoted.single.html
        - match: "'"
          scope: punctuation.definition.string.end.html
          pop: true
        - include: html-interpolation
    - match: '`'
      scope: punctuation.definition.string.begin.html
      push:
        - meta_scope: string.quoted.other.html
        - match: '`'
          scope: punctuation.definition.string.end.html
          pop: true
        - include: html-interpolation
    - match: \${
      scope: punctuation.section.embedded.begin.js
      push:
        - meta_scope: meta.embedded.line.js
        - match: '}'
          scope: punctuation.section.embedded.end.js
          pop: true
        - include: expression
    - match: \{
      scope: punctuation.section.embedded.begin.js
      push:
        - meta_scope: meta.embedded.line.js
        - match: '}'
          scope: punctuation.section.embedded.end.js
          pop: true
        - include: expression

  html-interpolation:
    - match: \${
      scope: punctuation.section.embedded.begin.js
      push:
        - meta_scope: meta.embedded.line.js
        - match: '}'
          scope: punctuation.section.embedded.end.js
          pop: true
        - include: expression
        - include: lit-html-body

  lit-css:
    - match: 'css`'
      scope: punctuation.section.flowtype.begin
      push: lit-css-body

  lit-css-body:
    - include: "Packages/CSS/CSS.sublime-syntax"
    - match: \\`
      scope: constant.character.escape.js
    - match: '`'
      scope: punctuation.section.flowtype.end
      pop: true
    - match: \${
      scope: keyword.other.substitution.begin.js
      set:
        - match: '}'
          scope: keyword.other.substitution.end.js
          set: lit-css-body
        - include: expression
    - include: string-content

  literal-template-string:
    - match: '`'
      scope: keyword.other.template.begin.js
      push: template-string-body

  template-string-body:
    - meta_include_prototype: false
    - meta_scope: string.interpolated.js
    - match: \\`
      scope: constant.character.escape.js
    - match: '`'
      scope: keyword.other.template.end.js
      pop: true
    - match: \${
      scope: keyword.other.substitution.begin.js
      set:
        - match: '}'
          scope: keyword.other.substitution.end.js
          set: template-string-body
        - include: expression
    - include: string-content

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

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

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

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

    # e.g. obj.property
    - match: (?<!\.)({{ident}})\s*(?=[\[\.])
      scope: variable.other.object.js
      captures:
        1: variable.other.object.js

    # e.g. obj.property
    - match: (?<=\.)\s*({{ident}})
      scope: meta.property.object.js
      captures:
        1: variable.other.object.js

    - match: '{{ident}}'
      scope: variable.other.readwrite.js

  support-class:
    - 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
      scope: support.class.builtin.js

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

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

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

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

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

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

    - match: (?<!\.)\b(console)(?:(\.)(assert|count|dir|error|group|groupCollapsed|groupEnd|info|log|profile|profileEnd|table|time|timeEnd|trace|warn))?\b
      captures:
        1: support.type.object.console.js
        2: keyword.operator.accessor.js
        3: 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: support.type.object.process.js
        2: keyword.operator.accessor.js
        3: support.type.object.process.js
        4: support.function.process.js

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

    - match: '{{'
      push:
        - meta_scope: meta.tag.mustache.js
        - match: '}}'
          pop: true

  literal-jsx:
    - match: (?<=\(|\{|\[|,|&&|\|\||\?|:|=|=>|\Wreturn|^return|^)(?=\s*<[_$a-zA-Z])
      push:
        - meta_content_scope: meta.jsx.js
        - match: (?<=/>|>)
          pop: true
        - include: jsx-tag-start

  jsx-attribute-assignment:
    - match: =
      scope: keyword.operator.assignment.jsx

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

  jsx-attributes:
    - include: jsx-attribute-name
    - include: jsx-attribute-assignment
    - include: jsx-string-quoted
    - include: jsx-evaluated-code

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

  jsx-evaluated-code:
    - match: \{
      scope: punctuation.section.embedded.begin.jsx
      push:
        - meta_scope: meta.embedded.expression.jsx
        - match: \}
          scope: punctuation.section.embedded.end.jsx
          pop: true
        - include: expression

  jsx-string-quoted:
    - match: (["'])
      scope: punctuation.definition.string.begin.jsx
      push:
        - meta_include_prototype: false
        - meta_scope: string.quoted.jsx
        - match: \1
          scope: punctuation.definition.string.end.jsx
          pop: true
        - include: jsx-entities

  jsx-tag-end:
    - match: '>'
      scope: meta.tag.jsx punctuation.definition.tag.end.jsx
      push:
        - meta_include_prototype: false
        - match: (?=</)
          pop: true
        - include: jsx-tag-start
        - include: jsx-evaluated-code
        - include: jsx-entities

  jsx-tag-start:
    - match: (<)([_$a-zA-Z][-$:.\w]*[$\w]*)
      captures:
        1: meta.tag.jsx punctuation.definition.tag.begin.jsx
        2: meta.tag.jsx entity.name.tag.jsx
      push:
        - match: (</)(\2)(>)|(/>)
          captures:
            1: meta.tag.jsx punctuation.definition.tag.begin.jsx
            2: meta.tag.jsx entity.name.tag.jsx
            3: meta.tag.jsx punctuation.definition.tag.end.jsx
            4: meta.tag.jsx punctuation.definition.tag.end.jsx
          pop: true
        - include: jsx-tag-end
        - include: jsx-attributes

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

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

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

  flowtype-polymorph:
    # http://flowtype.org/blog/2015/03/12/Bounded-Polymorphism.html
    - match: '<'
      scope: punctuation.section.flowtype.begin.js
      push:
      - meta_scope: meta.flowtype.polymorph.js
      - match: '>'
        scope: punctuation.section.flowtype.end.js
        pop: true
      - include: flowtype-tokens

  flowtype-annotation:
    - match: (?:(\?)\s*)?(:)
      captures:
        1: keyword.operator.flowtype.optional.js
        2: keyword.operator.flowtype.annotation.js
      push:
        - meta_scope: meta.flowtype.annotation.js
        - include: flowtype-tokens
        - match: (?=\S)
          pop: true

  flowtype-brackets:
    - match: '{'
      scope: punctuation.section.flowtype.begin.js
      push:
      - match: '}'
        scope:  punctuation.section.flowtype.end.js
        pop: true
      - include: flowtype-tokens

  flowtype-identifier:
    - include: support-class

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

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

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

  flowtype-tokens:
    - match: (?<=[:?|&=])(?=\s*{)
      push:
        - match: (?<=})
          pop: true
        - include: flowtype-brackets

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

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

    - match: '<'
      scope: punctuation.section.flowtype.begin.js
      push:
      - match: '>'
        scope: punctuation.section.flowtype.end.js
        pop: true
      - include: flowtype-tokens

    - match: \[
      scope: punctuation.section.flowtype.begin.js
      push:
      - match: \]
        scope: punctuation.section.flowtype.end.js
        pop: true
      - include: flowtype-tokens

    - match: \(
      scope: punctuation.section.flowtype.begin.js
      push:
      - match: \)
        scope: punctuation.section.flowtype.end.js
        pop: true
      - include: flowtype-tokens

    - match: '=>'
      scope: keyword.operator.flowtype.js
      push:
      - meta_scope: meta.flowtype.function.js
      - match: (?<=}|[_$a-zA-Z])
        pop: true
      - include: flowtype-brackets
      - include: flowtype-identifier
      - include: comments

    - include: flowtype-identifier
    - include: literal-string
    - include: comments
  svg-content:
    - match: '"'
      scope: punctuation.definition.string.begin.html
      push:
        - meta_scope: string.quoted.double.html
        - match: '"'
          scope: punctuation.definition.string.end.html
          pop: true
        - include: svg-url-content
    - match: "'"
      scope: punctuation.definition.string.begin.html
      push:
        - meta_scope: string.quoted.single.html
        - match: "'"
          scope: punctuation.definition.string.end.html
          pop: true
        - include: svg-url-content
    - include: html-tag

  svg-url-content:
    - match: '((?:https?|data|mailto):)(//)?((?:[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*(?::\d+)?)?(?:/[^\s"]*)?)'
      captures:
        1: constant.other.protocol.svg
        2: punctuation.separator.protocol.svg
        3: string.unquoted.url.svg