fix: handle invalid or unknown properties (#4151)

Fixes the issue with non existent "before" and "after"
https://discord.com/channels/955905230107738152/1286696101076009031/1286696101076009031

Author: TrySound

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({

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;