[FEATURE] Add stylesheet loader to PWA-Kit SDK

packages/pwa-kit-dev/package.json

@@ -121,9 +121,15 @@
     "@types/node": "~16.0.3",
     "@types/node-fetch": "~2.6.3",
     "@types/validator": "~13.7.14",
+    "css-loader": "^6.9.1",
+    "file-loader": "^6.2.0",
     "internal-lib-build": "3.5.0-dev",
+    "mini-css-extract-plugin": "^2.7.7",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",
+    "sass-loader": "^14.0.0",
+    "sass": "^1.70.0",
+    "style-loader": "^3.3.4",
     "superagent": "^6.1.0",
     "supertest": "^4.0.2",
     "typescript": "4.9.5"

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -23,6 +23,8 @@ import OverridesResolverPlugin from './overrides-plugin'
 import {sdkReplacementPlugin} from './plugins'
 import {CLIENT, SERVER, CLIENT_OPTIONAL, SSR, REQUEST_PROCESSOR} from './config-names'
 
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 const projectDir = process.cwd()
 const pkg = fse.readJsonSync(resolve(projectDir, 'package.json'))
 const buildDir = process.env.PWA_KIT_BUILD_DIR
@@ -238,7 +240,11 @@ const baseConfig = (target) => {
                     sdkReplacementPlugin(),
 
                     // Don't chunk if it's a node target – faster Lambda startup.
-                    target === 'node' && new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1})
+                    target === 'node' && new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
+
+                    new MiniCssExtractPlugin({
+                        filename: 'static/style.css'
+                    })
                 ].filter(Boolean),
 
                 module: {
@@ -265,6 +271,24 @@ const baseConfig = (target) => {
                             use: {
                                 loader: findDepInStack('source-map-loader')
                             }
+                        },
+                        {
+                            test: /\.(sa|sc|c)ss$/,
+                            use: [
+                                {
+                                    loader: MiniCssExtractPlugin.loader
+                                },
+                                {
+                                    loader: findDepInStack('css-loader')
+                                }
+                            ],
+                        },
+                        {
+                          test: /\.(woff|woff2)$/i,
+                          type: 'asset/resource',
+                          generator: {
+                            filename: 'static/fonts/[hash][ext][query]'
+                          }
                         }
                     ].filter(Boolean)
                 }

packages/pwa-kit-dev/src/ssr/server/build-dev-server.js

@@ -141,7 +141,10 @@ export const DevServerMixin = {
             config = require(projectWebpackPath)
         }
         app.__compiler = webpack(config)
-        app.__devMiddleware = webpackDevMiddleware(app.__compiler, {serverSideRender: true})
+        app.__devMiddleware = webpackDevMiddleware(app.__compiler, {
+            serverSideRender: true,
+            writeToDisk: (path) => /style\.css$/.test(path)
+        })
         app.__isInitialBuild = true
         app.__webpackReady = () => Boolean(app.__devMiddleware.context.state)
         app.__devMiddleware.waitUntilValid(() => {

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

@@ -188,6 +188,10 @@ export const render = async (req, res, next) => {
 
     appJSX = React.cloneElement(appJSX, {error: appStateError, appState})
 
+
+    const extractor = new ChunkExtractor({statsFile: BUNDLES_PATH, publicPath: getAssetUrl()})
+    const inlineStyles = await extractor.getInlineStyleElements()
+
     // Step 4 - Render the App
     let renderResult
     try {
@@ -200,7 +204,8 @@ export const render = async (req, res, next) => {
             res,
             location,
             config,
-            appJSX
+            appJSX,
+            inlineStyles
         })
     } catch (e) {
         // This is an unrecoverable error.
@@ -257,7 +262,7 @@ const renderToString = (jsx, extractor) =>
     ReactDOMServer.renderToString(extractor.collectChunks(jsx))
 
 const renderApp = (args) => {
-    const {req, res, appStateError, appJSX, appState, config} = args
+    const {req, res, appStateError, appJSX, appState, config, inlineStyles} = args
     const extractor = new ChunkExtractor({statsFile: BUNDLES_PATH, publicPath: getAssetUrl()})
 
     const ssrOnly = 'mobify_server_only' in req.query || '__server_only' in req.query
@@ -342,10 +347,11 @@ const renderApp = (args) => {
     const helmetHeadTags = VALID_TAG_NAMES.map(
         (tag) => helmet[tag] && helmet[tag].toComponent()
     ).filter((tag) => tag)
+
 
     const html = ReactDOMServer.renderToString(
         <Document
-            head={[...helmetHeadTags]}
+            head={[...helmetHeadTags, ...inlineStyles]}
             html={appHtml}
             afterBodyStart={svgs}
             beforeBodyEnd={scripts}

packages/pwa-kit-react-sdk/src/ssr/universal/components/_document/index.jsx

@@ -11,6 +11,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import {getAssetUrl} from '../../../../ssr/universal/utils'
 
 /**
  * The Document is a special component that can be overridden in a project, it

packages/template-retail-react-app/app/components/_app-config/index.jsx

@@ -26,6 +26,8 @@ import {useCorrelationId} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hook
 import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 
+// import '../../theme/sass/sass-test.scss'
+
 /**
  * Use the AppConfig component to inject extra arguments into the getProps
  * methods for all Route Components in the app – typically you'd want to do this

packages/template-retail-react-app/app/theme/index.js

@@ -51,10 +51,15 @@ import SocialIcons from '@salesforce/retail-react-app/app/theme/components/proje
 import SwatchGroup from '@salesforce/retail-react-app/app/theme/components/project/swatch-group'
 import ImageGallery from '@salesforce/retail-react-app/app/theme/components/project/image-gallery'
 
+import '@fontsource/raleway/400-italic.css'
+
 // Please refer to the Chakra-Ui theme customization docs found
 // here https://chakra-ui.com/docs/theming/customize-theme to learn
 // more about extending and overriding themes for your project.
 export const overrides = {
+    fonts: {
+        body: `'Raleway', sans-serif`,
+    },
     styles,
     layerStyles,
     colors,

packages/template-retail-react-app/package.json

@@ -41,6 +41,7 @@
     "@chakra-ui/system": "^2.5.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@fontsource/raleway": "^5.0.16",
     "@formatjs/cli": "^6.0.4",
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",