@contentful/experiences-core 1.23.0-dev-20241126T1532-544ff28.0 → 1.23.0-dev-20241127T2203-79f4a14.0

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { doesMismatchMessageSchema, tryParseMessage, validateExperienceBuilderCo
 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 { transformBoundContentValue } from './utils/transformers/transformBoundContentValue.js';
-export { checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, generateRandomId, getDataFromTree, getInsertionData } from './utils/utils.js';
+export { checkIsAssembly, checkIsAssemblyDefinition, checkIsAssemblyEntry, checkIsAssemblyNode, generateRandomId, getDataFromTree, getInsertionData, getTargetValueInPixels, parseCSSValue } from './utils/utils.js';
 export { isExperienceEntry } from './utils/typeguards.js';
 export { MEDIA_QUERY_REGEXP, getActiveBreakpointIndex, getFallbackBreakpointIndex, getValueForBreakpoint, isValidBreakpointValue, mediaQueryMatcher } from './utils/breakpoints.js';
 export { isLinkToAsset } from './utils/isLinkToAsset.js';

package/dist/index.js

@@ -2162,7 +2162,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         return;
     }
     if (variableName === 'cfBackgroundImageUrl') {
-        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth') || '100%';
+        let width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth') || '100%';
         const optionsVariableName = 'cfBackgroundImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
@@ -2172,6 +2172,15 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
             return;
         }
         try {
+            // Target width (px/rem/em) will be applied to the css url if it's lower than the original image width (in px)
+            const assetDetails = asset.fields.file?.details;
+            const assetWidth = assetDetails?.image?.width || 0; // This is always in px
+            const targetWidthObject = parseCSSValue(options.targetSize); // Contains value and unit (px/rem/em) so convert and then compare to assetWidth
+            const targetValue = targetWidthObject
+                ? getTargetValueInPixels(targetWidthObject)
+                : assetWidth;
+            if (targetValue < assetWidth)
+                width = `${targetValue}px`;
             value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
             return value;
         }
@@ -2365,6 +2374,29 @@ const checkIsAssemblyEntry = (entry) => {
     return Boolean(entry.fields?.componentSettings);
 };
 const checkIsAssemblyDefinition = (component) => component?.category === ASSEMBLY_DEFAULT_CATEGORY;
+function parseCSSValue(input) {
+    const regex = /^(\d+(\.\d+)?)(px|em|rem)$/;
+    const match = input.match(regex);
+    if (match) {
+        return {
+            value: parseFloat(match[1]),
+            unit: match[3],
+        };
+    }
+    return null;
+}
+function getTargetValueInPixels(targetWidthObject) {
+    switch (targetWidthObject.unit) {
+        case 'px':
+            return targetWidthObject.value;
+        case 'em':
+            return targetWidthObject.value * 16;
+        case 'rem':
+            return targetWidthObject.value * 16;
+        default:
+            return targetWidthObject.value;
+    }
+}
 
 const isExperienceEntry = (entry) => {
     return (entry?.sys?.type === 'Entry' &&
@@ -3617,5 +3649,5 @@ async function fetchById({ client, experienceTypeId, id, localeCode, }) {
     }
 }
 
-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, getTemplateValue, getValueForBreakpoint, indexByBreakpoint, isCfStyleAttribute, isComponentAllowedOnRoot, isContentfulComponent, isContentfulStructureComponent, isDeepPath, isExperienceEntry, isLink, isLinkToAsset, isPatternComponent, isStructureWithRelativeHeight, isValidBreakpointValue, lastPathNamedSegmentEq, maybePopulateDesignTokenValue, mediaQueryMatcher, optionalBuiltInStyles, 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, 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 };
 //# sourceMappingURL=index.js.map