angular
diff --git a/‎vscode-ng-language-service/client/src/embedded_support.ts‎
Lines changed: 123 additions & 30 deletions b/‎vscode-ng-language-service/client/src/embedded_support.ts‎
Lines changed: 123 additions & 30 deletions
diff --git a/‎vscode-ng-language-service/client/src/tests/embedded_support_spec.ts‎
Lines changed: 139 additions & 0 deletions b/‎vscode-ng-language-service/client/src/tests/embedded_support_spec.ts‎
Lines changed: 139 additions & 0 deletions
@@ -11,11 +11,14 @@ import * as vscode from 'vscode';
 const ANGULAR_PROPERTY_ASSIGNMENTS = new Set([
   'template',
   'templateUrl',
+  'styles',
   'styleUrls',
   'styleUrl',
   'host',
 ]);
 
+const ANGULAR_HOST_BINDING_DECORATORS = new Set(['HostBinding', 'HostListener']);
+
 /**
  * Determines if the position is inside a decorator
  * property that supports language service features.
@@ -27,10 +30,11 @@ export function isNotTypescriptOrSupportedDecoratorField(
   if (document.languageId !== 'typescript') {
     return true;
   }
-  return isPropertyAssignmentToStringOrStringInArray(
+  return isInsideAngularStringLiteral(
     document.getText(),
     document.offsetAt(position),
     ANGULAR_PROPERTY_ASSIGNMENTS,
+    ANGULAR_HOST_BINDING_DECORATORS,
   );
 }
 
@@ -65,27 +69,21 @@ export function isInsideStringLiteral(
     return true;
   }
   const offset = document.offsetAt(position);
-  const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true /* skipTrivia */);
-  scanner.setText(document.getText());
+  const {scanner, scan} = createTemplateAwareScanner(document.getText());
 
-  let token: ts.SyntaxKind = scanner.scan();
+  let token: ts.SyntaxKind = scan();
   while (token !== ts.SyntaxKind.EndOfFileToken && scanner.getStartPos() < offset) {
-    const isStringToken =
-      token === ts.SyntaxKind.StringLiteral ||
-      token === ts.SyntaxKind.NoSubstitutionTemplateLiteral;
-    const isCursorInToken =
-      scanner.getStartPos() <= offset &&
-      scanner.getStartPos() + scanner.getTokenText().length >= offset;
-    if (isCursorInToken && isStringToken) {
+    if (isStringToken(token) && isCursorInToken(scanner, offset)) {
       return true;
     }
-    token = scanner.scan();
+    token = scan();
   }
   return false;
 }
 
 /**
- * Basic scanner to determine if we're inside a string of a property with one of the given names.
+ * Basic scanner to determine if we're inside a string of a property with one of the given names,
+ * or inside a string argument of a decorator with one of the given names.
  *
  * This scanner is not currently robust or perfect but provides us with an accurate answer _most_ of
  * the time.
@@ -95,24 +93,32 @@ export function isInsideStringLiteral(
  * `@Component` or `{styleUrls: [someFunction('stringL¦iteral')]}`, the @angular/language-service
  * will always give us the correct answer. This helper gives us a quick win for optimizing the
  * number of requests we send to the server.
- *
- * TODO(atscott): tagged templates don't work: #1872 /
- * https://github.com/Microsoft/TypeScript/issues/20055
  */
-function isPropertyAssignmentToStringOrStringInArray(
+function isInsideAngularStringLiteral(
   documentText: string,
   offset: number,
   propertyAssignmentNames: Set<string>,
+  decoratorNames: Set<string>,
 ): boolean {
-  const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true /* skipTrivia */);
-  scanner.setText(documentText);
+  const {scanner, scan} = createTemplateAwareScanner(documentText);
 
-  let token: ts.SyntaxKind = scanner.scan();
+  let token: ts.SyntaxKind = scan();
   let lastToken: ts.SyntaxKind | undefined;
   let lastTokenText: string | undefined;
+  let secondLastToken: ts.SyntaxKind | undefined;
   let unclosedBraces = 0;
   let unclosedBrackets = 0;
+  let unclosedParens = 0;
   let propertyAssignmentContext = false;
+  // Nesting depth at which the current property assignment context was entered. The context ends
+  // at the first terminator found at that same depth, i.e. the one that ends the assignment's
+  // initializer rather than one nested inside of it.
+  let contextBraces = 0;
+  let contextBrackets = 0;
+  let decoratorContext = false;
+  // Parenthesis depth at which the current decorator context was entered. The context ends at the
+  // closing parenthesis of the decorator call.
+  let contextParens = 0;
   while (token !== ts.SyntaxKind.EndOfFileToken && scanner.getStartPos() < offset) {
     if (
       lastToken === ts.SyntaxKind.Identifier &&
@@ -121,36 +127,64 @@ function isPropertyAssignmentToStringOrStringInArray(
       propertyAssignmentNames.has(lastTokenText)
     ) {
       propertyAssignmentContext = true;
-      token = scanner.scan();
+      contextBraces = unclosedBraces;
+      contextBrackets = unclosedBrackets;
+      token = scan();
       continue;
     }
-    if (unclosedBraces === 0 && unclosedBrackets === 0 && isPropertyAssignmentTerminator(token)) {
+    if (
+      propertyAssignmentContext &&
+      unclosedBraces === contextBraces &&
+      unclosedBrackets === contextBrackets &&
+      isPropertyAssignmentTerminator(token)
+    ) {
       propertyAssignmentContext = false;
     }
 
+    if (
+      secondLastToken === ts.SyntaxKind.AtToken &&
+      lastToken === ts.SyntaxKind.Identifier &&
+      lastTokenText !== undefined &&
+      token === ts.SyntaxKind.OpenParenToken &&
+      decoratorNames.has(lastTokenText)
+    ) {
+      decoratorContext = true;
+      contextParens = unclosedParens;
+    }
+    if (
+      decoratorContext &&
+      token === ts.SyntaxKind.CloseParenToken &&
+      unclosedParens === contextParens + 1
+    ) {
+      decoratorContext = false;
+    }
+
     if (token === ts.SyntaxKind.OpenBracketToken) {
       unclosedBrackets++;
     } else if (token === ts.SyntaxKind.OpenBraceToken) {
       unclosedBraces++;
+    } else if (token === ts.SyntaxKind.OpenParenToken) {
+      unclosedParens++;
     } else if (token === ts.SyntaxKind.CloseBracketToken) {
       unclosedBrackets--;
     } else if (token === ts.SyntaxKind.CloseBraceToken) {
       unclosedBraces--;
+    } else if (token === ts.SyntaxKind.CloseParenToken) {
+      unclosedParens--;
     }
 
-    const isStringToken =
-      token === ts.SyntaxKind.StringLiteral ||
-      token === ts.SyntaxKind.NoSubstitutionTemplateLiteral;
-    const isCursorInToken =
-      scanner.getStartPos() <= offset &&
-      scanner.getStartPos() + scanner.getTokenText().length >= offset;
-    if (propertyAssignmentContext && isCursorInToken && isStringToken) {
+    if (
+      (propertyAssignmentContext || decoratorContext) &&
+      isStringToken(token) &&
+      isCursorInToken(scanner, offset)
+    ) {
       return true;
     }
 
     lastTokenText = scanner.getTokenText();
+    secondLastToken = lastToken;
     lastToken = token;
-    token = scanner.scan();
+    token = scan();
   }
 
   return false;
@@ -164,3 +198,62 @@ function isPropertyAssignmentTerminator(token: ts.SyntaxKind) {
     token === ts.SyntaxKind.CloseBraceToken
   );
 }
+
+function isStringToken(token: ts.SyntaxKind): boolean {
+  return (
+    token === ts.SyntaxKind.StringLiteral || token === ts.SyntaxKind.NoSubstitutionTemplateLiteral
+  );
+}
+
+function isCursorInToken(scanner: ts.Scanner, offset: number): boolean {
+  return (
+    scanner.getStartPos() <= offset &&
+    scanner.getStartPos() + scanner.getTokenText().length >= offset
+  );
+}
+
+/**
+ * Creates a `ts.Scanner` for the given text along with a `scan` function that, unlike
+ * `ts.Scanner#scan`, handles template literals with substitutions correctly.
+ *
+ * The scanner has no notion of template substitutions on its own: it reports the `}` closing a
+ * `${...}` substitution as a plain `CloseBraceToken` and then treats the remainder of the template
+ * literal as the beginning of a new one, mis-scanning everything that follows it (see #65494). Just
+ * like the TypeScript parser, the returned `scan` function re-scans such braces as template
+ * continuations (`TemplateMiddle`/`TemplateTail`) instead.
+ */
+function createTemplateAwareScanner(text: string): {
+  scanner: ts.Scanner;
+  scan: () => ts.SyntaxKind;
+} {
+  const scanner = ts.createScanner(ts.ScriptTarget.ESNext, true /* skipTrivia */);
+  scanner.setText(text);
+
+  // Brace depth at which each currently open template substitution started, innermost last.
+  const substitutionDepths: number[] = [];
+  let braceDepth = 0;
+
+  const scan = (): ts.SyntaxKind => {
+    let token = scanner.scan();
+    if (token === ts.SyntaxKind.OpenBraceToken) {
+      braceDepth++;
+    } else if (token === ts.SyntaxKind.CloseBraceToken) {
+      if (
+        substitutionDepths.length > 0 &&
+        braceDepth === substitutionDepths[substitutionDepths.length - 1]
+      ) {
+        // This brace closes a template substitution rather than a block or object literal.
+        substitutionDepths.pop();
+        token = scanner.reScanTemplateToken(false /* isTaggedTemplate */);
+      } else {
+        braceDepth--;
+      }
+    }
+    if (token === ts.SyntaxKind.TemplateHead || token === ts.SyntaxKind.TemplateMiddle) {
+      substitutionDepths.push(braceDepth);
+    }
+    return token;
+  };
+
+  return {scanner, scan};
+}
@@ -9,6 +9,7 @@ import type * as vscode from 'vscode';
 import {DocumentUri, TextDocument} from 'vscode-languageserver-textdocument';
 
 import {
+  isInsideStringLiteral,
   isNotTypescriptOrSupportedDecoratorField,
   isNotTypescriptOrSupportedDecoratorRange,
 } from '../embedded_support';
@@ -90,6 +91,144 @@ describe('embedded language support', () => {
         false,
       );
     });
+
+    it('inside styles declared before template', () => {
+      test(
+        `const foo = {styles: ['h1 { col¦or: red; }'], template: '<div></div>'}`,
+        isNotTypescriptOrSupportedDecoratorField,
+        true,
+      );
+    });
+
+    it('inside a string of another property after template', () => {
+      test(
+        `const foo = {template: '<div></div>', selector: 'app¦-root'}`,
+        isNotTypescriptOrSupportedDecoratorField,
+        false,
+      );
+    });
+
+    it('inside a string in the class body after a template in the decorator', () => {
+      test(
+        `@Component({template: '<div></div>'})
+        export class AppComponent {
+          private property = 'd¦oe';
+        }`,
+        isNotTypescriptOrSupportedDecoratorField,
+        false,
+      );
+    });
+
+    it('inside a string of a nested host property', () => {
+      test(
+        `const foo = {host: {'[class.foo]': 'is¦Foo'}, selector: 'app-root'}`,
+        isNotTypescriptOrSupportedDecoratorField,
+        true,
+      );
+    });
+
+    it('inside a @HostListener decorator string', () => {
+      test(
+        `@Component({template: '<div></div>'})
+        export class AppComponent {
+          @HostListener('cl¦ick', ['$event']) onClick(event: Event) {}
+        }`,
+        isNotTypescriptOrSupportedDecoratorField,
+        true,
+      );
+    });
+
+    it('inside a @HostBinding decorator string of a directive without template', () => {
+      test(
+        `@Directive({selector: '[foo]'})
+        export class FooDirective {
+          @HostBinding('class.f¦oo') isFoo = true;
+        }`,
+        isNotTypescriptOrSupportedDecoratorField,
+        true,
+      );
+    });
+
+    it('inside a string after a @HostListener decorator', () => {
+      test(
+        `@Component({template: '<div></div>'})
+        export class AppComponent {
+          @HostListener('click', ['$event']) onClick(event: Event) {
+            console.log('cli¦cked');
+          }
+        }`,
+        isNotTypescriptOrSupportedDecoratorField,
+        false,
+      );
+    });
+
+    it('inside a string argument of a plain function call named like a decorator', () => {
+      test(`HostListener('cl¦ick');`, isNotTypescriptOrSupportedDecoratorField, false);
+    });
+
+    it('after a template literal with substitutions', () => {
+      test(
+        `@Component({template: \`\`})
+        export class AppComponent {
+          private property = 'doe';
+          private method(): void {
+            console.log(\`\${this.property}\`);
+            this.¦
+          }
+        }`,
+        isNotTypescriptOrSupportedDecoratorField,
+        false,
+      );
+    });
+
+    it('after a template literal with nested braces in a substitution', () => {
+      test(
+        `@Component({template: \`\`})
+        export class AppComponent {
+          private method(): void {
+            console.log(\`\${{a: 1}.a} and \${[1, 2].map((x) => { return x; })}\`);
+            this.¦
+          }
+        }`,
+        isNotTypescriptOrSupportedDecoratorField,
+        false,
+      );
+    });
+
+    it('inside a template literal template with substitutions', () => {
+      test(
+        `const foo = {template: \`<div>\${value}</d¦iv>\`}`,
+        isNotTypescriptOrSupportedDecoratorField,
+        false,
+      );
+    });
+
+    it('inside a template literal template after a template literal with substitutions', () => {
+      test(
+        `const prefix = \`\${getPrefix()}-\`;
+        const foo = {template: \`<div>¦</div>\`}`,
+        isNotTypescriptOrSupportedDecoratorField,
+        true,
+      );
+    });
+  });
+
+  describe('isInsideStringLiteral', () => {
+    it('inside a string literal', () => {
+      test(`const foo = 'ba¦r';`, isInsideStringLiteral, true);
+    });
+
+    it('outside of a string literal', () => {
+      test(`const foo = 'bar'; const baz = 1¦;`, isInsideStringLiteral, false);
+    });
+
+    it('after a template literal with substitutions', () => {
+      test(`const foo = \`\${bar}\`; const baz = 1¦;`, isInsideStringLiteral, false);
+    });
+
+    it('inside a string literal after a template literal with substitutions', () => {
+      test(`const foo = \`\${bar}\`; const baz = 'qu¦x';`, isInsideStringLiteral, true);
+    });
   });
 
   describe('isNotTypescriptOrSupportedDecoratorRange', () => {