From 100fd98b40bf813bac3434f5ad04ffe74fbde124 Mon Sep 17 00:00:00 2001
From: Thomas Kellermeier <thomas.kellermeier@contentful.com>
Date: Tue, 10 Sep 2024 15:03:30 +0200
Subject: [PATCH] fix: only fallback for not defined breakpoint values

---
 packages/core/src/utils/breakpoints.ts                  | 9 +++++++--
 packages/core/src/utils/styleUtils/styleTransformers.ts | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/utils/breakpoints.ts b/packages/core/src/utils/breakpoints.ts
index d20c7d4d8..fdf6f5839 100644
--- a/packages/core/src/utils/breakpoints.ts
+++ b/packages/core/src/utils/breakpoints.ts
@@ -91,6 +91,10 @@ const builtInStylesWithDesignTokens = [
   'cfMaxWidth',
 ];
 
+const isValidBreakpointValue = (value: PrimitiveValue) => {
+  return value !== undefined && value !== null && value !== '';
+};
+
 export const getValueForBreakpoint = (
   valuesByBreakpoint: ValuesByBreakpoint,
   breakpoints: Breakpoint[],
@@ -110,7 +114,7 @@ export const getValueForBreakpoint = (
     // Assume that the values are sorted by media query to apply the cascading CSS logic
     for (let index = activeBreakpointIndex; index >= 0; index--) {
       const breakpointId = breakpoints[index]?.id;
-      if (valuesByBreakpoint[breakpointId]) {
+      if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
         // If the value is defined, we use it and stop the breakpoints cascade
         return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
       }
@@ -118,11 +122,12 @@ export const getValueForBreakpoint = (
     // If no breakpoint matched, we search and apply the fallback breakpoint
     const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
     const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
-    if (valuesByBreakpoint[fallbackBreakpointId]) {
+    if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
       return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
     }
   } else {
     // Old design properties did not support breakpoints, keep for backward compatibility
     return valuesByBreakpoint;
   }
+  return undefined;
 };
diff --git a/packages/core/src/utils/styleUtils/styleTransformers.ts b/packages/core/src/utils/styleUtils/styleTransformers.ts
index 83cc7a9e9..0a63c4f6b 100644
--- a/packages/core/src/utils/styleUtils/styleTransformers.ts
+++ b/packages/core/src/utils/styleUtils/styleTransformers.ts
@@ -16,7 +16,7 @@ export const transformVisibility = (value?: boolean): CSSProperties => {
   return {};
 };
 
-// Keep this for backwards compatilibity - deleting this would be a breaking change
+// Keep this for backwards compatibility - deleting this would be a breaking change
 // because existing components on a users experience will have the width value as fill
 // rather than 100%
 export const transformFill = (value?: string) => (value === 'fill' ? '100%' : value);