fix(common): cleanup the StylingDiffer and related code (#34307)

Since I was learning the codebase and had a hard time understanding what was going on I've done a
bunch of changes in one commit that under normal circumstances should have been split into several
commits. Because this code is likely going to be overwritten with Misko's changes I'm not going to
spend the time with trying to split this up.

Overall I've done the following:
- I processed review feedback from #34307
- I did a bunch of renaming to make the code easier to understand
- I refactored some internal functions that were either inefficient or hard to read
- I also updated lots of type signatures to correct them and to remove many casts in the code

PR Close #34307

packages/common/test/directives/ng_class_spec.ts

@@ -196,7 +196,7 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing';
         fixture = createTestComponent(`<div [ngClass]="['foo', {}]"></div>`);
         expect(() => fixture !.detectChanges())
             .toThrowError(
-                /NgClass can only toggle CSS classes expressed as strings, got \[object Object\]/);
+                /NgClass can only toggle CSS classes expressed as strings, got: \[object Object\]/);
       });
     });
 
@@ -353,17 +353,23 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing';
          }));
     });
 
-    describe('non-regression', () => {
+    describe('prevent regressions', () => {
 
       // https://github.com/angular/angular/issues/34336
-      it('should not write to native node when a bound expression doesnt change', () => {
-        fixture = createTestComponent(`<div [ngClass]="{'color-red': true}"></div>`);
+      it('should not write to the native node unless the bound expression has changed', () => {
+        fixture = createTestComponent(`<div [ngClass]="{'color-red': condition}"></div>`);
         detectChangesAndExpectClassName('color-red');
 
-        // Overwrite CSS classes to make sure that ngClass is not doing any DOM manipulation (as
-        // there was no change to the expression bound to [ngClass]).
+        // Overwrite CSS classes so that we can check if ngClass performed DOM manipulation to
+        // update it
         fixture.debugElement.children[0].nativeElement.className = '';
+        // Assert that the DOM node still has the same value after change detection
         detectChangesAndExpectClassName('');
+
+        fixture.componentInstance.condition = false;
+        fixture.detectChanges();
+        fixture.componentInstance.condition = true;
+        detectChangesAndExpectClassName('color-red');
       });
 
     });