[Storybook] Configure Aphrodite to Not Append !important to Styles

.changeset/forty-months-promise.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-dev-ui": patch
+---
+
+[Storybook] Configure Aphrodite to Not Append !important to Styles

.storybook/main.ts

@@ -1,8 +1,27 @@
 import viteConfig from "../dev/vite.config";
 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 +72,7 @@
             },
             // Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
             assetsInclude: ["/sb-preview/runtime.js"],
+            plugins: [...viteConfig.plugins, lessWrapper],
         });
     },
     staticDirs: ["../static"],

dev/vite.config.ts

@@ -27,6 +27,10 @@ export default defineConfig({
             hubble: resolve(__dirname, "../vendor/hubble/hubble.js"),
             raphael: resolve(__dirname, "../vendor/raphael/raphael.js"),
             jsdiff: resolve(__dirname, "../vendor/jsdiff/jsdiff.js"),
+            aphrodite: resolve(
+                __dirname,
+                "../node_modules/aphrodite/no-important",
+            ),
             ...packageAliases,
         },
     },