From d48149fd60bbe829e5fe7c63cf137e7bd1d70cd9 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 23 Sep 2024 17:15:31 +0200
Subject: [PATCH] fix: handle invalid or unknown properties (#4151)

Fixes the issue with non existent "before" and "after"
https://discord.com/channels/955905230107738152/1286696101076009031/1286696101076009031
---
 .../app/shared/style-object-model.test.tsx    | 26 +++++++++++++++++++
 apps/builder/app/shared/style-object-model.ts |  7 ++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/shared/style-object-model.test.tsx b/apps/builder/app/shared/style-object-model.test.tsx
index c2c8ff22c7..256c2527ab 100644
--- a/apps/builder/app/shared/style-object-model.test.tsx
+++ b/apps/builder/app/shared/style-object-model.test.tsx
@@ -843,6 +843,32 @@ test("fallback cascaded value to inherited computed value", () => {
   ).toEqual({ type: "keyword", value: "currentColor" });
 });
 
+test("work with unknown or invalid properties", () => {
+  const model = createModel({
+    css: `
+      bodyLocal {
+        unknown-property: [object Object];
+      }
+    `,
+    jsx: <$.Body ws:id="body" class="bodyLocal"></$.Body>,
+  });
+  const instanceSelector = ["body"];
+  expect(
+    getComputedStyleDecl({
+      model,
+      instanceSelector,
+      property: "unknownProperty",
+    }).usedValue
+  ).toEqual({ type: "unparsed", value: "[object Object]" });
+  expect(
+    getComputedStyleDecl({
+      model,
+      instanceSelector,
+      property: "undefinedProperty",
+    }).usedValue
+  ).toEqual({ type: "invalid", value: "" });
+});
+
 describe("selected style", () => {
   test("access selected style source value within cascade", () => {
     const model = createModel({
diff --git a/apps/builder/app/shared/style-object-model.ts b/apps/builder/app/shared/style-object-model.ts
index 37fe844300..2e3073db4f 100644
--- a/apps/builder/app/shared/style-object-model.ts
+++ b/apps/builder/app/shared/style-object-model.ts
@@ -236,6 +236,11 @@ const customPropertyData = {
   initial: guaranteedInvalidValue,
 };
 
+const invalidPropertyData = {
+  inherited: false,
+  initial: invalidValue,
+};
+
 export type ComputedStyleDecl = {
   property: string;
   source: StyleValueSource;
@@ -269,7 +274,7 @@ export const getComputedStyleDecl = ({
   const isCustomProperty = property.startsWith("--");
   const propertyData = isCustomProperty
     ? customPropertyData
-    : properties[property as keyof typeof properties];
+    : (properties[property as keyof typeof properties] ?? invalidPropertyData);
   const inherited = propertyData.inherited;
   const initialValue: StyleValue = propertyData.initial;
   let computedValue: StyleValue = initialValue;