From c0a162888187413b1e3f6ee185c03cab54f2adba Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Wed, 11 Dec 2024 09:08:58 +0100
Subject: [PATCH] docs: fix CSS layers order in deployed Storybook (#2310)

Relates to #812

Currently many components styles are broken in our prod Storybook. Its
propably caused by the normalization change but it works when running
the Storybook locally and also for the Playwright screenshots.

Do you have any idea whats going on here? I remember that we had some
weird issues with the CSS layers not being in the correct order in the
deployed Storybook

Correct layers (when running pnpm dev):

![Bild](https://github.com/user-attachments/assets/e67daad9-9247-43e6-8509-10af37b66f4c)

Somehow broken layers when deploying Storybook:
![Bild
(1)](https://github.com/user-attachments/assets/a53f50ce-fa5b-4efc-bbab-aaa025ac1a04)

Can be reproduced locally by running "pnpm build:storybook && pnpm
preview"
---
 packages/sit-onyx/.storybook/main.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/sit-onyx/.storybook/main.ts b/packages/sit-onyx/.storybook/main.ts
index 12bde5a0e4..10f49a6543 100644
--- a/packages/sit-onyx/.storybook/main.ts
+++ b/packages/sit-onyx/.storybook/main.ts
@@ -1,6 +1,13 @@
 import type { StorybookConfig } from "@storybook/vue3-vite";
+import { readFileSync } from "fs";
+import { fileURLToPath } from "node:url";
 import { mergeConfig } from "vite";
 
+const onyxLayers = readFileSync(
+  fileURLToPath(new URL("../src/styles/layers.scss", import.meta.url)),
+  "utf-8",
+);
+
 const config: StorybookConfig = {
   stories: ["./pages/*.mdx", "../src/**/*.stories.ts"],
   addons: ["@storybook/addon-essentials", "storybook-dark-mode", "@storybook/addon-a11y"],
@@ -27,6 +34,13 @@ const config: StorybookConfig = {
     <meta property="og:image:height" content="600" />
     <meta property="og:url" content="https://storybook.onyx.schwarz">
   `,
+  // somehow Storybook does not parse the CSS in the correct order so the CSS layers are messed up.
+  // to fix this, we add them manually before all other styles here
+  // TODO: remove after [#2311](https://github.com/SchwarzIT/onyx/issues/2311)
+  previewHead: (head) => `
+    <style>${onyxLayers}</style>
+    ${head}
+  `,
   // fix "The file does not exist at "..." which is in the optimize deps directory"
   // see: https://github.com/storybookjs/storybook/issues/28542#issuecomment-2268031095
   viteFinal: (config) => {