Update Storybook's configuration of Vite to wrap cascade layers aroun…

…d the imported LESS files.

.storybook/main.ts

@@ -3,6 +3,24 @@ import {mergeConfig} from "vite";
 
 import type {StorybookConfig} from "@storybook/react-vite";
 
+// This is a temporary plugin option to mimic what is in PROD in regard to cascade layers.
+// Perseus LESS files are wrapped in the 'shared' layer in Webapp.
+// To get the same ordering of precedence in Storybook, the imported LESS files need to be wrapped accordingly.
+// Once the LESS files have cascade layers included (a more involved task for a later time),
+//     then the following plugin option should be removed.
+const lessWrapper = {
+    name: 'wrap-less-in-layer',
+    transform: (code: string, pathname: string)  => {
+        if (pathname.endsWith(".less")) {
+            const layerStatements = "@layer reset, shared, legacy;\n@layer shared";
+            return {
+                code: `${layerStatements} { ${code} }`,
+                map: null,
+            }
+        }
+    }
+};
+
 const config: StorybookConfig = {
     framework: "@storybook/react-vite",
 
@@ -53,6 +71,7 @@ const config: StorybookConfig = {
             },
             // Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
             assetsInclude: ["/sb-preview/runtime.js"],
+            plugins: [...viteConfig.plugins, lessWrapper],
         });
     },
     staticDirs: ["../static"],