[Layout][Next.js] Load the content styles for the RichText component …

…(without using file proxy) (#1678)

* load content styles for rich text component

* fix linting errors

* update changelog

* fix linting error

* fix lint-samples step failing

CHANGELOG.md

@@ -9,6 +9,12 @@ Our versioning strategy is as follows:
 - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements)
 - Major: may include breaking changes in core packages (e.g. major architectural changes, major features)
 
+## Unreleased
+
+### 🎉 New Features & Improvements
+
+* `[sitecore-jss]` `[templates/nextjs]` Load the content styles for the RichText component [#1678](https://github.com/Sitecore/jss/pull/1678)
+
 ## 21.5.1
 
 ### 🐛 Bug Fixes

package.json

@@ -34,6 +34,9 @@
     "typedoc-plugin-markdown": "^3.11.3",
     "typescript": "~4.7.4"
   },
+  "resolutions": {
+    "eslint-plugin-jsx-a11y": "6.7.1"
+  },
   "workspaces": [
     "packages/*",
     "samples/*"

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

@@ -0,0 +1,18 @@
+import { SitecorePageProps } from 'lib/page-props';
+import { getContentStylesheetLink } from '@sitecore-jss/sitecore-jss-nextjs';
+import { Plugin } from '..';
+
+class ContentStylesPlugin implements Plugin {
+  order = 2;
+
+  async exec(props: SitecorePageProps) {
+    // Get content stylessheet link, empty if styles are not used on the page
+    const contentStyles = getContentStylesheetLink(props.layoutData);
+
+    contentStyles && props.headLinks.push(contentStyles);
+
+    return props;
+  }
+}
+
+export const contentStylesPlugin = new ContentStylesPlugin();

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

@@ -68,6 +68,7 @@ export {
   RenderingType,
   EDITING_COMPONENT_PLACEHOLDER,
   EDITING_COMPONENT_ID,
+  getContentStylesheetLink,
 } from '@sitecore-jss/sitecore-jss/layout';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export {

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

@@ -10,6 +10,7 @@ export {
   EditButtonTypes,
 } from '@sitecore-jss/sitecore-jss/utils';
 export {
+  getContentStylesheetLink,
   LayoutService,
   LayoutServiceData,
   LayoutServicePageState,