# [PackageDev] target_format: json, ext: json
---
name: Vue Component
scopeName: source.vue
fileTypes: [vue]
uuid: 5512c10d-4cc5-434c-b8fc-53b912f55ab3

patterns:

# comment

- name: comment.block.html
  begin: <!--
  end: --\s*>
  captures:
    '0': {name: punctuation.definition.comment.html}
  patterns:
  - name: invalid.illegal.bad-comments-or-CDATA.html
    match: --

# template - single line
# <template src="index.html" />

- begin: (<)(template)\b(?=[^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
  end: (/>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'


# template - single line
# <template src="index.html"></template>

- begin: (<)(template)(?=[^>]*>[^/>]*</template>)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
  end: (</)(template)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</template>)

# jade / pug

- begin: (<)(template)\b(?=[^>]*lang=('jade'|"jade"|'pug'|"pug"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
  end: (</)(template)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: text.jade
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</template>)
    patterns:
      - include: text.jade

# slm

- begin: (<)(template)\b(?=[^>]*lang=('slm'|"slm"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
  end: (</)(template)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: text.jade.slm
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</template>)
    patterns:
      - include: text.jade.slm

# html

- begin: (<)(template)(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
  end: (</)(template)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.template.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: text.html.vue-html
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</template>)
    patterns:
      - include: text.html.vue-html

# style - single line
# <style src="index.css" />

- begin: (<)(style)\b(?=[^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (/>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'

# style - single line
# <style src="index.css"></style>

- begin: (<)(style)(?=[^>]*>[^/>]*</style>)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)

# sass / scss

- begin: (<)(style)\b(?=[^>]*lang=('sass'|"sass"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.sass
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)
    patterns:
      - include: source.sass

- begin: (<)(style)\b(?=[^>]*lang=('scss'|"scss"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.css.scss
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)
    patterns:
      - include: source.css.scss

# less

- begin: (<)(style)\b(?=[^>]*lang=('less'|"less"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.css.less
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)
    patterns:
      - include: source.css.less

# stylus

- begin: (<)(style)\b(?=[^>]*lang=('stylus'|"stylus"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.stylus
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)
    patterns:
      - include: source.stylus

# postcss

- begin: (<)(style)\b(?=[^>]*lang=('postcss'|"postcss"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.css.postcss
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)
    patterns:
      - include: source.css.postcss

# css

- begin: (<)(style)(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
  end: (</)(style)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.style.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.css
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</style>)
    patterns:
      - include: source.css

# script - single line
# <script src="index.js" />

- begin: (<)(script)\b(?=[^>]*/>$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (/>)
  endCaptures:
    '1': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'

# script - single line
# <script src="index.js"></script>

- begin: (<)(script)(?=[^>]*>[^/>]*</script>)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (</)(script)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</script>)

# ts

- begin: (<)(script)\b(?=[^>]*lang=('ts'|"ts"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (</)(script)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.ts
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</script>)
    patterns:
      - include: source.ts

# coffee

- begin: (<)(script)\b(?=[^>]*lang=('coffee'|"coffee"))(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (</)(script)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.coffee
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</script>)
    patterns:
      - include: source.coffee

# js

- begin: (<)(script)(?![^/>]*/>\s*$)
  beginCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
  end: (</)(script)(>)
  endCaptures:
    '1': {name: punctuation.definition.tag.begin.html}
    '2': {name: entity.name.tag.script.html}
    '3': {name: punctuation.definition.tag.end.html}
  patterns:
  - include: '#tag-stuff'
  - contentName: source.js
    begin: (>)
    beginCaptures:
      '1': {name: punctuation.definition.tag.end.html}
    end: (?=</script>)
    patterns:
      - include: source.js

# Repository

repository:

  vue-interpolations:
    patterns:
    - name: expression.embbeded.vue
      begin: \{\{\{?
      beginCaptures:
        '0': {name: punctuation.definition.generic.begin.html}
      end: \}\}\}?
      endCaptures:
        '0': {name: punctuation.definition.generic.end.html}
      patterns:
      - include: source.js

  vue-directives:
    name: meta.directive.vue
    begin: (?:\b(v-)|(:|@))([a-zA-Z\-]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*\s*(=)
    end: (?<='|")
    captures:
      '1': {name: entity.other.attribute-name.html}
      '2': {name: punctuation.separator.key-value.html}
      '3': {name: entity.other.attribute-name.html}
      '4': {name: entity.other.attribute-name.html}
      '5': {name: entity.other.attribute-name.html}
      '6': {name: punctuation.separator.key-value.html}
    patterns:
    - name: source.directive.vue
      begin: '"'
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: '"'
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: source.js
    - name: source.directive.vue
      begin: ''''
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: ''''
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: source.js

  entities:
    patterns:
    - name: constant.character.entity.html
      match: (&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)
      captures:
        '1': {name: punctuation.definition.entity.html}
        '3': {name: punctuation.definition.entity.html}
    - name: invalid.illegal.bad-ampersand.html
      match: '&'

  string-double-quoted:
    name: string.quoted.double.html
    begin: '"'
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.html}
    end: '"'
    endCaptures:
      '0': {name: punctuation.definition.string.end.html}
    patterns:
    - include: '#vue-interpolations'
    - include: '#entities'

  string-single-quoted:
    name: string.quoted.single.html
    begin: ''''
    beginCaptures:
      '0': {name: punctuation.definition.string.begin.html}
    end: ''''
    endCaptures:
      '0': {name: punctuation.definition.string.end.html}
    patterns:
    - include: '#vue-interpolations'
    - include: '#entities'

  tag-generic-attribute:
    name: entity.other.attribute-name.html
    match: \b([a-zA-Z\-:]+)

  tag-id-attribute:
    name: meta.attribute-with-value.id.html
    begin: \b(id)\b\s*(=)
    end: (?<='|")
    captures:
      '1': {name: entity.other.attribute-name.id.html}
      '2': {name: punctuation.separator.key-value.html}
    patterns:
    - name: string.quoted.double.html
      contentName: meta.toc-list.id.html
      begin: '"'
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: '"'
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: '#vue-interpolations'
      - include: '#entities'
    - name: string.quoted.single.html
      contentName: meta.toc-list.id.html
      begin: ''''
      beginCaptures:
        '0': {name: punctuation.definition.string.begin.html}
      end: ''''
      endCaptures:
        '0': {name: punctuation.definition.string.end.html}
      patterns:
      - include: '#vue-interpolations'
      - include: '#entities'

  tag-stuff:
    patterns:
    - include: '#vue-directives'
    - include: '#tag-id-attribute'
    - include: '#tag-generic-attribute'
    - include: '#string-double-quoted'
    - include: '#string-single-quoted'