@sitecore-jss/sitecore-jss/dist/esm/layout/content-styles.js

This module is provided as a part of Sitecore JavaScript Rendering SDK. It contains the core JSS APIs (layout service) and utilities.

import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
/**
 * Regular expression to check if the content styles are used in the field value
 */
const CLASS_REGEXP = /class=".*(\bck-content\b).*"/g;
/**
 * Get the content styles link to be loaded from the Sitecore Edge Platform
 * @param {LayoutServiceData} layoutData Layout service data
 * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
 * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
 * @returns {HTMLLink | null} content styles link, null if no styles are used in layout
 */
export const getContentStylesheetLink = (layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT) => {
    if (!layoutData.sitecore.route)
        return null;
    const config = { loadStyles: false };
    traverseComponent(layoutData.sitecore.route, config);
    if (!config.loadStyles)
        return null;
    return {
        href: getContentStylesheetUrl(sitecoreEdgeContextId, sitecoreEdgeUrl),
        rel: 'stylesheet',
    };
};
export const getContentStylesheetUrl = (sitecoreEdgeContextId, sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT) => `${sitecoreEdgeUrl}/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`;
export const traversePlaceholder = (components, config) => {
    if (config.loadStyles)
        return;
    components.forEach((component) => {
        traverseComponent(component, config);
    });
};
export const traverseField = (field, config) => {
    if (!field || typeof field !== 'object' || config.loadStyles)
        return;
    if ('editable' in field && field.editable) {
        config.loadStyles = CLASS_REGEXP.test(field.editable);
    }
    else if ('value' in field && typeof field.value === 'string') {
        config.loadStyles = CLASS_REGEXP.test(field.value);
    }
    else if ('fields' in field) {
        Object.values(field.fields).forEach((field) => {
            traverseField(field, config);
        });
    }
    else if (Array.isArray(field)) {
        field.forEach((field) => {
            traverseField(field, config);
        });
    }
};
export const traverseComponent = (component, config) => {
    if (config.loadStyles)
        return;
    if ('fields' in component && component.fields) {
        Object.values(component.fields).forEach((field) => {
            traverseField(field, config);
        });
    }
    const placeholders = component.placeholders || {};
    Object.keys(placeholders).forEach((placeholder) => {
        traversePlaceholder(placeholders[placeholder], config);
    });
};