refactor(compiler): Drop !important when parsing host style/class bindings (angular#51950)

dylhunn · alxhub · commit 04436cfd602f · 2023-10-04T09:00:54.000-07:00
For components, the parser already extracts the `important` property (and it is later disregarded). However, because host bindings use a totally separate parsing code path, this was never happing for host bindings. Here, we add some code to the host style parsing phase to drop the `!important` suffix. We could solve this category of problems for good by parsing host bindings with the same code as template bindings. PR Close angular#51950
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/host_bindings/TEST_CASES.json
@@ -34,7 +34,6 @@
       "inputFiles": [
         "important.ts"
       ],
-      "skipForTemplatePipeline": true,
       "expectations": [
         {
           "failureMessage": "Incorrect template",
diff --git a/packages/compiler/src/template/pipeline/ir/src/ops/update.ts b/packages/compiler/src/template/pipeline/ir/src/ops/update.ts
@@ -114,7 +114,7 @@ export interface BindingOp extends Op<UpdateOp> {
   securityContext: SecurityContext;
 
   /**
-   * Whether the binding is a TextAttribute (e.g. `some-attr="some-value"`). This needs ot be
+   * Whether the binding is a TextAttribute (e.g. `some-attr="some-value"`). This needs to be
    * tracked for compatiblity with `TemplateDefinitionBuilder` which treats `style` and `class`
    * TextAttributes differently from `[attr.style]` and `[attr.class]`.
    */
diff --git a/packages/compiler/src/template/pipeline/src/phases/host_style_property_parsing.ts b/packages/compiler/src/template/pipeline/src/phases/host_style_property_parsing.ts
@@ -16,13 +16,19 @@ const CLASS_DOT = 'class.';
 
 const STYLE_BANG = 'style!';
 const CLASS_BANG = 'class!';
+const BANG_IMPORTANT = '!important';
 
 export function phaseHostStylePropertyParsing(job: CompilationJob): void {
   for (const op of job.root.update) {
     if (op.kind !== ir.OpKind.Binding) {
       continue;
     }
 
+    if (op.name.endsWith(BANG_IMPORTANT)) {
+      // Delete any `!important` suffixes from the binding name.
+      op.name = op.name.substring(0, op.name.length - BANG_IMPORTANT.length);
+    }
+
     if (op.name.startsWith(STYLE_DOT)) {
       op.bindingKind = ir.BindingKind.StyleProperty;
       op.name = op.name.substring(STYLE_DOT.length);

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,6 @@`
`34`	`34`	`"inputFiles": [`
`35`	`35`	`"important.ts"`
`36`	`36`	`],`
`37`		`- "skipForTemplatePipeline": true,`
`38`	`37`	`"expectations": [`
`39`	`38`	`{`
`40`	`39`	`"failureMessage": "Incorrect template",`