Support stylesheets for BYOC Unwrapped and SXA Components (#1722)

* introduce getComponentLibraryStylesheetLinks function plus unit tests * use getComponentLibraryStylesheetLinks function in load component themes plugin * deprecate getFEAASLibraryStylesheetLinks * fix linting errors * update changelog * fix changelog update * fix lint error * update deprecated message for getFEAASLibraryStylesheetLinks function * export getComponentLibraryStylesheetLinks directly from layout submodule * remove things around removed styles submodule * Update CHANGELOG.md Co-authored-by: Illia Kovalenko <[email protected]> * minor update in exports in sitecore-jss-react --------- Co-authored-by: Illia Kovalenko <[email protected]>
Sitecore · Jan 26, 2024 · 6f1d5de · 6f1d5de
1 parent 6ab0763
commit 6f1d5de
Show file tree

Hide file tree

Showing 8 changed files with 593 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ Our versioning strategy is as follows:
 * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1674))
 * `[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)) ([#1693](https://github.com/Sitecore/jss/pull/1693))
 * `[templates/react]` `[sitecore-jss-react]` Replace package 'deep-equal' with 'fast-deep-equal'. No functionality change only performance improvement ([#1719](https://github.com/Sitecore/jss/pull/1719)) ([#1665](https://github.com/Sitecore/jss/pull/1665))
+* `[templates/nextjs-xmcloud]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-jss-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) 
 
 ### 🐛 Bug Fixes
 

diff --git a/...age-props-factory/plugins/feaas-themes.ts → ...props-factory/plugins/component-themes.ts b/...age-props-factory/plugins/feaas-themes.ts → ...props-factory/plugins/component-themes.ts
@@ -1,15 +1,15 @@
 import { SitecorePageProps } from 'lib/page-props';
-import { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
+import { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
 import { Plugin } from '..';
 import config from 'temp/config';
 
-class FEeaSThemesPlugin implements Plugin {
+class ComponentThemesPlugin implements Plugin {
   order = 2;
 
   async exec(props: SitecorePageProps) {
-    // Collect FEAAS themes
+    // Collect FEAAS, BYOC, SXA component themes
     props.headLinks.push(
-      ...getFEAASLibraryStylesheetLinks(
+      ...getComponentLibraryStylesheetLinks(
         props.layoutData,
         config.sitecoreEdgeContextId,
         config.sitecoreEdgeUrl
@@ -19,4 +19,4 @@ class FEeaSThemesPlugin implements Plugin {
   }
 }
 
-export const feaasThemesPlugin = new FEeaSThemesPlugin();
+export const componentThemesPlugin = new ComponentThemesPlugin();
diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/packages/sitecore-jss-nextjs/src/index.ts
@@ -188,6 +188,7 @@ export {
   BYOCComponent,
   BYOCComponentProps,
   getFEAASLibraryStylesheetLinks,
+  getComponentLibraryStylesheetLinks,
   File,
   FileField,
   RichTextField,

diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts
@@ -11,6 +11,7 @@ export {
 } from '@sitecore-jss/sitecore-jss/utils';
 export {
   getContentStylesheetLink,
+  getComponentLibraryStylesheetLinks,
   LayoutService,
   LayoutServiceData,
   LayoutServicePageState,

diff --git a/packages/sitecore-jss/src/feaas/themes.ts b/packages/sitecore-jss/src/feaas/themes.ts
@@ -20,6 +20,7 @@ const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
  * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
  * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
  * @returns {HTMLLink[]} library stylesheet links
+ * @deprecated use getComponentLibraryStylesheetLinks instead; getFEAASLibraryStylesheetLinks will be removed in v22.0
  */
 export function getFEAASLibraryStylesheetLinks(
   layoutData: LayoutServiceData,

diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts
@@ -31,3 +31,5 @@ export {
 } from './rest-layout-service';
 
 export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './graphql-layout-service';
+
+export { getComponentLibraryStylesheetLinks } from './themes';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,3 +31,5 @@ export {
		} from './rest-layout-service';

		export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './graphql-layout-service';

		export { getComponentLibraryStylesheetLinks } from './themes';