feat(control flow): added control flow syntax support

ghaschel · ghaschel · commit f7a870276077 · 2023-11-21T13:49:47.000-03:00
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 
 <div align="center">
     <img src="assets/angular-html.png" title="vscode-angular-html" alt="Logo" />
-</div>
+</div>z
 
 > Note: No theme will have the highlighting displayed in these images. For that effect, run the `vscode-angular-html: Set legacy color customizations` command from the command pallete and you're good to go.
 
@@ -31,6 +31,7 @@ This plugin adds syntax highlighting for angular HTML template files in VS Code.
 - [Angular](#angular)
   - [Directives](#directives)
   - [Interpolations](#interpolations)
+  - [Control Flow](#control-flow)
   - [Structural tags](#structural-tags)
 - [HTML](#html)
   - [Doctype](#doctype)
@@ -102,6 +103,10 @@ This plugin adds syntax highlighting for angular HTML template files in VS Code.
 
 <img src="assets/angular-interpolations.png" title="Angular Interpolations" alt="Angular Interpolations" />
 
+## Control Flow
+
+<img src="assets/angular-control-flow.png" title="Angular Control Flow" alt="Angular Control Flow" />
+
 ## Structural tags
 
 > See the [complete list](docs/ANGULAR-SPECIFIC-TAGS.md)
@@ -282,7 +287,7 @@ And with [colorize support](https://marketplace.visualstudio.com/items?itemName=
 
 # Link tags
 
-<img src="assets/link-tag-icon" title="Link tags" alt="Link tag" />
+<img src="assets/link-tag-icon.png" title="Link tags" alt="Link tag" />
 
 # Theming
 
diff --git a/assets/angular-control-flow.png b/assets/angular-control-flow.png
diff --git a/docs/THEMING.md b/docs/THEMING.md
@@ -13,6 +13,7 @@
 - [Angular](#angular)
   - [Directives](#directives)
   - [Interpolations](#interpolations)
+  - [Control Flow](#control-flow)
 - [PrimeNG](#primeng)
 - [HTML](#html)
   - [Doctype](#doctype)
@@ -110,6 +111,13 @@
 - `??`, `&` - html-template.ng.expression.operator.bitwise
 - `}}` - html-template.ng.interpolation.end
 
+## Control Flow
+
+<img src="../assets/angular-control-flow.png" title="Angular Control Flow" alt="Angular Control Flow" />
+
+- `@` - html-template.ng.control-flow.prefix
+- `for`, `switch`, `if`, `[...]` - html-template.ng.control-flow.keyword
+
 # PrimeNG
 
 <img src="../assets/prime-ng-tags.png" title="Prime NG Tags" alt="Prime NG Tags" />
diff --git a/package.json b/package.json
@@ -283,6 +283,16 @@
             "type": "string",
             "default": "",
             "markdownDescription": "%ext.settings.angular.angularTemplateVariableName%"
+          },
+          "vscode-angular-html.controlFlowPrefix": {
+            "type": "string",
+            "default": "",
+            "markdownDescription": "%ext.settings.angular.controlFlowPrefix%"
+          },
+          "vscode-angular-html.controlFlowKeyword": {
+            "type": "string",
+            "default": "",
+            "markdownDescription": "%ext.settings.angular.controlFlowKeyword%"
           }
         }
       },
diff --git a/package.nls.json b/package.nls.json
@@ -37,6 +37,8 @@
   "ext.settings.angular.angularTemplateVariablePrefix": "Matches Angular template variable decorator.\n\n* &#60;div `#`menu=\"parsedMenu\"&#62;&#60;/div&#62;\n\n```html\n\n<div #menu=\"parsedMenu\"></div>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.angular.angularTemplateVariableName": "Matches Angular template variable name.\n\n* &#60;div #`menu`=\"parsedMenu\"&#62;&#60;/div&#62;\n\n```html\n\n<div #menu=\"parsedMenu\"></div>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.angular.angularExpressionOperatorsAndNavigatorsColor": "Matches Angular expressions' operators and navigators.\n\n* {{ if (key`?.`value `||` condition `&&` condition) {} }}\n\n* {{ if (key`.`value `!==` '') {} }}\n\n* {{ if (key`!.`value `===` '') {} }}\n\n```html{{\n\n{{\n\tif (key?.value || condition && condition) {}\n\tif (key.value !== '') {}\n\tif (key!.value === '') {}\n}}\n\n\n```\nLeave it empty to disable for this item only",
+  "ext.settings.angular.controlFlowPrefix": "Matches Angular's control flow keyword prefix (@).\n\n* `@`if (showBody) { &#60;body-cmp/&#62; }\n\n* `@`else if (showSummary) { &#60;summary-cmp/&#62; }\n\n* `@`else { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nLeave it empty to disable for this item only",
+  "ext.settings.angular.controlFlowKeyword": "Matches Angular's control flow keywords.\n\n* @`if` (showBody) { &#60;body-cmp/&#62; }\n\n* @`else if` (showSummary) { &#60;summary-cmp/&#62; }\n\n* @`else` { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nLeave it empty to disable for this item only",
   "ext.settings.primeng.primeNgElementTags": "Matches PrimeNG-specific element tags.\n\n* &#60;`p-calendar`&#62;&#60;/`p-calendar`&#62;\n\n* &#60;`p-button`&#62;&#60;/`p-button`&#62;\n\n```html\n\n<p-calendar></p-calendar>\n<p-button></p-button>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.svg.svgTags": "Matches known SVG elements.\n\n* &#60;`circle`&#62;&#60;/`circle`&#62;\n\n* &#60;`path`&#62;&#60;/`path`&#62;\n\n```html\n\n<circle></circle>\n<svg>\n\t<circle></circle>\n\t<path></path>\n</svg>\n\n\n```\nLeave it empty to disable for this item only",
   "ext.settings.svg.svgDAttributePathCommands": "Matches SVG d attribute path commands.\n\n* &#60;path d=\"`M`202.35,163.64`l`-4.38-13.1`h`-2.13`v`-3.85`h`9.1`v`3.85`h`-1.82`l`2.05,6.2`l`3.41-10.05\" /&#62;\n\n```html\n\n<svg>\n\t<path d=\"M202.35,163.64l-4.38-13.1h-2.13v-3.85h9.1v3.85h-1.82l2.05,6.2l3.41-10.05\" />\n</svg>\n\n\n```\nLeave it empty to disable for this item only",
diff --git a/package.nls.pt-br.json b/package.nls.pt-br.json
@@ -37,6 +37,8 @@
   "ext.settings.angular.angularTemplateVariablePrefix": "Corresponde ao decorador de variaveis de template do Angular.\n\n* &#60;div `#`menu=\"parsedMenu\"&#62;&#60;/div&#62;\n\n```html\n\n<div #menu=\"parsedMenu\"></div>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.angular.angularTemplateVariableName": "Corresponde ao nome das variaveis de template do Angular.\n\n* &#60;div #`menu`=\"parsedMenu\"&#62;&#60;/div&#62;\n\n```html\n\n<div #menu=\"parsedMenu\"></div>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.angular.angularExpressionOperatorsAndNavigatorsColor": "Corresponde aos operadores e navegadores das expressoes Angular.\n\n* {{ if (key`?.`value `||` condition `&&` condition) {} }}\n\n* {{ if (key`.`value `!==` '') {} }}\n\n* {{ if (key`!.`value `===` '') {} }}\n\n```html{{\n\n{{\n\tif (key?.value || condition && condition) {}\n\tif (key.value !== '') {}\n\tif (key!.value === '') {}\n}}\n\n\n```\nDeixe em branco para desativar para este item.",
+  "ext.settings.angular.controlFlowPrefix": "Corresponde ao prefixo de palavras-chave de fluxo de controle do Angular (@).\n\n* `@`if (showBody) { &#60;body-cmp/&#62; }\n\n* `@`else if (showSummary) { &#60;summary-cmp/&#62; }\n\n* `@`else { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nDeixe em branco para desativar para este item.",
+  "ext.settings.angular.controlFlowKeyword": "Corresponde a palavras-chave de fluxo de controle do Angular.\n\n* @`if` (showBody) { &#60;body-cmp/&#62; }\n\n* @`else if` (showSummary) { &#60;summary-cmp/&#62; }\n\n* @`else` { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.primeng.primeNgElementTags": "Corresponde a tags específicas do PrimeNG\n\n* &#60;`p-calendar`&#62;&#60;/`p-calendar`&#62;\n\n* &#60;`p-button`&#62;&#60;/`p-button`&#62;\n\n```html\n\n<p-calendar></p-calendar>\n<p-button></p-button>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.svg.svgTags": "Corresponde a elementos conhecidos do SVG.\n\n* &#60;`circle`&#62;&#60;/`circle`&#62;\n\n* &#60;`path`&#62;&#60;/`path`&#62;\n\n```html\n\n<circle></circle>\n<svg>\n\t<circle></circle>\n\t<path></path>\n</svg>\n\n\n```\nDeixe em branco para desativar para este item.",
   "ext.settings.svg.svgDAttributePathCommands": "Corresponde a comandos do atributo d de tags path no SVG.\n\n* &#60;path d=\"`M`202.35,163.64`l`-4.38-13.1`h`-2.13`v`-3.85`h`9.1`v`3.85`h`-1.82`l`2.05,6.2`l`3.41-10.05\" /&#62;\n\n```html\n\n<svg>\n\t<path d=\"M202.35,163.64l-4.38-13.1h-2.13v-3.85h9.1v3.85h-1.82l2.05,6.2l3.41-10.05\" />\n</svg>\n\n\n```\nDeixe em branco para desativar para este item.",
diff --git a/src/color-customizations/angular-control-flow-keyword.json5 b/src/color-customizations/angular-control-flow-keyword.json5
@@ -0,0 +1,8 @@
+{
+  textMateRules: [
+    {
+      scope: 'html-template.ng.control-flow.keyword',
+      configRule: 'vscode-angular-html.controlFlowKeyword',
+    },
+  ],
+}
diff --git a/src/color-customizations/angular-control-flow-prefix.json5 b/src/color-customizations/angular-control-flow-prefix.json5
@@ -0,0 +1,8 @@
+{
+  textMateRules: [
+    {
+      scope: 'html-template.ng.control-flow.prefix',
+      configRule: 'vscode-angular-html.controlFlowPrefix',
+    },
+  ],
+}
diff --git a/src/grammar/base.json5 b/src/grammar/base.json5
@@ -3,6 +3,7 @@
   name: 'angular-html',
   scopeName: 'html-template.ng',
   patterns: [
+    { include: '#angular-control-flow' },
     { include: '#angular-interpolations' },
     { include: '#tag-svg' },
     { include: '#tag-script' },
diff --git a/src/grammar/repository/misc/angular/control-flow/angular-control-flow.json5 b/src/grammar/repository/misc/angular/control-flow/angular-control-flow.json5
@@ -0,0 +1,14 @@
+{
+  repository: {
+    'angular-control-flow': {
+      patterns: [
+        {
+          include: '#control-flow-expression-parenthesis',
+        },
+        {
+          include: '#control-flow-expression-no-parenthesis',
+        },
+      ],
+    },
+  },
+}
diff --git a/src/grammar/repository/misc/angular/control-flow/control-flow-expression-no-parenthesis.json5 b/src/grammar/repository/misc/angular/control-flow/control-flow-expression-no-parenthesis.json5
@@ -0,0 +1,41 @@
+{
+  repository: {
+    'control-flow-expression-no-parenthesis': {
+      name: 'control-flow.ng',
+      begin: '((@)([a-zA-Z]+))\\s*(?!\\()',
+      beginCaptures: {
+        '2': {
+          name: 'entity.other.html.ng.control-flow meta.ng-control-flow.prefix.html html-template.ng.control-flow.prefix',
+        },
+        '3': {
+          name: 'entity.other.html.ng.control-flow meta.ng-control-flow.prefix.html html-template.ng.control-flow.keyword',
+        },
+        '4': {
+          name: 'meta.brace.round.ts',
+        },
+      },
+      end: '(\\s*\\{)',
+      endCaptures: {
+        '0': {
+          name: 'meta.brace.curly.ts',
+        },
+      },
+      patterns: [
+        {
+          name: 'keyword.control.on.ts',
+          match: '\\s*(on)\\s*',
+        },
+        {
+          name: 'entity.other.html.ng.control-flow meta.ng-control-flow.prefix.html html-template.ng.control-flow.keyword',
+          match: '\\s*(if)\\s*',
+        },
+        {
+          include: '#angular-expression',
+        },
+        {
+          include: '#punctuation-comma',
+        },
+      ],
+    },
+  },
+}
diff --git a/src/grammar/repository/misc/angular/control-flow/control-flow-expression-parenthesis.json5 b/src/grammar/repository/misc/angular/control-flow/control-flow-expression-parenthesis.json5
@@ -0,0 +1,37 @@
+{
+  repository: {
+    'control-flow-expression-parenthesis': {
+      name: 'meta.ng.control-flow.expression',
+      begin: '((@)([a-zA-Z]+))\\s*(\\()',
+      beginCaptures: {
+        '2': {
+          name: 'entity.other.html.ng.control-flow meta.ng-control-flow.prefix.html html-template.ng.control-flow.prefix',
+        },
+        '3': {
+          name: 'entity.other.html.ng.control-flow meta.ng-control-flow.prefix.html html-template.ng.control-flow.keyword',
+        },
+        '4': {
+          name: 'meta.brace.round.ts',
+        },
+      },
+      end: '(\\))',
+      endCaptures: {
+        '0': {
+          name: 'meta.brace.round.ts',
+        },
+      },
+      patterns: [
+        {
+          name: 'keyword.control.on.ts',
+          match: '\\s*(on)\\s*',
+        },
+        {
+          include: '#angular-expression',
+        },
+        {
+          include: '#punctuation-comma',
+        },
+      ],
+    },
+  },
+}
diff --git a/src/locale/assets/markdown.json b/src/locale/assets/markdown.json
@@ -38,7 +38,9 @@
       "angularSyntaxSugarAttributesName": "\n\n* &#60;div *`ngFor`=\"let obs of observable | async as test\"&#62;&#60;/div&#62;\n\n```html\n\n<div \n\t*ngFor=\"let obs of observable | async as test\"\n\t *matHeaderCellDef\n>\n</div>\n\n\n```\n",
       "angularTemplateVariablePrefix": "\n\n* &#60;div `#`menu=\"parsedMenu\"&#62;&#60;/div&#62;\n\n```html\n\n<div #menu=\"parsedMenu\"></div>\n\n\n```\n",
       "angularTemplateVariableName": "\n\n* &#60;div #`menu`=\"parsedMenu\"&#62;&#60;/div&#62;\n\n```html\n\n<div #menu=\"parsedMenu\"></div>\n\n\n```\n",
-      "angularExpressionOperatorsAndNavigatorsColor": "\n\n* {{ if (key`?.`value `||` condition `&&` condition) {} }}\n\n* {{ if (key`.`value `!==` '') {} }}\n\n* {{ if (key`!.`value `===` '') {} }}\n\n```html{{\n\n{{\n\tif (key?.value || condition && condition) {}\n\tif (key.value !== '') {}\n\tif (key!.value === '') {}\n}}\n\n\n```\n"
+      "angularExpressionOperatorsAndNavigatorsColor": "\n\n* {{ if (key`?.`value `||` condition `&&` condition) {} }}\n\n* {{ if (key`.`value `!==` '') {} }}\n\n* {{ if (key`!.`value `===` '') {} }}\n\n```html{{\n\n{{\n\tif (key?.value || condition && condition) {}\n\tif (key.value !== '') {}\n\tif (key!.value === '') {}\n}}\n\n\n```\n",
+      "controlFlowPrefix": "\n\n* `@`if (showBody) { &#60;body-cmp/&#62; }\n\n* `@`else if (showSummary) { &#60;summary-cmp/&#62; }\n\n* `@`else { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\n",
+      "controlFlowKeyword": "\n\n* @`if` (showBody) { &#60;body-cmp/&#62; }\n\n* @`else if` (showSummary) { &#60;summary-cmp/&#62; }\n\n* @`else` { Nothing to see here }\n\n```html\n\n@if (showBody) {\n\t<body-cmp />\n} @else if (showSummary) {\n\t<summary-cmp />\n} @else {\n\tNothing to see here\n}\n```\n"
     },
     "primeng": {
       "primeNgElementTags": "\n\n* &#60;`p-calendar`&#62;&#60;/`p-calendar`&#62;\n\n* &#60;`p-button`&#62;&#60;/`p-button`&#62;\n\n```html\n\n<p-calendar></p-calendar>\n<p-button></p-button>\n\n\n```\n"
diff --git a/src/locale/languages/en/keys.json b/src/locale/languages/en/keys.json
@@ -49,6 +49,8 @@
       "angularTemplateVariablePrefix": "Matches Angular template variable decorator.",
       "angularTemplateVariableName": "Matches Angular template variable name.",
       "angularExpressionOperatorsAndNavigatorsColor": "Matches Angular expressions' operators and navigators.",
+      "controlFlowPrefix": "Matches Angular's control flow keyword prefix (@).",
+      "controlFlowKeyword": "Matches Angular's control flow keywords.",
       "seeAngularTags": "See Angular-specific tags"
     },
     "primeng": {
diff --git a/src/locale/languages/new-language-template.json b/src/locale/languages/new-language-template.json
@@ -49,6 +49,8 @@
       "angularTemplateVariablePrefix": "",
       "angularTemplateVariableName": "",
       "angularExpressionOperatorsAndNavigatorsColor": "",
+      "controlFlowPrefix": "",
+      "controlFlowKeyword": "",
       "seeAngularTags": ""
     },
     "primeng": {
diff --git a/src/locale/languages/pt-br/keys.json b/src/locale/languages/pt-br/keys.json
@@ -49,6 +49,8 @@
       "angularTemplateVariablePrefix": "Corresponde ao decorador de variaveis de template do Angular.",
       "angularTemplateVariableName": "Corresponde ao nome das variaveis de template do Angular.",
       "angularExpressionOperatorsAndNavigatorsColor": "Corresponde aos operadores e navegadores das expressoes Angular.",
+      "controlFlowPrefix": "Corresponde ao prefixo de palavras-chave de fluxo de controle do Angular (@).",
+      "controlFlowKeyword": "Corresponde a palavras-chave de fluxo de controle do Angular.",
       "seeAngularTags": "Ver tags específicas do Angular"
     },
     "primeng": {
diff --git a/src/locale/types/locale-keys.ts b/src/locale/types/locale-keys.ts
@@ -49,6 +49,8 @@ export interface LocaleKeys {
       angularTemplateVariablePrefix: string;
       angularTemplateVariableName: string;
       angularExpressionOperatorsAndNavigatorsColor: string;
+      controlFlowPrefix: string;
+      controlFlowKeyword: string;
       seeAngularTags: string;
     };
     primeng: {
diff --git a/src/locale/types/package.nls.ts b/src/locale/types/package.nls.ts
@@ -37,6 +37,8 @@ export interface PackageNls {
   'ext.settings.angular.angularTemplateVariablePrefix': string;
   'ext.settings.angular.angularTemplateVariableName': string;
   'ext.settings.angular.angularExpressionOperatorsAndNavigatorsColor': string;
+  'ext.settings.angular.controlFlowPrefix': string;
+  'ext.settings.angular.controlFlowKeyword': string;
   'ext.settings.primeng.primeNgElementTags': string;
   'ext.settings.svg.svgTags': string;
   'ext.settings.svg.svgDAttributePathCommands': string;
diff --git a/src/locale/utils/template.ts b/src/locale/utils/template.ts
@@ -51,6 +51,8 @@ const buildJson = (lang: Lang): PackageNls => {
     'ext.settings.angular.angularTemplateVariablePrefix': `${json.settings.angular.angularTemplateVariablePrefix}${markdown.settings.angular.angularTemplateVariablePrefix}${json.settings.general.leaveEmpty}`,
     'ext.settings.angular.angularTemplateVariableName': `${json.settings.angular.angularTemplateVariableName}${markdown.settings.angular.angularTemplateVariableName}${json.settings.general.leaveEmpty}`,
     'ext.settings.angular.angularExpressionOperatorsAndNavigatorsColor': `${json.settings.angular.angularExpressionOperatorsAndNavigatorsColor}${markdown.settings.angular.angularExpressionOperatorsAndNavigatorsColor}${json.settings.general.leaveEmpty}`,
+    'ext.settings.angular.controlFlowPrefix': `${json.settings.angular.controlFlowPrefix}${markdown.settings.angular.controlFlowPrefix}${json.settings.general.leaveEmpty}`,
+    'ext.settings.angular.controlFlowKeyword': `${json.settings.angular.controlFlowKeyword}${markdown.settings.angular.controlFlowKeyword}${json.settings.general.leaveEmpty}`,
     'ext.settings.primeng.primeNgElementTags': `${json.settings.primeng.primeNgElementTags}${markdown.settings.primeng.primeNgElementTags}${json.settings.general.leaveEmpty}`,
     'ext.settings.svg.svgTags': `${json.settings.svg.svgTags}${markdown.settings.svg.svgTags}${json.settings.general.leaveEmpty}`,
     'ext.settings.svg.svgDAttributePathCommands': `${json.settings.svg.svgDAttributePathCommands}${markdown.settings.svg.svgDAttributePathCommands}${json.settings.general.leaveEmpty}`,
diff --git a/src/ts/interfaces/legacy-scopes-per-rule.ts b/src/ts/interfaces/legacy-scopes-per-rule.ts
@@ -9,6 +9,7 @@ export enum LegacyScopes {
   angularTemplateVariablePrefix = 'string.regexp',
   xmlTagNamespaceDivider = 'string.regexp',
   xmlAttributeNamespaceDivider = 'string.regexp',
+  controlFlowPrefix = 'string.regexp',
 
   svgDAttributePathCommands = 'keyword.operator.entity.html',
   angularOneWayBindingSecondLevelDepth = 'keyword.operator.entity.html',
@@ -52,6 +53,7 @@ export enum LegacyScopes {
   angularTemplateVariableName = 'constant.numeric.angular-directive',
   xmlStylesheetAttributesLanguageIdentifier = 'constant.numeric.angular-directive',
   dataAttributePrefix = 'constant.numeric.angular-directive',
+  controlFlowKeyword = 'constant.numeric.angular-directive',
 
   angularPrefixedAttributesLetPrefix = 'keyword.operator.expression.let.js',
   ariaAttributePrefix = 'keyword.operator.expression.let.js',
diff --git a/src/ts/interfaces/settings-dictionary.ts b/src/ts/interfaces/settings-dictionary.ts
@@ -55,4 +55,6 @@ export interface SettingsDictionary {
   'vscode-angular-html.xmlTagNamespaceSuffix'?: string;
   'vscode-angular-html.xmlAttributeNamespaceDivider'?: string;
   'vscode-angular-html.xmlAttributeNamespaceSuffix'?: string;
+  'vscode-angular-html.controlFlowPrefix'?: string;
+  'vscode-angular-html.controlFlowKeyword'?: string;
 }
diff --git a/src/ts/resources/tokens.json b/src/ts/resources/tokens.json
@@ -1,5 +1,13 @@
 {
   "textMateRules": [
+    {
+      "scope": "html-template.ng.control-flow.keyword",
+      "configRule": "vscode-angular-html.controlFlowKeyword"
+    },
+    {
+      "scope": "html-template.ng.control-flow.prefix",
+      "configRule": "vscode-angular-html.controlFlowPrefix"
+    },
     {
       "scope": "html-template.ng.interpolation.begin",
       "configRule": "vscode-angular-html.angularExpression"
diff --git a/src/ts/themes/index.ts b/src/ts/themes/index.ts
@@ -110,6 +110,8 @@ const applyScopeColors = async (scopeColors: Scopes, debug: Debug): Promise<void
     scopeColors[LegacyScopes.xmlStylesheetAttributesLanguageIdentifier];
   settings['vscode-angular-html.xmlTagNamespaceDivider'] = scopeColors[LegacyScopes.xmlTagNamespaceDivider];
   settings['vscode-angular-html.xmlTagNamespaceSuffix'] = scopeColors[LegacyScopes.xmlTagNamespaceSuffix];
+  settings['vscode-angular-html.controlFlowPrefix'] = scopeColors[LegacyScopes.controlFlowPrefix];
+  settings['vscode-angular-html.controlFlowKeyword'] = scopeColors[LegacyScopes.controlFlowKeyword];
 
   debug.log('settings');
   debug.log(settings);
diff --git a/src/ts/token-customization/index.ts b/src/ts/token-customization/index.ts
@@ -41,6 +41,8 @@ const removeLegacyColorCustomizations = async (): Promise<SettingsDictionary> =>
   settings['vscode-angular-html.angularSyntaxSugarAttributesPrefix'] = '';
   settings['vscode-angular-html.angularTemplateVariableName'] = '';
   settings['vscode-angular-html.angularTemplateVariablePrefix'] = '';
+  settings['vscode-angular-html.controlFlowPrefix'] = '';
+  settings['vscode-angular-html.controlFlowKeyword'] = '';
   settings['vscode-angular-html.dtdDoctypeElement'] = '';
   settings['vscode-angular-html.dtdDoctypeExclamation'] = '';
   settings['vscode-angular-html.dtdDoctypeQualifier'] = '';
diff --git a/syntaxes/html-template.ng.json b/syntaxes/html-template.ng.json
diff --git a/test/test.component.html b/test/test.component.html
diff --git a/test/test.component.html.snap b/test/test.component.html.snap
