@contentful/experiences-core 1.11.2-dev-20240730T1241-81b30e6.0 → 1.11.2-dev-20240731T1935-8ed41a3.0

package/dist/index.js

@@ -1448,7 +1448,7 @@ const detachExperienceStyles = (experience) => {
     }, {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueriesTemplate);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, }) => {
         // traversing the tree
         const queue = [];
         queue.push(...componentTree.children);
@@ -1503,6 +1503,8 @@ const detachExperienceStyles = (experience) => {
                     // and this is where the over-writes for the default values are stored
                     // yes, I know, it's a bit confusing
                     componentVariablesOverwrites: currentNode.variables,
+                    // pass top-level pattern node to store instance-specific child styles for rendering
+                    patternWrapper: currentNode,
                 });
                 continue;
             }
@@ -1630,12 +1632,29 @@ const detachExperienceStyles = (experience) => {
             // className3 will win over className2 and className1
             // making sure that we respect the order of breakpoints from
             // we can achieve "desktop first" or "mobile first" approach to style over-writes
-            currentNode.variables.cfSsrClassName = {
-                type: 'DesignValue',
-                valuesByBreakpoint: {
-                    [breakpointIds[0]]: currentNodeClassNames.join(' '),
-                },
-            };
+            if (patternWrapper) {
+                // @ts-expect-error -- temporarily add node ID to pick up the className during rendering in CompositionBlock
+                currentNode.id = currentNode.id ?? generateRandomId(15);
+                // @ts-expect-error -- valueByBreakpoint is not explicitly defined, but it's already defined in the patternWrapper styles
+                patternWrapper.variables.cfSsrClassName = {
+                    ...(patternWrapper.variables.cfSsrClassName ?? {}),
+                    type: 'DesignValue',
+                    // @ts-expect-error -- id is not defined in ComponentTreeNode type
+                    [currentNode.id]: {
+                        valuesByBreakpoint: {
+                            [breakpointIds[0]]: currentNodeClassNames.join(' '),
+                        },
+                    },
+                };
+            }
+            else {
+                currentNode.variables.cfSsrClassName = {
+                    type: 'DesignValue',
+                    valuesByBreakpoint: {
+                        [breakpointIds[0]]: currentNodeClassNames.join(' '),
+                    },
+                };
+            }
             queue.push(...currentNode.children);
         }
     };
@@ -1787,10 +1806,19 @@ const indexByBreakpoint = ({ variables, breakpointIds, getBoundEntityById, unbou
             }
             continue;
         }
-        if (variableData.type !== 'DesignValue') {
+        let resolvedVariableData = variableData;
+        if (variableData.type === 'ComponentValue') {
+            const variableDefinition = componentSettings?.variableDefinitions[variableData.key];
+            if (variableDefinition.group === 'style' && variableDefinition.defaultValue !== undefined) {
+                const overrideVariableData = componentVariablesOverwrites?.[variableData.key];
+                resolvedVariableData =
+                    overrideVariableData || variableDefinition.defaultValue;
+            }
+        }
+        if (resolvedVariableData.type !== 'DesignValue') {
             continue;
         }
-        for (const [breakpointId, variableValue] of Object.entries(variableData.valuesByBreakpoint)) {
+        for (const [breakpointId, variableValue] of Object.entries(resolvedVariableData.valuesByBreakpoint)) {
             if (!variableValue) {
                 continue;
             }