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

…te bindings
angular · Jul 6, 2022 · 2e46adf · 2e46adf
1 parent aa27db6
commit 2e46adf
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel b/packages/compiler-cli/src/ngtsc/typecheck/extended/BUILD.bazel
@@ -15,8 +15,8 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/invalid_banana_in_box",
         "//packages/compiler-cli/src/ngtsc/typecheck/extended/checks/missing_control_flow_directive",
         "//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.
@@ -26,13 +28,15 @@ class SuffixNotSupportedCheck extends TemplateCheckWithVisitor<ErrorCode.SUFFIX_
     if (!(node instanceof TmplAstBoundAttribute)) return [];
 
     if (!node.name.startsWith('attr.') ||
-        (!node.name.endsWith('.px') && !node.name.endsWith('.%') && !node.name.endsWith('.em'))) {
+        !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
@@ -12,8 +12,8 @@ import {TemplateCheckFactory} from './api';
 import {factory as invalidBananaInBoxFactory} from './checks/invalid_banana_in_box';
 import {factory as missingControlFlowDirectiveFactory} from './checks/missing_control_flow_directive';
 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';