@contentful/experiences-core 1.40.2-dev-20250606T1202-905bb9e.0 → 1.40.2

package/dist/index.d.ts

@@ -9,7 +9,8 @@ export { Fieldset, UnresolvedFieldset, isDeepPath, lastPathNamedSegmentEq, parse
 export { addLocale, buildTemplate, getTemplateValue, resolveHyperlinkPattern } from './utils/resolveHyperlinkPattern.js';
 export { sanitizeNodeProps } from './utils/sanitizeNodeProps.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 { detachExperienceStyles, flattenDesignTokenRegistry, indexByBreakpoint, isCfStyleAttribute, maybePopulateDesignTokenValue, resolveBackgroundImageBinding } from './utils/styleUtils/ssrStyles.js';
+export { toMediaQuery } from './utils/styleUtils/toMediaQuery.js';
 export { transformVisibility } from './utils/styleUtils/styleTransformers.js';
 export { transformBoundContentValue } from './utils/transformers/transformBoundContentValue.js';
 export { treeMap, treeVisit } from './utils/treeTraversal.js';

package/dist/index.js

@@ -2103,6 +2103,55 @@ const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', fo
     }
 };
 
+/**
+ * Turns a condition like `<768px` or `>1024px` into a media query rule.
+ * For example, `<768px` becomes `max-width:768px` and `>1024px` becomes `min-width:1024px`.
+ */
+const toMediaQueryRule = (condition) => {
+    const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
+    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
+    return `(${mediaQueryRule}:${pixelValue})`;
+};
+/**
+ * Converts a map of class names to CSS strings into a single CSS string.
+ *
+ * @param cssByClassName map of class names to CSS strings containing all rules for each class
+ * @returns joined string of all CSS class definitions
+ */
+const toCompoundCss = (cssByClassName) => {
+    return Object.entries(cssByClassName).reduce((acc, [className, css]) => {
+        if (css === '')
+            return acc;
+        return `${acc}.${className}{${css}}`;
+    }, ``);
+};
+/**
+ * Create a single CSS string containing all class definitions for a given media query.
+ *
+ * @param cssByClassName map of class names to CSS strings containing all rules for each class
+ * @param condition e.g. "*", "<520px", ">520px"
+ * @param nextCondition optional next condition to create a disjunct media query that doesn't affect the next breakpoint
+ * @returns joined string of all CSS class definitions wrapped into media queries
+ */
+const toMediaQuery = ({ cssByClassName, condition, nextCondition, }) => {
+    const compoundCss = toCompoundCss(cssByClassName);
+    if (compoundCss === '') {
+        return '';
+    }
+    const queryRule = toMediaQueryRule(condition);
+    if (!nextCondition) {
+        if (condition === '*') {
+            return compoundCss;
+        }
+        return `@media${queryRule}{${compoundCss}}`;
+    }
+    const nextRule = toMediaQueryRule(nextCondition);
+    if (condition === '*') {
+        return `@media not ${nextRule}{${compoundCss}}`;
+    }
+    return `@media${queryRule} and (not ${nextRule}){${compoundCss}}`;
+};
+
 const detachExperienceStyles = (experience) => {
     const experienceTreeRoot = experience.entityStore?.experienceEntryFields
         ?.componentTree;
@@ -2118,6 +2167,7 @@ const detachExperienceStyles = (experience) => {
         [breakpoint.id]: {
             condition: breakpoint.query,
             cssByClassName: {},
+            visibilityCssByClassName: {},
         },
     }), {});
     // getting the breakpoint ids
@@ -2194,6 +2244,11 @@ const detachExperienceStyles = (experience) => {
                     return experience.entityStore?.entities.find((entity) => entity.sys.id === id);
                 },
             });
+            // When the node is hidden for any breakpoint, we need to handle this separately with a disjunct media query.
+            const isAnyVisibilityValueHidden = Object.values(propsByBreakpoint).some((designProperties) => designProperties.cfVisibility === false);
+            // We always need an explicit value when using disjunct media queries
+            // Example: desktop uses "false" and tablet is undefined -> we need to set `display: none` for tablet as well.
+            let previousVisibilityValue;
             /* [Data format] `propsByBreakpoint` is a map of "breakpointId > propertyName > plainValue":
              * {
              *   desktop: {
@@ -2244,12 +2299,21 @@ const detachExperienceStyles = (experience) => {
                 if (!currentNodeClassNames.includes(className)) {
                     currentNodeClassNames.push(className);
                 }
-                // if there is already the similar hash - no need to over-write it
-                if (mediaQueryDataByBreakpoint[breakpointId].cssByClassName[className]) {
-                    continue;
+                // Only if the hash was not used yet, save the CSS to the stylesheet
+                if (!mediaQueryDataByBreakpoint[breakpointId].cssByClassName[className]) {
+                    mediaQueryDataByBreakpoint[breakpointId].cssByClassName[className] = generatedCss;
+                }
+                // Special case for visibility to override any custom `display` values but only for a specific breakpoint.
+                if (isAnyVisibilityValueHidden) {
+                    const visibilityValue = propsByBreakpointWithResolvedDesignTokens.cfVisibility ?? previousVisibilityValue;
+                    previousVisibilityValue = visibilityValue;
+                    const visibilityStyles = transformVisibility(visibilityValue);
+                    const visibilityCss = stringifyCssProperties(visibilityStyles);
+                    if (!mediaQueryDataByBreakpoint[breakpointId].visibilityCssByClassName[className]) {
+                        mediaQueryDataByBreakpoint[breakpointId].visibilityCssByClassName[className] =
+                            visibilityCss;
+                    }
                 }
-                // otherwise, save it to the stylesheet
-                mediaQueryDataByBreakpoint[breakpointId].cssByClassName[className] = generatedCss;
             }
             // all generated classNames are saved in the tree node
             // to be handled by the sdk later
@@ -2291,7 +2355,18 @@ 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(mediaQueryDataByBreakpoint).reduce((acc, [, mediaQueryData]) => `${acc}${toMediaQuery(mediaQueryData)}`, '');
+    const stylesheet = Object.values(mediaQueryDataByBreakpoint).reduce((acc, { condition, cssByClassName, visibilityCssByClassName }, index) => {
+        const mediaQueryCss = toMediaQuery({ cssByClassName, condition });
+        // Handle visibility separately to use disjunct media queries ("if desktop but not tablet ...")
+        // Enables to hide on one breakpoint but render any unknown custom `display` value on another breakpoint.
+        const visibilityMediaQueryCss = toMediaQuery({
+            cssByClassName: visibilityCssByClassName,
+            condition,
+            // Breakpoint validation ensures that it starts with the '*' breakpoint
+            nextCondition: Object.values(mediaQueryDataByBreakpoint)[index + 1]?.condition,
+        });
+        return `${acc}${mediaQueryCss}${visibilityMediaQueryCss}`;
+    }, '');
     return stylesheet;
 };
 /**
@@ -2635,24 +2710,6 @@ const flattenDesignTokenRegistry = (designTokenRegistry) => {
         };
     }, {});
 };
-/**
- * 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 (condition === '*') {
-        return mediaQueryStyles;
-    }
-    const [evaluation, pixelValue] = [condition[0], condition.substring(1)];
-    const mediaQueryRule = evaluation === '<' ? 'max-width' : 'min-width';
-    return `@media(${mediaQueryRule}:${pixelValue}){${mediaQueryStyles}}`;
-};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function get(obj, path) {