From 9c2bed1b176fe04e545023c02a73c7ed4bc42fee Mon Sep 17 00:00:00 2001 From: Mark Fitzgerald Date: Thu, 16 Jan 2025 16:26:36 -0800 Subject: [PATCH] Update Storybook's configuration of Vite to wrap cascade layers around the imported LESS files. --- .storybook/main.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/.storybook/main.ts b/.storybook/main.ts index f8fd25a5e5..ac91e117f7 100644 --- a/.storybook/main.ts +++ b/.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"],