%YAML 1.2
---
name: Vue Component
file_extensions: [vue]
scope: text.html.vue

contexts:
  main:
    - match: '<!--'
      scope: punctuation.definition.comment.begin.html
      push:
        - meta_scope: comment.block.html
        - match: "-->"
          scope: punctuation.definition.comment.begin.html
          pop: true

    - include: template_langs
    - match: '(<)(template).*(>)'
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.custom.html
        3: punctuation.definition.tag.begin.html
      push: 'scope:text.html.basic'
      with_prototype:
        - match: '(</)(template).*(>)'
          captures:
            1: punctuation.definition.tag.begin.html
            2: entity.name.tag.custom.html
            3: punctuation.definition.tag.begin.html
          pop: true
        - include: template_content
    - include: scripts
    - include: styles
    
  template_langs:
    - match: (<)(template)\b[^>]*(lang)\s*=\s*([\'\"]pug[\'\"])\s*.*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: entity.other.attribute-name.html
        4: string.quoted.double.html
        5: meta.tag.script.end.html
      embed: scope:text.pug
      escape: (</)(template)(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html

  template_content:
    - match: (?:^|\s+)(v-\S+|:\S+|@\S+)\b\s*(=)\s*(")\s*
      captures:
        1: entity.other.attribute-name.event.html
        2: punctuation.separator.key-value.html
        3: punctuation.definition.string.begin.html string.quoted.double.html
      push:
        - match: '"'
          scope: punctuation.definition.string.end.html string.quoted.double.html
          pop: true
        - include: scope:source.js
    - match: '{{'
      embed: 'scope:source.js'
      escape: '}}'

  scripts:
    - match: (<)(script)\b[^>]*(lang)\s*=\s*([\'\"]coffee[\'\"])\s*.*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: entity.other.attribute-name.html
        4: string.quoted.double.html
        5: meta.tag.script.end.html
      embed: scope:source.coffee
      escape: (</)(script)(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html
    # If no lang is set, fall back to js
    - match: (<)(script).*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: entity.other.attribute-name.html
        4: string.quoted.double.html
        5: meta.tag.script.end.html
      embed: scope:source.js
      escape: (</)(script)(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html

  styles:
    - match: (<)(style)\b[^>]*(lang)\s*=\s*([\'\"]stylus[\'\"])\s*.*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: entity.other.attribute-name.html
        4: string.quoted.double.html
        5: meta.tag.script.end.html
      embed: scope:source.stylus
      escape: (</)(style).*(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html
    - match: (<)(style)\b[^>]*(lang)\s*=\s*([\'\"]sass[\'\"])\s*.*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: entity.other.attribute-name.html
        4: string.quoted.double.html
        5: meta.tag.script.end.html
      embed: scope:source.sass
      escape: (</)(style).*(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html
    - match: (<)(style)\b[^>]*(lang)\s*=\s*([\'\"]scss[\'\"])\s*.*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: entity.other.attribute-name.html
        4: string.quoted.double.html
        5: meta.tag.script.end.html
      embed: scope:source.scss
      escape: (</)(style).*(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html
    - match: (<)(style).*(>)
      captures:
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html
      embed: scope:source.css
      escape: (</)(style).*(>)
      escape_captures: 
        1: punctuation.definition.tag.begin.html
        2: entity.name.tag.script.html
        3: meta.tag.script.end.html