diff --git a/README.md b/README.md
index e49c74e..0ab3250 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,21 @@
# Vue Syntax Highlight
+**Note:** The `master` branch hosts the `tmLanguage` based implementation that is distributed to Sublime Text build < 3153. It is also used to power GitHub's syntax highlight of `*.vue` files in [linguist](https://github.com/github/linguist).
+
+For a newer implementation of the syntax that is distributed to build >=3153, See the [new](https://github.com/vuejs/vue-syntax-highlight/tree/new) branch.
+
+---
+
Sublime Text Syntax highlighting for single-file [Vue.js](http://vuejs.org) components (enabled by [vue-loader](https://github.com/vuejs/vue-loader) or [vueify](https://github.com/vuejs/vueify)).
-
+
### Install
- Via Package Control: search for `Vue Syntax Highlight`.
- Manual: clone this repo into your Sublime `Packages` folder.
-**NOTE:** You still need to install corresponding packages for pre-processors (e.g. Jade, SASS, CoffeeScript) to get proper syntax highlighting for them.
+**Additional Installation Requirements:** In order to get proper syntax highlighting for pre-processors (e.g. Jade, SASS, CoffeeScript) you will also need to install the corresponding packages for each of them.
### Enabling JSX Highlighting
diff --git a/samples/basic.vue b/samples/basic.vue
index d192aa0..3c7d521 100644
--- a/samples/basic.vue
+++ b/samples/basic.vue
@@ -12,7 +12,8 @@ Things to verify:
+ @click="onClick('hello')"
+ @click.prevent="onClick('hello')">
Hello
diff --git a/samples/langs.vue b/samples/langs.vue
index bb6d2bc..b96fc7c 100644
--- a/samples/langs.vue
+++ b/samples/langs.vue
@@ -14,6 +14,19 @@ body
color primary-color
+
+
+
+
div.app
h1.title This is the app
diff --git a/vue.YAML-tmLanguage b/vue.YAML-tmLanguage
index 7582aef..3c8888f 100644
--- a/vue.YAML-tmLanguage
+++ b/vue.YAML-tmLanguage
@@ -159,7 +159,6 @@ patterns:
end: (?=(?i:style))
patterns:
- include: source.sass
- - include: source.scss
- name: source.scss.embedded.html
begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])scss\1?)
@@ -175,9 +174,7 @@ patterns:
'1': {name: punctuation.definition.tag.end.html}
end: (?=(?i:style))
patterns:
- - include: source.sass
- - include: source.scss
-
+ - include: source.css.scss
- name: source.less.embedded.html
begin: (?:^\s+)?(<)((?i:style))\b(?=[^>]*lang=(['"])less\1?)
@@ -193,7 +190,7 @@ patterns:
'1': {name: punctuation.definition.tag.end.html}
end: (?=(?i:style))
patterns:
- - include: source.less
+ - include: source.css.less
- name: source.css.embedded.html
begin: (?:^\s+)?(<)((?i:style))\b(?![^>]*/>)
@@ -211,6 +208,24 @@ patterns:
patterns:
- include: source.css
+- name: source.ts.embedded.html
+ begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])ts\1?)
+ beginCaptures:
+ '1': {name: punctuation.definition.tag.begin.html}
+ '2': {name: entity.name.tag.script.html}
+ end: (?<=(script|SCRIPT))(>)(?:\s*\n)?
+ endCaptures:
+ '2': {name: punctuation.definition.tag.html}
+ patterns:
+ - include: '#tag-stuff'
+ - begin: (?)
+ end: ()((?i:script))
+ captures:
+ '1': {name: punctuation.definition.tag.begin.html}
+ '2': {name: entity.name.tag.script.html}
+ patterns:
+ - include: source.ts
+
- name: source.coffee.embedded.html
begin: (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])coffee\1?)
beginCaptures:
diff --git a/vue.tmLanguage b/vue.tmLanguage
index b8f67f4..a8bdbeb 100644
--- a/vue.tmLanguage
+++ b/vue.tmLanguage
@@ -529,10 +529,6 @@
include
source.sass
-
- include
- source.scss
-
@@ -585,11 +581,7 @@
include
- source.sass
-
-
- include
- source.scss
+ source.css.scss
@@ -643,7 +635,7 @@
include
- source.less
+ source.css.less
@@ -703,6 +695,68 @@
+
+ begin
+ (?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])ts\1?)
+ beginCaptures
+
+ 1
+
+ name
+ punctuation.definition.tag.begin.html
+
+ 2
+
+ name
+ entity.name.tag.script.html
+
+
+ end
+ (?<=</(script|SCRIPT))(>)(?:\s*\n)?
+ endCaptures
+
+ 2
+
+ name
+ punctuation.definition.tag.html
+
+
+ name
+ source.ts.embedded.html
+ patterns
+
+
+ include
+ #tag-stuff
+
+
+ begin
+ (?<!</(?:script|SCRIPT))(>)
+ captures
+
+ 1
+
+ name
+ punctuation.definition.tag.begin.html
+
+ 2
+
+ name
+ entity.name.tag.script.html
+
+
+ end
+ (</)((?i:script))
+ patterns
+
+
+ include
+ source.ts
+
+
+
+
+
begin
(?:^\s+)?(<)((?i:script))\b(?=[^>]*lang=(['"])coffee\1?)