From e560cb1374c0f3fa54a5b51b04b5073618603bcb Mon Sep 17 00:00:00 2001
From: Dimitris-Rafail Katsampas <katsampasdr@gmail.com>
Date: Wed, 22 Mar 2023 17:13:35 +0200
Subject: [PATCH] fix(core): improved handling for unsupported '!important' css
 rule (#10243)

---
 packages/core/ui/styling/css-animation-parser.d.ts |  9 ---------
 packages/core/ui/styling/css-animation-parser.ts   |  2 ++
 packages/core/ui/styling/css-utils.ts              | 12 ++++++++++++
 packages/core/ui/styling/style-scope.ts            |  5 +++--
 4 files changed, 17 insertions(+), 11 deletions(-)
 delete mode 100644 packages/core/ui/styling/css-animation-parser.d.ts
 create mode 100644 packages/core/ui/styling/css-utils.ts

diff --git a/packages/core/ui/styling/css-animation-parser.d.ts b/packages/core/ui/styling/css-animation-parser.d.ts
deleted file mode 100644
index 1d6a83557..000000000
--- a/packages/core/ui/styling/css-animation-parser.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, UnparsedKeyframe } from '../animation/keyframe-animation';
-
-export class CssAnimationParser {
-	public static keyframeAnimationsFromCSSDeclarations(declarations: KeyframeDeclaration[]): KeyframeAnimationInfo[];
-
-	public static keyframesArrayFromCSS(keyframes: UnparsedKeyframe[]): KeyframeInfo[];
-}
-
-export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[];
diff --git a/packages/core/ui/styling/css-animation-parser.ts b/packages/core/ui/styling/css-animation-parser.ts
index 6e540171e..30c3d4004 100644
--- a/packages/core/ui/styling/css-animation-parser.ts
+++ b/packages/core/ui/styling/css-animation-parser.ts
@@ -4,6 +4,7 @@ import { KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, UnparsedKeyfr
 import { timeConverter, animationTimingFunctionConverter } from '../styling/converters';
 
 import { transformConverter } from '../styling/style-properties';
+import { cleanupImportantFlags } from './css-utils';
 
 const ANIMATION_PROPERTY_HANDLERS = Object.freeze({
 	'animation-name': (info: any, value: any) => (info.name = value),
@@ -125,6 +126,7 @@ function keyframeAnimationsFromCSSProperty(value: any, animations: KeyframeAnima
 export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[] {
 	const declarations = unparsedKeyframeDeclarations.reduce((declarations, { property: unparsedProperty, value: unparsedValue }) => {
 		const property = CssAnimationProperty._getByCssName(unparsedProperty);
+		unparsedValue = cleanupImportantFlags(unparsedValue, property?.cssLocalName);
 
 		if (typeof unparsedProperty === 'string' && property && property._valueConverter) {
 			declarations[property.name] = property._valueConverter(<string>unparsedValue);
diff --git a/packages/core/ui/styling/css-utils.ts b/packages/core/ui/styling/css-utils.ts
new file mode 100644
index 000000000..4d61b2a62
--- /dev/null
+++ b/packages/core/ui/styling/css-utils.ts
@@ -0,0 +1,12 @@
+import { Trace } from '../../trace';
+
+export function cleanupImportantFlags(value: string, propertyName: string) {
+	const index = value?.indexOf('!important');
+	if (index >= 0) {
+		if (Trace.isEnabled()) {
+			Trace.write(`The !important css rule is currently not supported. Property: ${propertyName}`, Trace.categories.Style, Trace.messageType.warn);
+		}
+		return value.substring(0, index).trim();
+	}
+	return value;
+}
diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts
index a7a5dd7ce..412e183f2 100644
--- a/packages/core/ui/styling/style-scope.ts
+++ b/packages/core/ui/styling/style-scope.ts
@@ -21,6 +21,7 @@ function ensureKeyframeAnimationModule() {
 import * as capm from './css-animation-parser';
 import { sanitizeModuleName } from '../builder/module-name-sanitizer';
 import { resolveModuleName } from '../../module-name-resolver';
+import { cleanupImportantFlags } from './css-utils';
 
 let cssAnimationParserModule: typeof capm;
 function ensureCssAnimationParserModule() {
@@ -563,7 +564,6 @@ export class CssState {
 		const view = this.viewRef.get();
 		if (!view) {
 			Trace.write(`${matchingSelectors} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-
 			return;
 		}
 
@@ -579,7 +579,8 @@ export class CssState {
 		const replacementFunc = (g) => g[1].toUpperCase();
 
 		for (const property in newPropertyValues) {
-			const value = newPropertyValues[property];
+			const value = cleanupImportantFlags(newPropertyValues[property], property);
+
 			const isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value);
 
 			if (isCssExp) {