@contentful/experiences-sdk-react 1.4.0 → 1.4.1-dev-20240516T1930-07eee5f.0

package/dist/index.js

@@ -10,7 +10,7 @@ import { ContentfulContainer, Columns, SingleColumn } from '@contentful/experien
 import styleInject from 'style-inject';
 import md5 from 'md5';
 
-const SDK_VERSION = '1.4.0-beta.0';
+const SDK_VERSION = '1.4.0';
 
 var util;
 (function (util) {
@@ -4380,6 +4380,7 @@ function withComponentWrapper(Component, options = {
 // this is the array of version which currently LATEST_SCHEMA_VERSION is compatible with
 const compatibleVersions = ['2023-09-28'];
 
+const CssVarRegex = /var\(--[\w-]+\)/;
 const cloneObject = (targetObject) => {
     if (typeof structuredClone !== 'undefined') {
         return structuredClone(targetObject);
@@ -4522,6 +4523,67 @@ const runRegisteredComponentValidations = () => {
         }
     });
 };
+const getSingleCssVariableValue = (element, cssVariableValue, cssAttribute) => {
+    element.style[cssAttribute] = cssVariableValue;
+    const styles = getComputedStyle(element);
+    const resolvedValue = styles.getPropertyValue(cssAttribute);
+    return resolvedValue;
+};
+const getAllCssVariableValues = (element, cssVariable, cssAttribute) => {
+    const resolvedCssVariables = {};
+    Object.keys(cssVariable).forEach((key) => {
+        const cssVariableValue = cssVariable[key];
+        if (CssVarRegex.test(cssVariableValue)) {
+            const resolvedValue = getSingleCssVariableValue(element, cssVariableValue, cssAttribute);
+            resolvedCssVariables[cssVariableValue] = resolvedValue;
+        }
+    });
+    return resolvedCssVariables;
+};
+const resolveCssVariables = (designTokensDefinition) => {
+    const { spacing, sizing, color, borderRadius, fontSize, lineHeight, letterSpacing, textColor, border, } = designTokensDefinition;
+    const resolvedCssVariables = {};
+    // Create an element
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const cssProperties = [
+        { variable: spacing, property: 'margin' },
+        { variable: sizing, property: 'width' },
+        { variable: color, property: 'background-color' },
+        { variable: borderRadius, property: 'border-radius' },
+        { variable: fontSize, property: 'font-size' },
+        { variable: lineHeight, property: 'line-height' },
+        { variable: letterSpacing, property: 'letter-spacing' },
+        { variable: textColor, property: 'color' },
+    ];
+    cssProperties.forEach(({ variable, property }) => {
+        if (variable) {
+            const rawResolvedValues = getAllCssVariableValues(element, variable, property);
+            Object.assign(resolvedCssVariables, rawResolvedValues);
+        }
+    });
+    if (border) {
+        const tempResolvedValue = {};
+        Object.keys(border).forEach((borderKey) => {
+            const { width, style, color } = border[borderKey];
+            if (CssVarRegex.test(width)) {
+                const resolvedValue = getSingleCssVariableValue(element, width, 'border-width');
+                tempResolvedValue[width] = resolvedValue;
+            }
+            if (CssVarRegex.test(style)) {
+                const resolvedValue = getSingleCssVariableValue(element, style, 'border-style');
+                tempResolvedValue[style] = resolvedValue;
+            }
+            if (CssVarRegex.test(color)) {
+                const resolvedValue = getSingleCssVariableValue(element, color, 'border-color');
+                tempResolvedValue[color] = resolvedValue;
+            }
+            Object.assign(resolvedCssVariables, tempResolvedValue);
+        });
+    }
+    document.body.removeChild(element);
+    return resolvedCssVariables;
+};
 const sendConnectedEventWithRegisteredComponents = () => {
     // Send the definitions (without components) via the connection message to the experience builder
     const registeredDefinitions = Array.from(componentRegistry.values()).map(({ definition }) => definition);
@@ -4531,6 +4593,7 @@ const sendConnectedEventWithRegisteredComponents = () => {
     });
     sendMessage(OUTGOING_EVENTS.DesignTokens, {
         designTokens: designTokensRegistry,
+        resolvedCssVariables: resolveCssVariables(designTokensRegistry),
     });
 };
 /**