@contentful/experiences-core 1.34.0 → 1.34.1-beta.0

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export { isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isPatternComponent, isStructureWithRelativeHeight } from './utils/components.js';
 export { findOutermostCoordinates, getElementCoordinates } from './utils/domValues.js';
 export { doesMismatchMessageSchema, tryParseMessage, validateExperienceBuilderConfig } from './utils/validations.js';
-export { buildCfStyles, buildStyleTag, calculateNodeDefaultHeight, toCSSAttribute } from './utils/styleUtils/stylesUtils.js';
-export { detachExperienceStyles, flattenDesignTokenRegistry, indexByBreakpoint, isCfStyleAttribute, maybePopulateDesignTokenValue, resolveBackgroundImageBinding, toCSSString, toMediaQuery } from './utils/styleUtils/ssrStyles.js';
+export { addMinHeightForEmptyStructures, buildCfStyles, buildStyleTag, calculateNodeDefaultHeight, stringifyCssProperties, toCSSAttribute } from './utils/styleUtils/stylesUtils.js';
+export { detachExperienceStyles, flattenDesignTokenRegistry, indexByBreakpoint, isCfStyleAttribute, maybePopulateDesignTokenValue, resolveBackgroundImageBinding, toMediaQuery } from './utils/styleUtils/ssrStyles.js';
 export { transformBoundContentValue } from './utils/transformers/transformBoundContentValue.js';
 export { checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, generateRandomId, getDataFromTree, getInsertionData, getTargetValueInPixels, parseCSSValue } from './utils/utils.js';
 export { isExperienceEntry } from './utils/typeguards.js';

package/dist/index.js

@@ -380,45 +380,102 @@ const toCSSAttribute = (key) => {
     val = val.replace(/\d+$/, '');
     return val;
 };
-const buildStyleTag = ({ styles, nodeId }) => {
-    const stylesStr = Object.entries(styles)
+/**
+ * Turns a list of CSSProperties into a joined CSS string that can be
+ * used for <style> tags. Per default it creates a minimized version.
+ * For editor mode, use the `useWhitespaces` flag to create a more readable version.
+ *
+ * @param cssProperties list of CSS properties
+ * @param useWhitespaces adds whitespaces and newlines between each rule
+ * @returns a string of CSS rules
+ */
+const stringifyCssProperties = (cssProperties, useWhitespaces = false) => {
+    const rules = Object.entries(cssProperties)
         .filter(([, value]) => value !== undefined)
-        .reduce((acc, [key, value]) => `${acc}
-        ${toCSSAttribute(key)}: ${value};`, '');
-    const className = `cfstyles-${nodeId ? nodeId : md5(stylesStr)}`;
-    const styleRule = `.${className}{ ${stylesStr} }`;
+        .map(([key, value]) => useWhitespaces ? `${toCSSAttribute(key)}: ${value};` : `${toCSSAttribute(key)}:${value};`);
+    return rules.join(useWhitespaces ? '\n' : '');
+};
+const buildStyleTag = ({ styles, nodeId }) => {
+    const generatedStyles = stringifyCssProperties(styles, true);
+    const className = `cfstyles-${nodeId ? nodeId : md5(generatedStyles)}`;
+    const styleRule = `.${className}{ ${generatedStyles} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexReverse, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, cfVisibility, }) => {
-    return {
+/**
+ * Takes plain design values and transforms them into CSS properties. Undefined values will
+ * be filtered out.
+ *
+ * **Example Input**
+ * ```
+ * values = {
+ *   cfVisibility: 'visible',
+ *   cfMargin: '10px',
+ *   cfFlexReverse: true,
+ *   cfImageOptions: { objectFit: 'cover' },
+ *   // ...
+ * }
+ * ```
+ * **Example Output**
+ * ```
+ * cssProperties = {
+ *   margin: '10px',
+ *   flexDirection: 'row-reverse',
+ *   objectFit: 'cover',
+ *   // ...
+ * }
+ * ```
+ */
+const buildCfStyles = (values) => {
+    const cssProperties = {
         boxSizing: 'border-box',
-        ...transformVisibility(cfVisibility),
-        margin: cfMargin,
-        padding: cfPadding,
-        backgroundColor: cfBackgroundColor,
-        width: transformFill(cfWidth || cfImageOptions?.width),
-        height: transformFill(cfHeight || cfImageOptions?.height),
-        maxWidth: cfMaxWidth,
-        ...transformGridColumn(cfColumnSpan),
-        ...transformBorderStyle(cfBorder),
-        borderRadius: cfBorderRadius,
-        gap: cfGap,
-        ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
-        flexDirection: cfFlexReverse && cfFlexDirection ? `${cfFlexDirection}-reverse` : cfFlexDirection,
-        flexWrap: cfFlexWrap,
-        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
-        fontSize: cfFontSize,
-        fontWeight: cfTextBold ? 'bold' : cfFontWeight,
-        fontStyle: cfTextItalic ? 'italic' : undefined,
-        textDecoration: cfTextUnderline ? 'underline' : undefined,
-        lineHeight: cfLineHeight,
-        letterSpacing: cfLetterSpacing,
-        color: cfTextColor,
-        textAlign: cfTextAlign,
-        textTransform: cfTextTransform,
-        objectFit: cfImageOptions?.objectFit,
-        objectPosition: cfImageOptions?.objectPosition,
+        ...transformVisibility(values.cfVisibility),
+        margin: values.cfMargin,
+        padding: values.cfPadding,
+        backgroundColor: values.cfBackgroundColor,
+        width: transformFill(values.cfWidth || values.cfImageOptions?.width),
+        height: transformFill(values.cfHeight || values.cfImageOptions?.height),
+        maxWidth: values.cfMaxWidth,
+        ...transformGridColumn(values.cfColumnSpan),
+        ...transformBorderStyle(values.cfBorder),
+        borderRadius: values.cfBorderRadius,
+        gap: values.cfGap,
+        ...transformAlignment(values.cfHorizontalAlignment, values.cfVerticalAlignment, values.cfFlexDirection),
+        flexDirection: values.cfFlexReverse && values.cfFlexDirection
+            ? `${values.cfFlexDirection}-reverse`
+            : values.cfFlexDirection,
+        flexWrap: values.cfFlexWrap,
+        ...transformBackgroundImage(values.cfBackgroundImageUrl, values.cfBackgroundImageOptions),
+        fontSize: values.cfFontSize,
+        fontWeight: values.cfTextBold ? 'bold' : values.cfFontWeight,
+        fontStyle: values.cfTextItalic ? 'italic' : undefined,
+        textDecoration: values.cfTextUnderline ? 'underline' : undefined,
+        lineHeight: values.cfLineHeight,
+        letterSpacing: values.cfLetterSpacing,
+        color: values.cfTextColor,
+        textAlign: values.cfTextAlign,
+        textTransform: values.cfTextTransform,
+        objectFit: values.cfImageOptions?.objectFit,
+        objectPosition: values.cfImageOptions?.objectPosition,
     };
+    const cssPropertiesWithoutUndefined = Object.fromEntries(Object.entries(cssProperties).filter(([, value]) => value !== undefined));
+    return cssPropertiesWithoutUndefined;
+};
+/**
+ * **Only meant to be used in editor mode!**
+ *
+ * If the node is an empty structure component with a relative height (e.g. '100%'),
+ * it might render with a zero height. In this case, add a min height of 80px to ensure
+ * that child nodes can be added via drag & drop.
+ */
+const addMinHeightForEmptyStructures = (cssProperties, node) => {
+    if (!node.children.length &&
+        isStructureWithRelativeHeight(node.definitionId, cssProperties.height)) {
+        return {
+            ...cssProperties,
+            minHeight: EMPTY_CONTAINER_HEIGHT,
+        };
+    }
+    return cssProperties;
 };
 /**
  * Container/section default behavior:
@@ -1176,11 +1233,13 @@ const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema
 // https://contentful.atlassian.net/browse/LUMOS-523
 const PatternPropertyDefinitionSchema = z.object({
     defaultValue: z
-        .object({
-        path: z.string(),
-        type: z.literal('BoundValue'),
-        contentType: z.string(),
-    })
+        .record(z.string(), z.object({
+        sys: z.object({
+            type: z.literal('Link'),
+            id: z.string(),
+            linkType: z.enum(['Entry']),
+        }),
+    }))
         .optional(),
     contentTypes: z.record(z.string(), z.any()),
 });
@@ -1594,41 +1653,17 @@ const detachExperienceStyles = (experience) => {
     }
     const mapOfDesignVariableKeys = flattenDesignTokenRegistry(designTokensRegistry);
     // getting breakpoints from the entry componentTree field
-    /**
-     * breakpoints [
-        {
-          id: 'desktop',
-          query: '*',
-          displayName: 'All Sizes',
-          previewSize: '100%'
-        },
-        {
-          id: 'tablet',
-          query: '<992px',
-          displayName: 'Tablet',
-          previewSize: '820px'
-        },
-        {
-          id: 'mobile',
-          query: '<576px',
-          displayName: 'Mobile',
-          previewSize: '390px'
-        }
-      ]
-     */
     const { breakpoints } = experienceTreeRoot;
     // creating the structure which I thought would work best for aggregation
-    const mediaQueriesTemplate = breakpoints.reduce((mediaQueryTemplate, breakpoint) => {
-        return {
-            ...mediaQueryTemplate,
-            [breakpoint.id]: {
-                condition: breakpoint.query,
-                cssByClassName: {},
-            },
-        };
-    }, {});
+    const mediaQueryDataByBreakpoint = breakpoints.reduce((mediaQueryTemplate, breakpoint) => ({
+        ...mediaQueryTemplate,
+        [breakpoint.id]: {
+            condition: breakpoint.query,
+            cssByClassName: {},
+        },
+    }), {});
     // getting the breakpoint ids
-    const breakpointIds = Object.keys(mediaQueriesTemplate);
+    const breakpointIds = Object.keys(mediaQueryDataByBreakpoint);
     const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, patternNodeIdsChain = '', }) => {
         // traversing the tree
         const queue = [];
@@ -1654,29 +1689,6 @@ const detachExperienceStyles = (experience) => {
                 if (!patternEntry || !('fields' in patternEntry)) {
                     continue;
                 }
-                const defaultPatternDivStyles = Object.fromEntries(Object.entries(buildCfStyles({}))
-                    .filter(([, value]) => value !== undefined)
-                    .map(([key, value]) => [toCSSAttribute(key), value]));
-                // I create a hash of the object above because that would ensure hash stability
-                const styleHash = md5(JSON.stringify(defaultPatternDivStyles));
-                // and prefix the className to make sure the value can be processed
-                const className = `cf-${styleHash}`;
-                for (const breakpointId of breakpointIds) {
-                    if (!mediaQueriesTemplate[breakpointId].cssByClassName[className]) {
-                        mediaQueriesTemplate[breakpointId].cssByClassName[className] =
-                            toCSSString(defaultPatternDivStyles);
-                    }
-                }
-                // When iterating over instances of the same pattern, we will iterate over the identical
-                // pattern nodes again for every instance. Make sure to not overwrite the values from previous instances.
-                if (!currentNode.variables.cfSsrClassName) {
-                    currentNode.variables.cfSsrClassName = {
-                        type: 'DesignValue',
-                        valuesByBreakpoint: {
-                            [breakpointIds[0]]: className,
-                        },
-                    };
-                }
                 const nextComponentVariablesOverwrites = resolveComponentVariablesOverwrites({
                     patternNode: currentNode,
                     wrapperComponentVariablesOverwrites: componentVariablesOverwrites,
@@ -1704,36 +1716,15 @@ const detachExperienceStyles = (experience) => {
                 });
                 continue;
             }
-            /** Variables value is stored in `valuesByBreakpoint` object
-           * {
-              cfVerticalAlignment: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'center' } },
-              cfHorizontalAlignment: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'center' } },
-              cfMargin: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0 0 0 0' } },
-              cfPadding: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0 0 0 0' } },
-              cfBackgroundColor: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: 'rgba(246, 246, 246, 1)' }
-              },
-              cfWidth: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'fill' } },
-              cfHeight: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: 'fit-content' }
-              },
-              cfMaxWidth: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'none' } },
-              cfFlexDirection: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'column' } },
-              cfFlexWrap: { type: 'DesignValue', valuesByBreakpoint: { desktop: 'nowrap' } },
-              cfBorder: {
-                type: 'DesignValue',
-                valuesByBreakpoint: { desktop: '0px solid rgba(0, 0, 0, 0)' }
-              },
-              cfBorderRadius: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0px' } },
-              cfGap: { type: 'DesignValue', valuesByBreakpoint: { desktop: '0px 0px' } },
-              cfHyperlink: { type: 'UnboundValue', key: 'VNc49Qyepd6IzN7rmKUyS' },
-              cfOpenInNewTab: { type: 'UnboundValue', key: 'ZA5YqB2fmREQ4pTKqY5hX' },
-              cfBackgroundImageUrl: { type: 'UnboundValue', key: 'FeskH0WbYD5_RQVXX-1T8' },
-              cfBackgroundImageOptions: { type: 'DesignValue', valuesByBreakpoint: { desktop: [Object] } }
-            }
-           */
+            /* [Data format] `currentNode.variables` uses the following serialized shape:
+             * {
+             *   cfMargin: { type: 'DesignValue', valuesByBreakpoint: { desktop: '1px', tablet: '2px' } },
+             *   cfPadding: { type: 'DesignValue', valuesByBreakpoint: { desktop: '3px' } }
+             *   cfBackgroundImageUrl: { type: 'BoundValue', path: '/lUERH7tX7nJTaPX6f0udB/fields/assetReference/~locale/fields/file/~locale' }
+             *   asdf1234: { type: 'ComponentValue', key: 'qwer567' }
+             *   // ...
+             * }
+             */
             // so first, I convert it into a map to help me make it easier to access the values
             const propsByBreakpoint = indexByBreakpoint({
                 variables: currentNode.variables,
@@ -1746,30 +1737,18 @@ const detachExperienceStyles = (experience) => {
                     return experience.entityStore?.entities.find((entity) => entity.sys.id === id);
                 },
             });
-            /**
-           * propsByBreakpoint {
-              desktop: {
-                cfVerticalAlignment: 'center',
-                cfHorizontalAlignment: 'center',
-                cfMargin: '0 0 0 0',
-                cfPadding: '0 0 0 0',
-                cfBackgroundColor: 'rgba(246, 246, 246, 1)',
-                cfWidth: 'fill',
-                cfHeight: 'fit-content',
-                cfMaxWidth: 'none',
-                cfFlexDirection: 'column',
-                cfFlexWrap: 'nowrap',
-                cfBorder: '0px solid rgba(0, 0, 0, 0)',
-                cfBorderRadius: '0px',
-                cfGap: '0px 0px',
-                cfBackgroundImageOptions: { scaling: 'fill', alignment: 'left top', targetSize: '2000px' }
-              },
-              tablet: {},
-              mobile: {}
-            }
-           */
+            /* [Data format] `propsByBreakpoint` is a map of "breakpointId > propertyName > plainValue":
+             * {
+             *   desktop: {
+             *     cfMargin: '1px',
+             *     cfWidth: 'fill',
+             *     cfBackgroundImageUrl: 'https://example.com/image.jpg'
+             *     //...
+             *   }
+             * }
+             */
             const currentNodeClassNames = [];
-            // then for each breakpoint
+            // For each breakpoint, resolve design tokens, create the CSS and generate a unique className.
             for (const breakpointId of breakpointIds) {
                 const propsByBreakpointWithResolvedDesignTokens = Object.entries(propsByBreakpoint[breakpointId]).reduce((acc, [variableName, variableValue]) => {
                     return {
@@ -1777,36 +1756,24 @@ const detachExperienceStyles = (experience) => {
                         [variableName]: maybePopulateDesignTokenValue(variableName, variableValue, mapOfDesignVariableKeys),
                     };
                 }, {});
-                // We convert cryptic prop keys to css variables
-                // Eg: cfMargin to margin
-                const stylesForBreakpoint = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);
-                const stylesForBreakpointWithoutUndefined = Object.fromEntries(Object.entries(stylesForBreakpoint)
-                    .filter(([, value]) => value !== undefined)
-                    .map(([key, value]) => [toCSSAttribute(key), value]));
-                /**
-               * stylesForBreakpoint {
-                  margin: '0 0 0 0',
-                  padding: '0 0 0 0',
-                  'background-color': 'rgba(246, 246, 246, 1)',
-                  width: '100%',
-                  height: 'fit-content',
-                  'max-width': 'none',
-                  border: '0px solid rgba(0, 0, 0, 0)',
-                  'border-radius': '0px',
-                  gap: '0px 0px',
-                  'align-items': 'center',
-                  'justify-content': 'safe center',
-                  'flex-direction': 'column',
-                  'flex-wrap': 'nowrap',
-                  'font-style': 'normal',
-                  'text-decoration': 'none',
-                  'box-sizing': 'border-box'
-                }
-               */
+                // Convert CF-specific property names to CSS variables, e.g. `cfMargin` -> `margin`
+                const cfStyles = buildCfStyles(propsByBreakpointWithResolvedDesignTokens);
+                /* [Data format] `cfStyles` is a list of CSSProperties (React format):
+                 * {
+                 *   margin: '1px',
+                 *   width: '100%',
+                 *   backgroundImage: 'url(https://example.com/image.jpg)'
+                 *   //...
+                 * }
+                 */
+                const generatedCss = stringifyCssProperties(cfStyles);
+                /* [Data format] `generatedCss` is the minimized CSS string that will be added to the DOM:
+                 * generatedCss = "margin: 1px;width: 100%;..."
+                 */
                 // I create a hash of the object above because that would ensure hash stability
                 // Adding breakpointId to ensure not using the same IDs between breakpoints as this leads to
                 // conflicts between different breakpoint values from multiple nodes where the hash would be equal
-                const styleHash = md5(breakpointId + JSON.stringify(stylesForBreakpointWithoutUndefined));
+                const styleHash = md5(breakpointId + generatedCss);
                 // and prefix the className to make sure the value can be processed
                 const className = `cf-${styleHash}`;
                 // I save the generated hashes into an array to later save it in the tree node
@@ -1816,11 +1783,11 @@ const detachExperienceStyles = (experience) => {
                     currentNodeClassNames.push(className);
                 }
                 // if there is already the similar hash - no need to over-write it
-                if (mediaQueriesTemplate[breakpointId].cssByClassName[className]) {
+                if (mediaQueryDataByBreakpoint[breakpointId].cssByClassName[className]) {
                     continue;
                 }
                 // otherwise, save it to the stylesheet
-                mediaQueriesTemplate[breakpointId].cssByClassName[className] = toCSSString(stylesForBreakpointWithoutUndefined);
+                mediaQueryDataByBreakpoint[breakpointId].cssByClassName[className] = generatedCss;
             }
             // all generated classNames are saved in the tree node
             // to be handled by the sdk later
@@ -1864,10 +1831,8 @@ const detachExperienceStyles = (experience) => {
     });
     // once the whole tree was traversed, for each breakpoint, I aggregate the styles
     // for each generated className into one css string
-    const styleSheet = Object.entries(mediaQueriesTemplate).reduce((acc, [, breakpointPayload]) => {
-        return `${acc}${toMediaQuery(breakpointPayload)}`;
-    }, '');
-    return styleSheet;
+    const stylesheet = Object.entries(mediaQueryDataByBreakpoint).reduce((acc, [, mediaQueryData]) => `${acc}${toMediaQuery(mediaQueryData)}`, '');
+    return stylesheet;
 };
 /**
  * Rendering pattern nodes inside pattern entry by injecting default values from the top:
@@ -2042,6 +2007,41 @@ const resolveBackgroundImageBinding = ({ variableData, getBoundEntityById, dataS
         }
     }
 };
+/**
+ * Takes the initial set of properties, filters only design properties that will be mapped to CSS and
+ * re-organizes them to be indexed by breakpoint ID ("breakpoint > variable > value"). It will
+ * also resolve the design/ component values to plain values.
+ *
+ * **Example Input**
+ * ```
+ * variables = {
+ *   cfMargin: { type: 'DesignValue', valuesByBreakpoint: { desktop: '1px', tablet: '2px' } },
+ *   cfPadding: { type: 'DesignValue', valuesByBreakpoint: { desktop: '3px', mobile: '4px' } }
+ * }
+ * ```
+ *
+ * **Example Output**
+ * ```
+ * variableValuesByBreakpoints = {
+ *   desktop: {
+ *     cfMargin: '1px',
+ *     cfPadding: '3px'
+ *   },
+ *   tablet: {
+ *     cfMargin: '2px'
+ *   },
+ *   mobile: {
+ *    cfPadding: '4px'
+ *   }
+ * }
+ * ```
+ *
+ * **Note**
+ * - The property cfBackgroundImageUrl is the only content property that gets mapped to CSS as well.
+ *   It will be solely stored on the default breakpoint.
+ * - For ComponentValues, it will either take the override from the pattern instance or fallback to
+ *   the defaultValue defined in variableDefinitions.
+ */
 const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unboundValues = {}, dataSource = {}, componentVariablesOverwrites, componentSettings = { variableDefinitions: {} }, }) => {
     const variableValuesByBreakpoints = breakpointIds.reduce((acc, breakpointId) => {
         return {
@@ -2052,9 +2052,10 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
     const defaultBreakpoint = breakpointIds[0];
     for (const [variableName, variableData] of Object.entries(variables)) {
         // handling the special case - cfBackgroundImageUrl variable, which can be bound or unbound
-        // so, we need to resolve it here and pass it down as a css property to be convereted into the CSS
+        // so, we need to resolve it here and pass it down as a css property to be converted into the CSS
         // I used .startsWith() cause it can be part of a pattern node
         if (variableName === 'cfBackgroundImageUrl' ||
+            // TODO: Test this for nested patterns as the name might be just a random hash without the actual name (needs to be validated).
             variableName.startsWith('cfBackgroundImageUrl_')) {
             const imageUrl = resolveBackgroundImageBinding({
                 variableData,
@@ -2095,17 +2096,9 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
 };
 /**
  * Flattens the object from
- * {
- *   color: {
- *      [key]: [value]
- *   }
- * }
- *
+ * `{ color: { [key]: [value] } }`
  * to
- *
- * {
- *  'color.key': [value]
- * }
+ * `{ 'color.key': [value] }`
  */
 const flattenDesignTokenRegistry = (designTokenRegistry) => {
     return Object.entries(designTokenRegistry).reduce((acc, [categoryName, tokenCategory]) => {
@@ -2121,24 +2114,21 @@ const flattenDesignTokenRegistry = (designTokenRegistry) => {
         };
     }, {});
 };
-// Replaces camelCase with kebab-case
-// converts the <key, value> object into a css string
-const toCSSString = (breakpointStyles) => {
-    return Object.entries(breakpointStyles)
-        .map(([key, value]) => `${key}:${value};`)
-        .join('');
-};
-const toMediaQuery = (breakpointPayload) => {
-    const mediaQueryStyles = Object.entries(breakpointPayload.cssByClassName).reduce((acc, [className, css]) => {
+/**
+ * Create a single CSS string containing all class definitions for a given media query.
+ *
+ * @param condition e.g. "*", "<520px", ">520px"
+ * @param cssByClassName map of class names to CSS strings containing all rules for each class
+ * @returns joined string of all CSS class definitions wrapped into media queries
+ */
+const toMediaQuery = ({ condition, cssByClassName }) => {
+    const mediaQueryStyles = Object.entries(cssByClassName).reduce((acc, [className, css]) => {
         return `${acc}.${className}{${css}}`;
     }, ``);
-    if (breakpointPayload.condition === '*') {
+    if (condition === '*') {
         return mediaQueryStyles;
     }
-    const [evaluation, pixelValue] = [
-        breakpointPayload.condition[0],
-        breakpointPayload.condition.substring(1),
-    ];
+    const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
     const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
     return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
 };
@@ -3917,5 +3907,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, isEditorMod
     }
 }
 
-export { DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, dividerBuiltInStyles, doesMismatchMessageSchema, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, toCSSAttribute, toCSSString, toMediaQuery, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
+export { DeepReference, EditorModeEntityStore, EntityStore, EntityStoreBase, MEDIA_QUERY_REGEXP, VisualEditorMode, addLocale, addMinHeightForEmptyStructures, breakpointsRegistry, buildCfStyles, buildStyleTag, buildTemplate, builtInStyles, calculateNodeDefaultHeight, checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, columnsBuiltInStyles, containerBuiltInStyles, createExperience, defineBreakpoints, defineDesignTokens, designTokensRegistry, detachExperienceStyles, dividerBuiltInStyles, doesMismatchMessageSchema, fetchAllAssets, fetchAllEntries, fetchById, fetchBySlug, findOutermostCoordinates, flattenDesignTokenRegistry, gatherDeepReferencesFromExperienceEntry, gatherDeepReferencesFromTree, generateRandomId, getActiveBreakpointIndex, getBreakpointRegistration, getDataFromTree, getDesignTokenRegistration, getElementCoordinates, getFallbackBreakpointIndex, getInsertionData, getTargetValueInPixels, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, parseCSSValue, parseDataSourcePathIntoFieldset, parseDataSourcePathWithL1DeepBindings, resetBreakpointsRegistry, resetDesignTokenRegistry, resolveBackgroundImageBinding, resolveHyperlinkPattern, runBreakpointsValidation, sanitizeNodeProps, sectionBuiltInStyles, sendMessage, singleColumnBuiltInStyles, stringifyCssProperties, toCSSAttribute, toMediaQuery, transformBoundContentValue, tryParseMessage, validateExperienceBuilderConfig };
 //# sourceMappingURL=index.js.map