Complex expression fix (#68)

* Fix for highly complex expressions. * add changeset
embellishing · Aug 16, 2024 · 1c5e06a · 1c5e06a
1 parent 1475160
commit 1c5e06a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/.changeset/friendly-snakes-study.md b/.changeset/friendly-snakes-study.md
@@ -0,0 +1,6 @@
+---
+"@embellish/react": patch
+"@embellish/core": patch
+---
+
+Fix for highly complex expressions not working properly in Chrome.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -266,23 +266,41 @@ export function createInlineConditions<
         condition: Condition<HookId>,
         valueIfTrue: string,
         valueIfFalse: string,
-      ): string {
+      ): [string, Record<string, string>] {
         if (typeof condition === "string") {
-          return `var(--${condition}-1, ${valueIfTrue}) var(--${condition}-0, ${valueIfFalse})`;
+          let valTrue = valueIfTrue,
+            valFalse = valueIfFalse;
+          const extraDecls: Record<string, string> = {};
+          if (valTrue.length > 32) {
+            const hash = createHash(valTrue);
+            extraDecls[`--${hash}`] = valTrue;
+            valTrue = `var(--${hash})`;
+          }
+          if (valFalse.length > 32) {
+            const hash = createHash(valFalse);
+            extraDecls[`--${hash}`] = valFalse;
+            valFalse = `var(--${hash})`;
+          }
+          return [
+            `var(--${condition}-1, ${valTrue}) var(--${condition}-0, ${valFalse})`,
+            extraDecls,
+          ];
         }
         if (condition.and) {
           const [head, ...tail] = condition.and;
           if (!head) {
-            return valueIfTrue;
+            return [valueIfTrue, {}];
           }
           if (tail.length === 0) {
             return buildExpression(head, valueIfTrue, valueIfFalse);
           }
-          return buildExpression(
-            head,
-            buildExpression({ and: tail }, valueIfTrue, valueIfFalse),
+          const [tailExpr, tailDecls] = buildExpression(
+            { and: tail },
+            valueIfTrue,
             valueIfFalse,
           );
+          const [expr, decls] = buildExpression(head, tailExpr, valueIfFalse);
+          return [expr, { ...decls, ...tailDecls }];
         }
         if (condition.or) {
           return buildExpression(

diff --git a/packages/react/src/component.js b/packages/react/src/component.js
@@ -168,11 +168,14 @@ export function createComponent({
             continue;
           }
           delete style[resolvedProperty];
-          style[resolvedProperty] = conditions.conditionalDeclarationValue(
-            stylePrefix,
-            condValue,
-            fallback,
-          );
+          let extraDecls;
+          [style[resolvedProperty], extraDecls] =
+            conditions.conditionalDeclarationValue(
+              stylePrefix,
+              condValue,
+              fallback,
+            );
+          Object.assign(style, extraDecls);
         }
       }