fixup! feat(compiler): warn when style suffixes are used with attribu…

…te bindings
angular · Jul 8, 2022 · fdab7fc · fdab7fc
1 parent 66b0526
commit fdab7fc
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/goldens/public-api/compiler-cli/error_code.md b/goldens/public-api/compiler-cli/error_code.md
@@ -67,7 +67,7 @@ export enum ErrorCode {
     SCHEMA_INVALID_ATTRIBUTE = 8002,
     SCHEMA_INVALID_ELEMENT = 8001,
     SPLIT_TWO_WAY_BINDING = 8007,
-    SUFFIX_NOT_SUPPORTED = 8105,
+    SUFFIX_NOT_SUPPORTED = 8106,
     SUGGEST_STRICT_TEMPLATES = 10001,
     SUGGEST_SUBOPTIMAL_TYPE_INFERENCE = 10002,
     // (undocumented)

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel b/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel
@@ -16,8 +16,8 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/missing_control_flow_directive",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/missing_ngforof_let",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/nullish_coalescing_not_nullable",
-        "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/text_attribute_not_binding",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported",
+        "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/text_attribute_not_binding",
         "@npm//typescript",
     ],
 )
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/checks/suffix_not_supported/index.ts
@@ -13,6 +13,8 @@ import {ErrorCode, ExtendedTemplateDiagnosticName} from '../../../../diagnostics
 import {NgTemplateDiagnostic} from '../../../api';
 import {TemplateCheckFactory, TemplateCheckWithVisitor, TemplateContext} from '../../api';
 
+const STYLE_SUFFIXES = ['px', '%', 'em'];
+
 /**
  * A check which detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute
  * binding. These suffixes are only available for style bindings.
@@ -25,14 +27,16 @@ class SuffixNotSupportedCheck extends TemplateCheckWithVisitor<ErrorCode.SUFFIX_
       node: TmplAstNode|AST): NgTemplateDiagnostic<ErrorCode.SUFFIX_NOT_SUPPORTED>[] {
     if (!(node instanceof TmplAstBoundAttribute)) return [];
 
-    if (!node.name.startsWith('attr.') ||
-        (!node.name.endsWith('.px') && !node.name.endsWith('.%') && !node.name.endsWith('.em'))) {
+    if (!node.keySpan.toString().startsWith('attr.') ||
+        !STYLE_SUFFIXES.some(suffix => node.name.endsWith(`.${suffix}`))) {
       return [];
     }
 
     const diagnostic = ctx.makeTemplateDiagnostic(
         node.keySpan,
-        'The `.px`, `.%`, `.em`, etc. suffixes are only supported on style bindings.');
+        `The ${
+            STYLE_SUFFIXES.map(suffix => `'.${suffix}'`)
+                .join(', ')} suffixes are only supported on style bindings.`);
     return [diagnostic];
   }
 }

diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/index.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/index.ts
@@ -13,8 +13,8 @@ import {factory as invalidBananaInBoxFactory} from './checks/invalid_banana_in_b
 import {factory as missingControlFlowDirectiveFactory} from './checks/missing_control_flow_directive';
 import {factory as missingNgForOfLetFactory} from './checks/missing_ngforof_let';
 import {factory as nullishCoalescingNotNullableFactory} from './checks/nullish_coalescing_not_nullable';
-import {factory as textAttributeNotBindingFactory} from './checks/text_attribute_not_binding';
 import {factory as suffixNotSupportedFactory} from './checks/suffix_not_supported';
+import {factory as textAttributeNotBindingFactory} from './checks/text_attribute_not_binding';
 
 export {ExtendedTemplateCheckerImpl} from './src/extended_template_checker';