From e66e7a3a57e3f411072f2088b74311a317ca1023 Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Tue, 5 Dec 2023 15:16:53 -0500
Subject: [PATCH] fix: chromatic builds

---
 .storybook/main.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 039ce12b5..aabe22663 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -3,6 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'path';
 import fs from 'fs';
 import fg from 'fast-glob';
+import stylexPlugin from '@stylexjs/rollup-plugin';
 import turbosnap from 'vite-plugin-turbosnap';
 
 import tsconfig from '../tsconfig.json';
@@ -49,6 +50,15 @@ const config: StorybookConfig = {
   async viteFinal(config, { configType }) {
     if (configType === 'PRODUCTION') {
       config.plugins?.push(turbosnap({ rootDir: config.root || process.cwd() }));
+      config.build!.rollupOptions!.plugins = [
+        stylexPlugin({
+          // Required for CSS variable support
+          unstable_moduleResolution: {
+            type: 'commonJS',
+            rootDir: __dirname,
+          },
+        }),
+      ];
     }
 
     return config;
@@ -57,6 +67,10 @@ const config: StorybookConfig = {
     autodocs: true,
     defaultName: 'Docs',
   },
+  previewHead: (head) => `
+    ${head}
+    ${process.env.NODE_ENV === 'production' ? '<link href="./stylex.css" rel="stylesheet" />' : ''}
+  `,
 };
 
 const getPackageStatusEnvVars = () => {