@contentful/experiences-core 1.37.2 → 1.37.3-dev-20250519T0822-4378dab.0

package/dist/index.js

@@ -2063,25 +2063,16 @@ const detachExperienceStyles = (experience) => {
     }), {});
     // getting the breakpoint ids
     const breakpointIds = Object.keys(mediaQueryDataByBreakpoint);
-    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, parentChainArr = [], }) => {
+    const iterateOverTreeAndExtractStyles = ({ componentTree, dataSource, unboundValues, componentSettings, componentVariablesOverwrites, patternWrapper, wrappingPatternIds, wrappingPatternNodeIds = [], }) => {
         // traversing the tree
         const queue = [];
-        queue.push(...componentTree.children.map((child) => ({
-            node: child,
-            parentChain: [...parentChainArr],
-        })));
+        queue.push(...componentTree.children);
         // for each tree node
         while (queue.length) {
-            const queueItem = queue.shift();
-            if (!queueItem) {
-                break;
-            }
-            const { node: currentNode, parentChain } = queueItem;
+            const currentNode = queue.shift();
             if (!currentNode) {
                 break;
             }
-            const currentNodeParentChain = [...parentChain, currentNode.id || ''];
-            const currentPatternNodeIdsChain = currentNodeParentChain.join('');
             const usedComponents = experience.entityStore?.usedComponents ?? [];
             const isPatternNode = checkIsAssemblyNode({
                 componentId: currentNode.definitionId,
@@ -2119,7 +2110,7 @@ const detachExperienceStyles = (experience) => {
                     // pass top-level pattern node to store instance-specific child styles for rendering
                     patternWrapper: currentNode,
                     wrappingPatternIds: new Set([...wrappingPatternIds, currentNode.definitionId]),
-                    parentChainArr: currentNodeParentChain,
+                    wrappingPatternNodeIds: [...wrappingPatternNodeIds, currentNode.id || ''],
                 });
                 continue;
             }
@@ -2155,6 +2146,10 @@ const detachExperienceStyles = (experience) => {
              * }
              */
             const currentNodeClassNames = [];
+            // Chain IDs to avoid overwriting styles across multiple instances of the same pattern
+            // e.g. `{outerPatternNodeId}{innerPatternNodeId}-{currentNodeId}`
+            // (!) Notice that the chain of patterns (before the dash) follows the format of prebinding/ patternProperties
+            const currentNodeIdsChain = `${wrappingPatternNodeIds.join('')}-${currentNode.id}`;
             // 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]) => {
@@ -2181,7 +2176,7 @@ const detachExperienceStyles = (experience) => {
                 // conflicts between different breakpoint values from multiple nodes where the hash would be equal
                 // - Adding wrapping pattern nodes IDs to avoid conflicts between similar nested patterns as those
                 // could override each others CSS for some breakpoints just through the order of `<style>` tags in the DOM.
-                const styleHash = md5(currentPatternNodeIdsChain + breakpointId + generatedCss);
+                const styleHash = md5(currentNodeIdsChain + 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
@@ -2210,8 +2205,7 @@ const detachExperienceStyles = (experience) => {
                 patternWrapper.variables.cfSsrClassName = {
                     ...(patternWrapper.variables.cfSsrClassName ?? {}),
                     type: 'DesignValue',
-                    // Chain IDs to avoid overwriting styles across multiple instances of the same pattern
-                    [currentPatternNodeIdsChain]: {
+                    [currentNodeIdsChain]: {
                         valuesByBreakpoint: {
                             [breakpointIds[0]]: currentNodeClassNames.join(' '),
                         },
@@ -2226,10 +2220,7 @@ const detachExperienceStyles = (experience) => {
                     },
                 };
             }
-            queue.push(...currentNode.children.map((child) => ({
-                node: child,
-                parentChain: currentNodeParentChain,
-            })));
+            queue.push(...currentNode.children);
         }
     };
     iterateOverTreeAndExtractStyles({