Fix syntax highlighting grammar (#680)

* (fix) syntag highlighting

Fix special svelte attributes highlighting by listing them out instead of using a generic \w+ regex. No longer treats "superon:click" as a special svelte attribute and highlights accordingly.

* Fix highlighting for empty style/script/template tag by adding a "not immediately followed by </" condition to the begin regex.

Author: dummdidumm

packages/svelte-vscode/syntaxes/svelte.tmLanguage.src.yaml

@@ -10,79 +10,79 @@ injections:
 
   # Format:
   #  'L:meta.<script|style|template>.svelte (meta.lang.<lang> | meta.lang.<langalternative> | ...) - (meta source)'
-  #     patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+  #     patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
   #     contentName: source.<lang>, patterns: [{ include: source.<lang> }]}]
 
   # Script Languages
   # JavaScript | 'javascript' | 'source.js'
   'L:meta.script.svelte meta.lang.javascript - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.js, patterns: [{ include: source.js }]}]
 
   # TypeScript | 'ts' 'typescript' | 'source.ts'
   'L:meta.script.svelte (meta.lang.ts | meta.lang.typescript) - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.ts, patterns: [{ include: source.ts }]}]
 
   # CoffeeScript | 'coffee' | 'source.coffee'
   'L:meta.script.svelte meta.lang.coffee - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.coffee, patterns: [{ include: source.coffee }]}]
 
   # Default (JavaScript)
   'L:meta.script.svelte - meta.lang - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.js, patterns: [{ include: source.js }]}]
 
   # ----
 
   # Style Languages
   # Stylus | 'stylus' | 'source.stylus'
   'L:meta.style.svelte meta.lang.stylus - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.stylus, patterns: [{ include: source.stylus }]}]
 
   # Sass | 'sass' | 'source.sass'
   'L:meta.style.svelte meta.lang.sass - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.sass, patterns: [{ include: source.sass }]}]
 
   # CSS | 'css' | 'source.css'
   'L:meta.style.svelte meta.lang.css - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.css, patterns: [{ include: source.css }]}]
 
   # SCSS | 'scss' | 'source.css.scss'
   'L:meta.style.svelte meta.lang.scss - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.css.scss, patterns: [{ include: source.css.scss }]}]
 
   # Less | 'less' | 'source.css.less'
   'L:meta.style.svelte meta.lang.less - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.css.less, patterns: [{ include: source.css.less }]}]
 
   # PostCSS | 'postcss' | 'source.css.postcss'
   'L:meta.style.svelte meta.lang.postcss - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.css.postcss, patterns: [{ include: source.css.postcss }]}]
 
   # Default (CSS)
   'L:meta.style.svelte - meta.lang - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: source.css, patterns: [{ include: source.css }]}]
 
   # ----
 
   # Template Languages
   # Pug | 'pug' | 'text.pug'
   'L:meta.template.svelte meta.lang.pug - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', name: meta.embedded.block.svelte,
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', name: meta.embedded.block.svelte,
     contentName: text.pug, patterns: [{ include: text.pug }]}]
 
   # Default (just introduces a new scope)
   'L:meta.template.svelte - meta.lang - (meta source)':
-    patterns: [{begin: '(?<=>)', end: '(?=</)', patterns: [{ include: '#scope' }]}]
+    patterns: [{begin: '(?<=>)(?!</)', end: '(?=</)', patterns: [{ include: '#scope' }]}]
 
   # ---- LANGUAGE EXTENSIONS
 
@@ -364,7 +364,8 @@ repository:
   # For Svelte element directives. Scopes the 'on' part in `on:click`.
   attributes-directives-keywords:
     patterns:
-    # If other keywords are patched in in the future, they can easily be added here.
+    # If other keywords are patched in in the future, they can be added here but also need to be added
+    # where attributes-directives-keywords is included.
     - { match: on|use|bind,               name: keyword.control.svelte           }
     - { match: transition|in|out|animate, name: keyword.other.animation.svelte   }
     - { match: let,                       name: storage.type.svelte              }
@@ -385,7 +386,8 @@ repository:
 
   # Matches Svelte element directives, e.g. `on:click|preventDefault={var}`
   attributes-directives:
-    begin: (?<!<)(\w+)(:)([_$[:alpha:]][_\-$[:alnum:]]*)((?:\|.*)?\|\w*)?
+    # If something is added to attributes-directives-keywords, it must be added to the begin-regex, too.
+    begin: (?<!<)(on|use|bind|transition|in|out|animate|let|class)(:)([_$[:alpha:]][_\-$[:alnum:]]*)((?:\|.*)?\|\w*)?
     beginCaptures:
       1: { patterns: [ include: '#attributes-directives-keywords' ] }
       2: { name: punctuation.definition.keyword.svelte }