feat(image mime types): added link rel type support

also: fixed some wrong applied scopes, missing characters from string captures, fixed pipe capture
when after type cast in angular directives

Author: ghaschel

README.md

@@ -67,6 +67,7 @@ This plugin adds syntax highlighting for angular HTML template files in VS Code.
   - [Coffeescript](#coffeescript)
   - [Dart](#dart)
   - [Javascript fallback](#javascript-fallback)
+- [Link tags](#link-tags)
 - [Theming](#theming)
 - [Translate](#translate)
 - [Changelog](#changelog)
@@ -279,6 +280,10 @@ And with [colorize support](https://marketplace.visualstudio.com/items?itemName=
 
 <img src="assets/script-tag-javascript-fallback.png" title="Script tags" alt="Script tag" />
 
+# Link tags
+
+<img src="assets/link-tag-icon" title="Link tags" alt="Link tag" />
+
 # Theming
 
 > If you want to create a theme and support this extension, please checkout the [theming docs](docs/THEMING.md)

assets/link-tag-icon.png

@@ -31,6 +31,7 @@
   - [Stylesheet](#stylesheet)
 - [Style tags](#style-tags)
 - [Script tags](#script-tags)
+- [Link tags](#link-tags)
 
 # General
 
@@ -219,3 +220,10 @@
   - `javascript` - html-template.ng.script.language.identifier
 - `lang="javascript"`
   - `javascript` - html-template.ng.script.language.identifier
+
+# Link tags
+
+<img src="../assets/link-tag-icon" title="Link tags" alt="Link tag" />
+
+- `type="image/x-icon"`
+  - `x-icon` - html-template.ng.link.myme-type

docs/THEMING.md

@@ -149,6 +149,11 @@
             "default": "",
             "markdownDescription": "%ext.settings.html.htmlScriptAttributesLanguageIdentifier%"
           },
+          "vscode-angular-html.htmlLinkAttributesMimeType": {
+            "type": "string",
+            "default": "",
+            "markdownDescription": "%ext.settings.html.htmlLinkAttributesMimeType%"
+          },
           "vscode-angular-html.ariaAttributePrefix": {
             "type": "string",
             "default": "",

package.json

@@ -10,6 +10,7 @@
   "ext.settings.html.htmlAttributeValueSeparator": "Matches HTML attribute-value separator (=).\nThis is a global match.\n\n* &#60;div onpointercancel`=`\"callback()\"&#62;&#60;/div&#62;\n\n* &#60;div class`=`\"test\"&#62;&#60;/div&#62;\n\n```html\n\n<div onpointercancel=\"callback()\"></div>\n<div class=\"test\"></div>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.html.htmlStyleAttributesLanguageIdentifier": "Matches HTML Style Type Attribute language identifier.\n\n* &#60;style type=\"text/`css`\"&#62;&#60;/style&#62;\n\n* &#60;style type=\"text/`scss`\"&#62;&#60;/style&#62;\n\n* &#60;style type=\"text/`sass`\"&#62;&#60;/style&#62;\n\n```html\n\n<style type=\"text/css\"></style>\n<style type=\"text/scss\"></style>\n<style type=\"text/sass\"></style>\n<style type=\"text/stylus\"></style>\n<style type=\"text/less\"></style>\n<style type=\"text/postcss\"></style>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.html.htmlScriptAttributesLanguageIdentifier": "Matches HTML Script Type Attribute language identifier.\n\n* &#60;script type=\"text/`javascript`\"&#62;&#60;/script&#62;\n\n* &#60;script type=\"text/`typescript`\"&#62;&#60;/script&#62;\n\n* &#60;script type=\"application/`dart`\"&#62;&#60;/script&#62;\n\n```html\n\n<script type=\"text/javascript\"></script>\n<script type=\"text/typescript\"></script>\n<script type=\"text/coffeescript\"></script>\n<script type=\"application/dart\"></script>\n\n\n```\nLeave it empty to disable for this item only",
+  "ext.settings.html.htmlLinkAttributesMimeType": "Matches HTML link tag type attribute icon MIME type.\n\n* &#60;link rel=\"icon\" type=\"image/`x-icon`\" /&#62;\n\n* &#60;link rel=\"icon\" type=\"image/`svg+xml`\" /&#62;\n\n```html\n\n<link rel=\"icon\" type=\"image/svg+xml\" />\n<link rel=\"icon\" type=\"image/x-icon\" />\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.html.htmlTags": "Matches HTML known elements.\n\n* &#60;`div`&#62;&#60;/`div`&#62;\n\n* &#60;`span`&#62;&#60;/`span`&#62;\n\n```html\n\n<div></div>\n<span></span>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.html.htmlCustomTags": "Matches non-standard HTML elements.\n\n* &#60;`circle`&#62;&#60;/`circle`&#62;\n\n* &#60;`another-custom-element`&#62;&#60;/`another-custom-element`&#62;\n\n```html\n\n<circle></circle>\n<another-custom-element></another-custom-element>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.html.ariaAttributePrefix": "Matches aria-attributes aria prefix.\n\n* &#60;div `aria-`label=\"label\"&#62;&#60;/div&#62;\n\n```html\n\n<div aria-label=\"label\"></div>\n\n```\nLeave it empty to disable for this item only",

package.nls.json

@@ -10,6 +10,7 @@
   "ext.settings.html.htmlAttributeValueSeparator": "Corresponde ao separador de atributo-valor (=) HTML.\nEsta é uma correspondência global.\n\n* &#60;div onpointercancel`=`\"callback()\"&#62;&#60;/div&#62;\n\n* &#60;div class`=`\"test\"&#62;&#60;/div&#62;\n\n```html\n\n<div onpointercancel=\"callback()\"></div>\n<div class=\"test\"></div>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.html.htmlStyleAttributesLanguageIdentifier": "Corresponde ao identificador de linguagem no atributo type da tag script.\n\n* &#60;style type=\"text/`css`\"&#62;&#60;/style&#62;\n\n* &#60;style type=\"text/`scss`\"&#62;&#60;/style&#62;\n\n* &#60;style type=\"text/`sass`\"&#62;&#60;/style&#62;\n\n```html\n\n<style type=\"text/css\"></style>\n<style type=\"text/scss\"></style>\n<style type=\"text/sass\"></style>\n<style type=\"text/stylus\"></style>\n<style type=\"text/less\"></style>\n<style type=\"text/postcss\"></style>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.html.htmlScriptAttributesLanguageIdentifier": "Corresponde ao identificador de linguagem no atributo type da tag style.\n\n* &#60;script type=\"text/`javascript`\"&#62;&#60;/script&#62;\n\n* &#60;script type=\"text/`typescript`\"&#62;&#60;/script&#62;\n\n* &#60;script type=\"application/`dart`\"&#62;&#60;/script&#62;\n\n```html\n\n<script type=\"text/javascript\"></script>\n<script type=\"text/typescript\"></script>\n<script type=\"text/coffeescript\"></script>\n<script type=\"application/dart\"></script>\n\n\n```\nDeixe em branco para desativar para este item.",
+  "ext.settings.html.htmlLinkAttributesMimeType": "Corresponde ao identificador de MIME Type no attributo type da tag link.\n\n* &#60;link rel=\"icon\" type=\"image/`x-icon`\" /&#62;\n\n* &#60;link rel=\"icon\" type=\"image/`svg+xml`\" /&#62;\n\n```html\n\n<link rel=\"icon\" type=\"image/svg+xml\" />\n<link rel=\"icon\" type=\"image/x-icon\" />\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.html.htmlTags": "Corresponde a elementos conhecidos do HTML.\n\n* &#60;`div`&#62;&#60;/`div`&#62;\n\n* &#60;`span`&#62;&#60;/`span`&#62;\n\n```html\n\n<div></div>\n<span></span>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.html.htmlCustomTags": "Corresponde a elements não conhecidos do HTML.\n\n* &#60;`circle`&#62;&#60;/`circle`&#62;\n\n* &#60;`another-custom-element`&#62;&#60;/`another-custom-element`&#62;\n\n```html\n\n<circle></circle>\n<another-custom-element></another-custom-element>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.html.ariaAttributePrefix": "Corresponde ao prefixo aria de atributos de acessibilidade.\n\n* &#60;div `aria-`label=\"label\"&#62;&#60;/div&#62;\n\n```html\n\n<div aria-label=\"label\"></div>\n\n```\nDeixe em branco para desativar para este item.",

package.nls.pt-br.json

@@ -0,0 +1,8 @@
+{
+  textMateRules: [
+    {
+      scope: 'html-template.ng.link.myme-type',
+      configRule: 'vscode-angular-html.htmlLinkAttributesMimeType',
+    },
+  ],
+}

src/color-customizations/link-type-attribute.json5

@@ -33,15 +33,15 @@
         },
       },
       begin: '(?<!\\S)(?!(?:ref|let|data|aria)?-)(?<!\\*|\\#)(?!(DOMMenuItemActive|DOMMenuItemInactive|DOMMouseScroll|onabort|onafterprint|onafterupdate|onbeforecopy|onbeforecut|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onblur|onbounce|onbroadcast|oncancel|oncanplay|oncanplaythrough|oncellchange|onchange|onclick|onclose|oncommandupdate|oncommand|oncontextmenu|oncopy|oncuechange|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondblclick|ondragdrop|ondragend|ondragenter|ondragexit|ondraggesture|ondragleave|ondragover|ondragstart|ondrag|ondrop|ondurationchange|onemptied|onended|onerrorupdate|onerror|onfilterchange|onfinish|onfocus|onformchange|onforminput|ongotpointercapture|onhelp|oninput|oninvalid|onkeydown|onkeypress|onkeyup|onloadeddata|onloadedmetadata|onloadstart|onload|onlosecapture|onlostpointercapture|onmousedown|onmouseenter|onmouseleave|onmousemove|onmouseout|onmouseover|onmouseup|onmousewheel|onoverflowchanged|onoverflow|onpaste|onpause|onplaying|onplay|onpointercancel|onpointerdown|onpointerenter|onpointerleave|onpointermove|onpointerout|onpointerover|onpointerup|onpopuphidden|onpopuphiding|onpopupshowing|onpopupshown|onprogress|onpropertychange|onratechange|onreadystatechange|onreset|onresize|onrowenter|onrowexit|onrowinserted|onrowsdelete|onscroll|onseeked|onseeking|onselectstart|onselect|onshow|onstalled|onstart|onstop|onsubmit|onsuspend|ontimeupdate|ontoggle|onunderflow|onunload|onvolumechange|onwaiting|style)\\b)\\b(([a-zA-Z0-9\\-_\\$]+)(?:[\\.]([a-zA-Z0-9\\-_\\%]+))?(?:\\.([a-zA-Z0-9\\-_\\%]+))?)(:)?([\\w\\-\\_$]+)?\\b(=)(")',
-      // begin: '(?<!\\S)(?!(?:ref|let)?-)(?<!\\*|\\#)(?!(DOMMenuItemActive|DOMMenuItemInactive|DOMMouseScroll|onabort|onafterprint|onafterupdate|onbeforecopy|onbeforecut|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onblur|onbounce|onbroadcast|oncancel|oncanplay|oncanplaythrough|oncellchange|onchange|onclick|onclose|oncommandupdate|oncommand|oncontextmenu|oncopy|oncuechange|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondblclick|ondragdrop|ondragend|ondragenter|ondragexit|ondraggesture|ondragleave|ondragover|ondragstart|ondrag|ondrop|ondurationchange|onemptied|onended|onerrorupdate|onerror|onfilterchange|onfinish|onfocus|onformchange|onforminput|ongotpointercapture|onhelp|oninput|oninvalid|onkeydown|onkeypress|onkeyup|onloadeddata|onloadedmetadata|onloadstart|onload|onlosecapture|onlostpointercapture|onmousedown|onmouseenter|onmouseleave|onmousemove|onmouseout|onmouseover|onmouseup|onmousewheel|onoverflowchanged|onoverflow|onpaste|onpause|onplaying|onplay|onpointercancel|onpointerdown|onpointerenter|onpointerleave|onpointermove|onpointerout|onpointerover|onpointerup|onpopuphidden|onpopuphiding|onpopupshowing|onpopupshown|onprogress|onpropertychange|onratechange|onreadystatechange|onreset|onresize|onrowenter|onrowexit|onrowinserted|onrowsdelete|onscroll|onseeked|onseeking|onselectstart|onselect|onshow|onstalled|onstart|onstop|onsubmit|onsuspend|ontimeupdate|ontoggle|onunderflow|onunload|onvolumechange|onwaiting|style)\\b)\\b([\\w\\-\\_$]+)(:)?([\\w\\-\\_$]+)?\\b(=)(")',
       end: '(")',
       patterns: [
         {
           begin: '(?<=")',
           end: '(?=")',
           patterns: [
             {
-              match: '([[:alpha:]0-9\\s\\-_&$@\\#\\%\\^\\;\\+\\*!?()\\[\\]:\\/\\\\\\.\\,-]+)(?![^{]*\\})',
+              match: '([[:alpha:]0-9\\s\\-_&$@\\#\\%\\^\\;\\+\\*!?()\\[\\]:\\/\\\\\\.\\,-\\=]+|(?<!{)({)(?!{)|(?<!})(})(?!}))',
+              // match: '([[:alpha:]0-9\\s\\-_&$@\\#\\%\\^\\;\\+\\*!?()\\[\\]:\\/\\\\\\.\\,-\\=]+)(?![^{]*\\})',
               name: 'string.quoted.double.html',
             },
             {

src/grammar/repository/attributes/generic/tag-generic-attribute.json5

@@ -0,0 +1,37 @@
+{
+  repository: {
+    'link-type-attribute': {
+      patterns: [
+        {
+          match: '[\\s]*(type)(=)(")((image)/((x-)?(icon|png|jpg|jpeg|svg\\+xml|svg|vnd\\.microsoft\\.icon)))(")',
+          captures: {
+            '0': {
+              name: 'meta.attribute.$1.html',
+            },
+            '1': {
+              name: 'entity.other.attribute-name.html html-template.ng.attributes.generic',
+            },
+            '2': {
+              name: 'punctuation.separator.key-value.html punctuation.separator.key-value.html-template.ng',
+            },
+            '3': {
+              name: 'string.quoted.double.html',
+            },
+            '4': {
+              name: 'string.quoted.double.html',
+            },
+            '6': {
+              name: 'html-template.ng.script.language.identifier',
+            },
+            '9': {
+              name: 'html-template.ng.script.language.identifier',
+            },
+            '10': {
+              name: 'string.quoted.double.html',
+            },
+          },
+        },
+      ],
+    },
+  },
+}

src/grammar/repository/attributes/generic/tag-link-type-attribute.json5

@@ -59,7 +59,7 @@
               name: 'keyword.control.as.ts',
             },
           },
-          end: '(?=$|"|[;,:})\\]])',
+          end: '(?=$|"|[;,:\\|})\\]])',
           patterns: [
             {
               include: '#type',