[sitecore-jss] Provide contextId as a part of content styles path

CHANGELOG.md

@@ -13,7 +13,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-* `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683))
+* `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683))([#1684](https://github.com/Sitecore/jss/pull/1684))
 
 ### 🧹 Chores
 

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/content-styles.ts

@@ -8,7 +8,11 @@ class ContentStylesPlugin implements Plugin {
 
   async exec(props: SitecorePageProps) {
     // Get content stylessheet link, empty if styles are not used on the page
-    const contentStyles = getContentStylesheetLink(props.layoutData, config.sitecoreEdgeUrl);
+    const contentStyles = getContentStylesheetLink(
+      props.layoutData,
+      config.sitecoreEdgeContextId,
+      config.sitecoreEdgeUrl
+    );
 
     contentStyles && props.headLinks.push(contentStyles);
 

packages/sitecore-jss/src/layout/content-styles.test.ts

@@ -13,10 +13,13 @@ import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
 describe('content-styles', () => {
   const truthyValue = { value: '<div class="test bar"><p class="foo ck-content">bar</p></div>' };
   const falsyValue = { value: '<div class="test bar"><p class="foo">ck-content</p></div>' };
+  const sitecoreEdgeContextId = ' 7qwerty';
 
   describe('getContentStylesheetLink', () => {
     it('should return null when route data is empty', () => {
-      expect(getContentStylesheetLink({ sitecore: { context: {}, route: null } })).to.be.null;
+      expect(
+        getContentStylesheetLink({ sitecore: { context: {}, route: null } }, sitecoreEdgeContextId)
+      ).to.be.null;
     });
 
     it('should set "loadStyles: false" when layout does not have a ck-content class', () => {
@@ -32,7 +35,7 @@ describe('content-styles', () => {
         },
       };
 
-      expect(getContentStylesheetLink(layoutData)).to.be.null;
+      expect(getContentStylesheetLink(layoutData, sitecoreEdgeContextId)).to.be.null;
     });
 
     it('should set "loadStyles: true" when layout has a ck-content class', () => {
@@ -56,8 +59,8 @@ describe('content-styles', () => {
         },
       };
 
-      expect(getContentStylesheetLink(layoutData)).to.deep.equal({
-        href: `${SITECORE_EDGE_URL_DEFAULT}/v1/files/pages/styles/content-styles.css`,
+      expect(getContentStylesheetLink(layoutData, sitecoreEdgeContextId)).to.deep.equal({
+        href: `${SITECORE_EDGE_URL_DEFAULT}/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`,
         rel: 'stylesheet',
       });
     });
@@ -331,14 +334,14 @@ describe('content-styles', () => {
 
   describe('getContentStylesheetUrl', () => {
     it('should return the default url', () => {
-      expect(getContentStylesheetUrl()).to.equal(
-        `${SITECORE_EDGE_URL_DEFAULT}/v1/files/pages/styles/content-styles.css`
+      expect(getContentStylesheetUrl(sitecoreEdgeContextId)).to.equal(
+        `${SITECORE_EDGE_URL_DEFAULT}/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`
       );
     });
 
     it('should return the custom url', () => {
-      expect(getContentStylesheetUrl('https://foo.bar')).to.equal(
-        'https://foo.bar/v1/files/pages/styles/content-styles.css'
+      expect(getContentStylesheetUrl(sitecoreEdgeContextId, 'https://foo.bar')).to.equal(
+        `https://foo.bar/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`
       );
     });
   });

packages/sitecore-jss/src/layout/content-styles.ts

@@ -19,11 +19,13 @@ type Config = { loadStyles: boolean };
 /**
  * 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: LayoutServiceData,
+  sitecoreEdgeContextId: string,
   sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT
 ): HTMLLink | null => {
   if (!layoutData.sitecore.route) return null;
@@ -34,11 +36,17 @@ export const getContentStylesheetLink = (
 
   if (!config.loadStyles) return null;
 
-  return { href: getContentStylesheetUrl(sitecoreEdgeUrl), rel: 'stylesheet' };
+  return {
+    href: getContentStylesheetUrl(sitecoreEdgeContextId, sitecoreEdgeUrl),
+    rel: 'stylesheet',
+  };
 };
 
-export const getContentStylesheetUrl = (sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT): string =>
-  `${sitecoreEdgeUrl}/v1/files/pages/styles/content-styles.css`;
+export const getContentStylesheetUrl = (
+  sitecoreEdgeContextId: string,
+  sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT
+): string =>
+  `${sitecoreEdgeUrl}/v1/files/pages/styles/content-styles.css?sitecoreContextId=${sitecoreEdgeContextId}`;
 
 export const traversePlaceholder = (
   components: Array<ComponentRendering | HtmlElementRendering>,