From 7f2d51e7d00884a1abd8a3995cef96f546661150 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Thu, 4 Jul 2024 10:33:45 -0700
Subject: [PATCH] revert: "perf: improve attribute selectors by adding single
 listeners (#10384)"

---
 packages/core/css/system-classes.ts      |  1 -
 packages/core/ui/styling/css-selector.ts |  4 ----
 packages/core/ui/styling/style-scope.ts  | 21 +++++++--------------
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/core/css/system-classes.ts b/packages/core/css/system-classes.ts
index a40e6a660..3c1edadcb 100644
--- a/packages/core/css/system-classes.ts
+++ b/packages/core/css/system-classes.ts
@@ -6,7 +6,6 @@ export namespace CSSUtils {
 	export const CLASS_PREFIX = 'ns-';
 	export const MODAL_ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${MODAL}`;
 	export const ROOT_VIEW_CSS_CLASS = `${CLASS_PREFIX}${ROOT}`;
-	export const IgnoredCssDynamicAttributeTracking = new Set<string>();
 
 	export function getSystemCssClasses(): string[] {
 		return cssClasses;
diff --git a/packages/core/ui/styling/css-selector.ts b/packages/core/ui/styling/css-selector.ts
index 227dd4d5e..40c4d5ffb 100644
--- a/packages/core/ui/styling/css-selector.ts
+++ b/packages/core/ui/styling/css-selector.ts
@@ -5,7 +5,6 @@ import { Trace } from '../../trace';
 import { isNullOrUndefined } from '../../utils/types';
 
 import * as ReworkCSS from '../../css';
-import { CSSUtils } from '../../css/system-classes';
 import { checkIfMediaQueryMatches } from '../../media-query-list';
 
 export const MEDIA_QUERY_SEPARATOR = '&&';
@@ -1125,9 +1124,6 @@ export class SelectorsMatch<T extends Node> implements ChangeAccumulator {
 	public selectors: SelectorCore[];
 
 	public addAttribute(node: T, attribute: string): void {
-		if (CSSUtils.IgnoredCssDynamicAttributeTracking.has(attribute)) {
-			return;
-		}
 		const deps: Changes = this.properties(node);
 		if (!deps.attributes) {
 			deps.attributes = new Set();
diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts
index cf2daf1b3..e8dcd5ed8 100644
--- a/packages/core/ui/styling/style-scope.ts
+++ b/packages/core/ui/styling/style-scope.ts
@@ -21,7 +21,6 @@ import * as capm from './css-animation-parser';
 import { sanitizeModuleName } from '../../utils/common';
 import { resolveModuleName } from '../../module-name-resolver';
 import { cleanupImportantFlags } from './css-utils';
-import { Observable, PropertyChangeData } from '../../data/observable';
 
 let cssAnimationParserModule: typeof capm;
 function ensureCssAnimationParserModule() {
@@ -550,8 +549,6 @@ export class CssState {
 	_matchInvalid: boolean;
 	_playsKeyframeAnimations: boolean;
 
-	private _dynamicUpdateListenerMap: Map<ViewBase, (t: any) => void> = new Map();
-
 	constructor(private viewRef: WeakRef<ViewBase>) {
 		this._onDynamicStateChangeHandler = () => this.updateDynamicState();
 	}
@@ -786,14 +783,9 @@ export class CssState {
 		const changeMap = this._match.changeMap;
 		changeMap.forEach((changes, view) => {
 			if (changes.attributes) {
-				const attributes = changes.attributes;
-				const listener = (args: PropertyChangeData) => {
-					if (attributes.has(args.propertyName)) {
-						this._onDynamicStateChangeHandler();
-					}
-				};
-				this._dynamicUpdateListenerMap.set(view, listener);
-				view.addEventListener(Observable.propertyChangeEvent, listener);
+				changes.attributes.forEach((attribute) => {
+					view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
+				});
 			}
 			if (changes.pseudoClasses) {
 				changes.pseudoClasses.forEach((pseudoClass) => {
@@ -810,8 +802,10 @@ export class CssState {
 
 	private unsubscribeFromDynamicUpdates(): void {
 		this._appliedChangeMap.forEach((changes, view) => {
-			if (this._dynamicUpdateListenerMap.has(view)) {
-				view.removeEventListener(Observable.propertyChangeEvent, this._dynamicUpdateListenerMap.get(view));
+			if (changes.attributes) {
+				changes.attributes.forEach((attribute) => {
+					view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
+				});
 			}
 			if (changes.pseudoClasses) {
 				changes.pseudoClasses.forEach((pseudoClass) => {
@@ -823,7 +817,6 @@ export class CssState {
 				});
 			}
 		});
-		this._dynamicUpdateListenerMap.clear();
 		this._appliedChangeMap = CssState.emptyChangeMap;
 	}