Vue Component.sublime-syntax

%YAML 1.2
---
name: Vue Component
scope: text.html.vue
version: 2

extends: Packages/HTML/HTML.sublime-syntax

file_extensions:
  - vue
  - we
  - wpy

variables:

  # Vue specific variables
  # ======================

  template_content_begin: ^|(?=[{{ascii_space}}]*\S)
  template_content_end: (?=(?:^\s*)?</(?i:template){{tag_name_break}})

  # safe directive end to ensure it is also html attribute end
  vue_directive_break: (?![^{{ascii_space}}=/>:."'])
  # safe vue directive name, parameter or modifier chars
  vue_directive_char: '[A-Za-z0-9_-]'
  # safe directive parameter end to ensure it is also html attribute end
  vue_parameter_break: (?![^{{ascii_space}}=/>."'])

contexts:

###[ HTML TAGS ]##############################################################

  prototype:
    - meta_prepend: true
    - include: mustache-interpolations

  tag-html:
    - meta_prepend: true
    - include: i18n-tag
    - include: template-tag

###[ SCRIPT TAG ]#############################################################

  script-common:
    - meta_prepend: true
    - include: script-lang-attribute

  script-lang-attribute:
    - match: (?i:lang(?:uage)?){{attribute_name_break}}
      scope: meta.attribute-with-value.lang.html entity.other.attribute-name.html
      set: script-lang-attribute-assignment

  script-lang-attribute-assignment:
    - meta_content_scope: meta.tag.script.begin.html meta.attribute-with-value.lang.html
    - match: =
      scope: punctuation.separator.key-value.html
      set: script-lang-attribute-value
    - match: (?=\S)
      set: script-javascript

  script-lang-attribute-value:
    - meta_include_prototype: false
    - meta_scope: meta.tag.script.begin.html meta.attribute-with-value.lang.html
    - include: script-lang-decider

  script-lang-decider:
    - match: (?i)(?=babel{{unquoted_attribute_break}}|'babel'|"babel")
      set:
        - script-babel
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=coffee(?:script)?{{unquoted_attribute_break}}|'coffee(?:script)?'|"coffee(?:script)?")
      set:
        - script-coffeescript
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=livescript{{unquoted_attribute_break}}|'livescript'|"livescript")
      set:
        - script-livescript
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=(?:ts|typescript){{unquoted_attribute_break}}|'(?:ts|typescript)'|"(?:ts|typescript)")
      set:
        - script-typescript
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=tsx{{unquoted_attribute_break}}|'tsx'|"tsx")
      set:
        - script-tsx
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?=\S)
      set:
        - script-javascript
        - tag-lang-attribute-meta
        - tag-generic-attribute-value

  script-babel:
    - meta_include_prototype: false
    - meta_scope: meta.tag.script.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: script-babel-content
    - include: script-common

  script-babel-content:
    - meta_include_prototype: false
    - match: '{{script_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1  # make sure to match only once
      embed: JavaScript (Babel).sublime-syntax
      embed_scope: source.js.embedded.html
      escape: '{{script_content_end}}'
      escape_captures:
        1: source.js.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.js.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  script-coffeescript:
    - meta_include_prototype: false
    - meta_scope: meta.tag.script.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: script-coffeescript-content
    - include: script-common

  script-coffeescript-content:
    - meta_include_prototype: false
    - match: '{{script_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1  # make sure to match only once
      embed: scope:source.coffee
      embed_scope: source.coffee.embedded.html
      escape: '{{script_content_end}}'
      escape_captures:
        1: source.coffee.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.coffee.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  script-javascript-content:
    # Note: Augment default JavaScript by JSX
    # as Vue supports writing components via JSX tags by default
    # and JSX highlights/scopes plain JavaScript without issues.
    - meta_include_prototype: false
    - match: '{{script_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1  # make sure to match only once
      embed: scope:source.jsx
      embed_scope: source.jsx.embedded.html
      escape: '{{script_content_end}}'
      escape_captures:
        1: source.jsx.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.jsx.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  script-livescript:
    - meta_include_prototype: false
    - meta_scope: meta.tag.script.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: script-livescript-content
    - include: script-common

  script-livescript-content:
    - meta_include_prototype: false
    - match: '{{script_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1  # make sure to match only once
      embed: scope:source.livescript
      embed_scope: source.livescript.embedded.html
      escape: '{{script_content_end}}'
      escape_captures:
        1: source.livescript.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.livescript.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  script-tsx:
    - meta_include_prototype: false
    - meta_scope: meta.tag.script.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: script-tsx-content
    - include: script-common

  script-tsx-content:
    - meta_include_prototype: false
    - match: '{{script_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1  # make sure to match only once
      embed: scope:source.tsx
      embed_scope: source.tsx.embedded.html
      escape: '{{script_content_end}}'
      escape_captures:
        1: source.tsx.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.tsx.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  script-typescript:
    - meta_include_prototype: false
    - meta_scope: meta.tag.script.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: script-typescript-content
    - include: script-common

  script-typescript-content:
    - meta_include_prototype: false
    - match: '{{script_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1  # make sure to match only once
      embed: scope:source.ts
      embed_scope: source.ts.embedded.html
      escape: '{{script_content_end}}'
      escape_captures:
        1: source.ts.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.ts.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

###[ STYLE TAG ]##############################################################

  style-common:
    - meta_prepend: true
    - include: style-lang-attribute

  style-lang-attribute:
    - match: (?i:lang(?:uage)?){{attribute_name_break}}
      scope: meta.attribute-with-value.lang.html entity.other.attribute-name.html
      set: style-lang-attribute-assignment

  style-lang-attribute-assignment:
    - meta_content_scope: meta.tag.style.begin.html meta.attribute-with-value.lang.html
    - match: =
      scope: punctuation.separator.key-value.html
      set: style-lang-attribute-value
    - match: (?=\S)
      set: style-css

  style-lang-attribute-value:
    - meta_include_prototype: false
    - meta_scope: meta.tag.style.begin.html meta.attribute-with-value.lang.html
    - include: style-lang-decider

  style-lang-decider:
    - match: (?i)(?=postcss\?parser=sugarss{{unquoted_attribute_break}}|'postcss\?parser=sugarss'|"postcss\?parser=sugarss")
      set:
        - style-sugarss
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=postcss{{unquoted_attribute_break}}|'postcss'|"postcss")
      set:
        - style-postcss
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=less{{unquoted_attribute_break}}|'less'|"less")
      set:
        - style-less
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=sass{{unquoted_attribute_break}}|'sass'|"sass")
      set:
        - style-sass
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=scss{{unquoted_attribute_break}}|'scss'|"scss")
      set:
        - style-scss
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=stylus{{unquoted_attribute_break}}|'stylus'|"stylus")
      set:
        - style-stylus
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?=\S)
      set:
        - style-css
        - tag-lang-attribute-meta
        - tag-generic-attribute-value

  style-less:
    - meta_scope: meta.tag.style.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: style-less-content
    - include: style-common

  style-less-content:
    - match: '{{style_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1
      embed: scope:source.less
      embed_scope: source.less.embedded.html
      escape: '{{style_content_end}}'
      escape_captures:
        1: source.less.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.less.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  style-postcss:
    - meta_scope: meta.tag.style.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: style-postcss-content
    - include: style-common

  style-postcss-content:
    - match: '{{style_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1
      embed: scope:source.postcss
      embed_scope: source.postcss.embedded.html
      escape: '{{style_content_end}}'
      escape_captures:
        1: source.postcss.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.postcss.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  style-sass:
    - meta_scope: meta.tag.style.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: style-sass-content
    - include: style-common

  style-sass-content:
    - match: '{{style_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1
      embed: scope:source.sass
      embed_scope: source.sass.embedded.html
      escape: '{{style_content_end}}'
      escape_captures:
        1: source.sass.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.sass.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  style-scss:
    - meta_scope: meta.tag.style.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: style-scss-content
    - include: style-common

  style-scss-content:
    - match: '{{style_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1
      embed: scope:source.scss
      embed_scope: source.scss.embedded.html
      escape: '{{style_content_end}}'
      escape_captures:
        1: source.scss.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.scss.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  style-stylus:
    - meta_scope: meta.tag.style.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: style-stylus-content
    - include: style-common

  style-stylus-content:
    - match: '{{style_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1
      embed: scope:source.stylus
      embed_scope: source.stylus.embedded.html
      escape: '{{style_content_end}}'
      escape_captures:
        1: source.stylus.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.stylus.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

  style-sugarss:
    - meta_scope: meta.tag.style.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: style-sugarss-content
    - include: style-common

  style-sugarss-content:
    - match: '{{style_content_begin}}'
      captures:
        1: comment.block.html punctuation.definition.comment.begin.html
      pop: 1
      embed: scope:source.sss
      embed_scope: source.sss.embedded.html
      escape: '{{style_content_end}}'
      escape_captures:
        1: source.sss.embedded.html
        2: comment.block.html punctuation.definition.comment.end.html
        3: source.sss.embedded.html
        4: comment.block.html punctuation.definition.comment.end.html

###[ I18N TAG ]###############################################################

  i18n-tag:
    # https://github.com/kazupon/vue-i18n
    - match: (<)((?i:i18n)){{tag_name_break}}
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.i18n.html
      push: i18n-open-tag-content
    - match: (</)((?i:i18n)){{tag_name_break}}
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.i18n.html
        3: punctuation.definition.tag.end.html
      push: i18n-close-tag-content

  i18n-close-tag-content:
    - meta_scope: meta.tag.i18n.end.html
    - include: tag-end

  i18n-open-tag-content:
    - meta_scope: meta.tag.i18n.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: i18n-content
    - include: tag-attributes
    - include: tag-end-self-closing

  i18n-content:
    # expect json object or list
    - match: (?=(?:^|\s*)[{\[])
      embed: scope:source.json
      embed_scope: source.json.embedded.html
      escape: (?=(?:^\s*)?</(?i:i18n){{tag_name_break}})
      pop: 1
    # use yaml syntax otherwise (it also highlights json well!)
    - match: (?=(?:^|\s*)\S)
      embed: scope:source.yaml
      embed_scope: source.yaml.embedded.html
      escape: (?=(?:^\s*)?</(?i:i18n){{tag_name_break}})
      pop: 1

###[ TEMPLATE TAG ]###########################################################

  template-tag:
    - match: (<)((?i:template)){{tag_name_break}}
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.template.html
      push: template-mustache
    - match: (</)((?i:template))
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.template.html
        3: punctuation.definition.tag.end.html
      push: template-tag-content

  template-tag-content:
    - meta_scope: meta.tag.template.end.html
    - include: tag-end

  template-common:
    - include: template-lang-attribute
    - include: tag-attributes
    - include: tag-end-self-closing

  template-lang-attribute:
    - match: (?i:lang(?:uage)?){{attribute_name_break}}
      scope: meta.attribute-with-value.lang.html entity.other.attribute-name.html
      set: template-lang-attribute-assignment

  template-lang-attribute-assignment:
    - meta_content_scope: meta.tag.template.begin.html meta.attribute-with-value.lang.html
    - match: =
      scope: punctuation.separator.key-value.html
      set: template-lang-attribute-value
    - match: (?=\S)
      set: template-mustache

  template-lang-attribute-value:
    - meta_include_prototype: false
    - meta_scope: meta.tag.template.begin.html meta.attribute-with-value.lang.html
    - include: template-lang-decider

  template-lang-decider:
    - match: (?i)(?=haml{{unquoted_attribute_break}}|\'haml\'|"haml")
      set:
        - template-haml
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=jade{{unquoted_attribute_break}}|\'jade\'|"jade")
      set:
        - template-jade
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=pug{{unquoted_attribute_break}}|\'pug\'|"pug")
      set:
        - template-pug
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?i)(?=slm{{unquoted_attribute_break}}|\'slm\'|"slm")
      set:
        - template-slim
        - tag-lang-attribute-meta
        - tag-generic-attribute-value
    - match: (?=\S)
      set:
        - template-mustache
        - tag-lang-attribute-meta
        - tag-generic-attribute-value

  template-haml:
    - meta_scope: meta.tag.template.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: template-haml-content
    - include: template-common

  template-haml-content:
    - match: '{{template_content_begin}}'
      embed: scope:text.haml
      embed_scope: text.haml.embedded.html
      escape: '{{template_content_end}}'
      pop: 1

  template-jade:
    - meta_scope: meta.tag.template.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: template-jade-content
    - include: template-common

  template-jade-content:
    - match: '{{template_content_begin}}'
      embed: scope:text.jade
      embed_scope: text.jade.embedded.html
      escape: '{{template_content_end}}'
      pop: 1

  template-mustache:
    - meta_scope: meta.tag.template.begin.html
    - include: tag-end
    - include: template-common

  template-pug:
    - meta_scope: meta.tag.template.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: template-pug-content
    - include: template-common

  template-pug-content:
    - match: '{{template_content_begin}}'
      embed: scope:text.pug
      embed_scope: text.pug.embedded.html
      escape: '{{template_content_end}}'
      pop: 1

  template-slim:
    - meta_scope: meta.tag.template.begin.html
    - match: '>'
      scope: punctuation.definition.tag.end.html
      set: template-slim-content
    - include: template-common

  template-slim-content:
    - match: '{{template_content_begin}}'
      embed: scope:text.slim
      embed_scope: text.slim.embedded.html
      escape: '{{template_content_end}}'
      pop: 1

###[ TAG ATTRIBUTES ]#########################################################

  tag-attributes:
    - meta_prepend: true
    - include: vue-directive

  tag-lang-attribute-meta:
    # required until ST4184 (PR #4061)
    - meta_include_prototype: false
    - meta_scope: meta.attribute-with-value.lang.html
    - include: immediately-pop

  cdata-content:
    - meta_prepend: true
    - meta_include_prototype: false
    - include: mustache-string-interpolations

  strings-common-content:
    - meta_prepend: true
    - include: mustache-string-interpolations

###[ MUSTAGE TEMPLATES ]######################################################

  mustache-string-interpolations:
    - match: '{{'
      scope: meta.embedded.expression.vue punctuation.section.embedded.begin.html
      push: mustache-string-interpolation-body

  mustache-string-interpolation-body:
    - clear_scopes: 1
    - meta_include_prototype: false
    - meta_content_scope: meta.embedded.expression.vue source.js.embedded.vue
    - include: mustache-interpolation-body

  mustache-interpolations:
    - match: '{{'
      scope: meta.embedded.expression.vue punctuation.section.embedded.begin.html
      push: mustache-interpolation-body

  mustache-interpolation-body:
    - meta_include_prototype: false
    - meta_content_scope: meta.embedded.expression.vue source.js.embedded.vue
    - match: '}}'
      scope: meta.embedded.expression.vue punctuation.section.embedded.end.html
      pop: 1
    - match: (?=\S)
      push: scope:source.js#expression

###[ VUE DIRECTIVES ]#########################################################

  vue-directive:
    # https://vuejs.org/guide/essentials/list.html#list-rendering
    - match: (?i:v-for){{vue_directive_break}}
      scope: meta.directive.vue keyword.control.loop.for.vue
      push: vue-directive-assignment
    # https://vuejs.org/guide/essentials/conditional.html#conditional-rendering
    - match: (?i:v-if){{vue_directive_break}}
      scope: meta.directive.vue keyword.control.conditional.if.vue
      push: vue-directive-assignment
    - match: (?i:v-else-if){{vue_directive_break}}
      scope: meta.directive.vue keyword.control.conditional.elseif.vue
      push: vue-directive-assignment
    - match: (?i:v-else){{vue_directive_break}}
      scope: meta.directive.vue keyword.control.conditional.else.vue
    - match: (?i:v-show){{vue_directive_break}}
      scope: meta.directive.vue keyword.control.conditional.show.vue
      push: vue-directive-assignment
    # https://vuejs.org/guide/essentials/template-syntax.html#directives
    - match: (?i:v-{{vue_directive_char}}+){{vue_directive_break}}
      scope: meta.directive.vue keyword.other.directive.vue
      push: vue-directive-parameter
    # `@event` is short hand form of `v-on:event`
    # `:attr` is short hand form of `v-bind:attr`
    # `#attr` is short hand form of `??`
    - match: '[@:#]'
      scope: meta.directive.vue keyword.other.directive.vue
      push: vue-directive-parameter-name

  vue-directive-parameter:
    - meta_include_prototype: false
    # https://vuejs.org/guide/essentials/template-syntax.html#arguments
    - match: ':'
      scope: meta.directive.vue punctuation.separator.vue
      set: vue-directive-parameter-name
    - match: ''
      set: vue-directive-modifiers

  vue-directive-parameter-name:
    - meta_include_prototype: false
    # https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments
    - match: \[
      scope: punctuation.section.embedded.begin.vue
      set:
        - vue-dynamic-parameter-name-end
        - scope:source.js#expression
    - match: ''
      set: vue-static-parameter-name

  vue-dynamic-parameter-name-end:
    - meta_include_prototype: false
    - meta_scope: meta.directive.parameter.vue meta.embedded.expression.vue
    - meta_content_scope: source.js.embedded.vue
    - match: \]
      scope: punctuation.section.embedded.end.vue
      set: vue-directive-modifiers

  vue-static-parameter-name:
    - meta_scope: meta.directive.parameter.vue entity.other.attribute-name.vue
    - match: '{{vue_parameter_break}}'
      set: vue-directive-modifiers
    - match: '["''`<]'
      scope: invalid.illegal.attribute-name.vue

  vue-directive-modifiers:
    # https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
    - meta_content_scope: meta.directive.modifiers.vue
    - match: (\.)({{vue_directive_char}}+{{vue_directive_break}})?
      captures:
        1: punctuation.separator.vue
        2: storage.modifier.vue
    - match: ''
      set: vue-directive-assignment

  vue-directive-assignment:
    - meta_content_scope: meta.directive.vue
    - match: =
      scope: meta.directive.vue punctuation.separator.key-value.vue
      set: vue-directive-value
    - include: else-pop

  vue-directive-value:
    - meta_content_scope: meta.directive.vue
    - match: \"
      scope: string.quoted.double.vue punctuation.definition.string.begin.vue
      set: vue-directive-double-quoted-value
    - match: \'
      scope: string.quoted.single.vue punctuation.definition.string.begin.vue
      set: vue-directive-single-quoted-value
    - include: else-pop

  vue-directive-double-quoted-value:
    - meta_include_prototype: false
    - meta_scope: meta.directive.value.vue meta.string.vue
    - meta_content_scope: meta.embedded.expression.vue source.js.embedded.vue
    - match: \"
      scope: string.quoted.double.vue punctuation.definition.string.end.vue
      pop: 1
    - match: (?=\S)
      push: scope:source.js#expression

  vue-directive-single-quoted-value:
    - meta_include_prototype: false
    - meta_scope: meta.directive.value.vue meta.string.vue
    - meta_content_scope: meta.embedded.expression.vue source.js.embedded.vue
    - match: \'
      scope: string.quoted.single.vue punctuation.definition.string.end.vue
      pop: 1
    - match: (?=\S)
      push: scope:source.js#expression