feat: no more css

Author: mjuraschik

packages/commerce-sdk-react/src/types/css.d.ts

@@ -70,7 +70,6 @@
     "commander": "^9.5.0",
     "compression": "1.7.4",
     "copy-webpack-plugin": "^9.1.0",
-    "css-loader": "^6.8.1",
     "cross-env": "^5.2.1",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "8.8.0",
@@ -102,7 +101,6 @@
     "semver": "^7.5.2",
     "source-map-loader": "^4.0.1",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "style-loader": "^3.3.3",
     "svg-sprite-loader": "^6.0.11",
     "validator": "^13.9.0",
     "webpack": "^5.76.3",

packages/pwa-kit-dev/package.json

@@ -280,11 +280,7 @@ const baseConfig = (target) => {
                                 loader: findDepInStack('source-map-loader')
                             }
                         },
-                        target === 'web' && {
-                            test: /\.css$/,
-                            use: [findDepInStack('style-loader'), findDepInStack('css-loader')]
-                        },
-                        target === 'node' && {
+                        {
                             test: /\.css$/,
                             loader: findDepInStack('ignore-loader')
                         }
@@ -358,6 +354,15 @@ const staticFolderCopyPlugin = new CopyPlugin({
                 .replace(/\\/g, '/'),
             to: `static/`,
             noErrorOnMissing: true
+        },
+        {
+            // Copy Page Designer CSS from storefront-next-runtime for dynamic loading
+            from: path.resolve(
+                projectDir,
+                'node_modules/@salesforce/storefront-next-runtime/dist/design-styles.css'
+            ),
+            to: 'static/pd-design-styles.css',
+            noErrorOnMissing: true
         }
     ]
 })

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

@@ -11,6 +11,7 @@ import {
     usePageDesignerMode,
     useGlobalAnchorBlock
 } from '@salesforce/commerce-sdk-react/page-designer'
+import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 
 /**
  * PageDesignerInit - Component that handles Page Designer initialization
@@ -59,14 +60,25 @@ export function PageDesignerInit() {
     // Pass isDesignMode to control when navigation blocking is active
     useGlobalAnchorBlock(isDesignMode)
 
-    // Dynamically import the Page Designer global styles only when in design mode.
+    // Dynamically load the Page Designer global styles only when in design mode.
     // This ensures the styles are not loaded in production runtime, improving performance.
     useEffect(() => {
-        if (isDesignMode) {
-            // Dynamic import with void to ignore the promise
-            // Import only the CSS file, not the entire components module to avoid circular dependencies
-            void import('@salesforce/storefront-next-runtime/design/styles.css')
+        if (!isDesignMode) {
+            return
         }
+
+        const id = 'pd-design-styles'
+        if (document.getElementById(id)) {
+            return
+        }
+
+        const link = document.createElement('link')
+        link.id = id
+        link.rel = 'stylesheet'
+        link.href = getAssetUrl('static/pd-design-styles.css')
+        document.head.appendChild(link)
+
+        return () => link.remove()
     }, [isDesignMode])
 
     // When the message function returns false, navigation is completely blocked (no dialog shown)