fix: only fallback for not defined breakpoint values

contentful · Sep 10, 2024 · 100fd98 · 100fd98
1 parent d53a8d2
commit 100fd98
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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,19 +114,20 @@ 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]);
       }
     }
     // 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
@@ -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);