Support stylesheets for BYOC Unwrapped and SXA Components

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-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
 

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/feaas-themes.ts → packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-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();

packages/sitecore-jss-nextjs/src/index.ts

@@ -188,6 +188,7 @@ export {
   BYOCComponent,
   BYOCComponentProps,
   getFEAASLibraryStylesheetLinks,
+  getComponentLibraryStylesheetLinks,
   File,
   FileField,
   RichTextField,

packages/sitecore-jss-react/src/index.ts

@@ -45,6 +45,7 @@ export {
 } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas';
+export { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/layout';
 export { ComponentFactory } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export {

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,

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';