From af2a7658b41791e673a6abe7b2e9d432719655d1 Mon Sep 17 00:00:00 2001
From: Shaun Hamilton <shauhami020@gmail.com>
Date: Thu, 10 Jun 2021 22:59:02 +0100
Subject: [PATCH] feat(client): remove whitespace from calculated values
 (#42400)

* feat(client?): remove whitespace for calculated values

* feat(client): remove whitespace from styledeclaration

* do not automatically strip

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: include all properties of CSSStyleDeclaration

* fix test for getPropVal

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
---
 client/src/utils/css-help.test.ts | 28 +++++++++++++++-------------
 client/src/utils/css-help.ts      | 17 ++++++++++++++---
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/client/src/utils/css-help.test.ts b/client/src/utils/css-help.test.ts
index 041b19de28..30f36ff91d 100644
--- a/client/src/utils/css-help.test.ts
+++ b/client/src/utils/css-help.test.ts
@@ -17,12 +17,17 @@ describe('css-help', () => {
     const conditionText = mediaRule.media[0];
     mediaRule.conditionText = conditionText;
   });
-  describe('getStyleDeclaration', () => {
-    it('should return a CSSStyleDeclartion array of length 1', () => {
-      expect(t.getStyleDeclarations('*')?.length).toEqual(1);
+  describe('getStyle', () => {
+    it('should return an ExtendedCSSStyleDeclartion object of length 1', () => {
+      expect(t.getStyle('*')?.length).toEqual(1);
     });
-    it('should return a non-empty CSSStyleDeclaration array', () => {
-      expect(t.getStyleDeclaration('.bb1')).toBeTruthy();
+    it('should return a non-empty ExtendedCSSStyleDeclaration object', () => {
+      expect(t.getStyle('.bb1')).toBeTruthy();
+    });
+    it('should return a whitespaceless string', () => {
+      expect(t.getStyle('.bb1d')?.getPropVal('background', true)).toEqual(
+        'linear-gradient(var(--building-color1)50%,var(--window-color1))'
+      );
     });
   });
   describe('isPropertyUsed', () => {
@@ -41,21 +46,18 @@ describe('css-help', () => {
   describe('getPropertyValue', () => {
     it('should return custom property value needing trim', () => {
       expect(
-        t
-          .getStyleDeclaration(':root')
-          ?.getPropertyValue('--building-color1')
-          .trim()
+        t.getStyle(':root')?.getPropertyValue('--building-color1')?.trim()
       ).toEqual('#aa80ff');
     });
     it('should return value to existing property', () => {
       expect(
-        t.getStyleDeclaration('.bb4a')?.getPropertyValue('background-color')
+        t.getStyle('.bb4a')?.getPropertyValue('background-color')
       ).toBeTruthy();
     });
     it('should return property value without evaluating result', () => {
-      expect(
-        t.getStyleDeclaration('.bb4a')?.getPropertyValue('background-color')
-      ).toEqual('var(--building-color4)');
+      expect(t.getStyle('.bb4a')?.getPropertyValue('background-color')).toEqual(
+        'var(--building-color4)'
+      );
     });
   });
   describe('getCSSRules', () => {
diff --git a/client/src/utils/css-help.ts b/client/src/utils/css-help.ts
index 251c447e53..0ddeaf2b0e 100644
--- a/client/src/utils/css-help.ts
+++ b/client/src/utils/css-help.ts
@@ -1,6 +1,9 @@
 export interface ExtendedStyleRule extends CSSStyleRule {
   isDeclaredAfter: (selector: string) => boolean;
 }
+interface ExtendedStyleDeclaration extends CSSStyleDeclaration {
+  getPropVal: (prop: string, strip?: boolean) => string;
+}
 
 const getIsDeclaredAfter = (styleRule: CSSStyleRule) => (selector: string) => {
   const cssStyleRules = Array.from(
@@ -36,9 +39,17 @@ class CSSHelp {
       ?.filter(ele => ele?.selectorText === selector)
       .map(x => x.style);
   }
-  getStyleDeclaration(selector: string): CSSStyleDeclaration | undefined {
-    return this._getStyleRules()?.find(ele => ele?.selectorText === selector)
-      ?.style;
+  getStyle(selector: string): ExtendedStyleDeclaration | null {
+    const style = this._getStyleRules().find(
+      ele => ele?.selectorText === selector
+    )?.style as ExtendedStyleDeclaration | undefined;
+    if (!style) return null;
+    style.getPropVal = (prop: string, strip = false) => {
+      return strip
+        ? style.getPropertyValue(prop).replace(/\s+/g, '')
+        : style.getPropertyValue(prop);
+    };
+    return style;
   }
   getStyleRule(selector: string): ExtendedStyleRule | null {
     const styleRule = this._getStyleRules()?.find(