Switch from Webpack to Vite for Storybook

This simplifies the setup and makes it more similar to the "real"
extension setup since it also uses ESBuild (which is also used by Vite).

Author: koesie10

extensions/ql-vscode/.babelrc.json

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
     "./vscode-theme-addon/preset.ts",
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
   docs: {

extensions/ql-vscode/.storybook/main.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 import { useEffect } from "react";
 import type {
   PartialStoryFn as StoryFunction,
@@ -6,31 +8,20 @@ import type {
 
 import { VSCodeTheme } from "./theme";
 
+import darkThemeStyle from "../../src/stories/vscode-theme-dark.css?url";
+import lightThemeStyle from "../../src/stories/vscode-theme-light.css?url";
+import lightHighContrastThemeStyle from "../../src/stories/vscode-theme-light-high-contrast.css?url";
+import darkHighContrastThemeStyle from "../../src/stories/vscode-theme-dark-high-contrast.css?url";
+import githubLightDefaultThemeStyle from "../../src/stories/vscode-theme-github-light-default.css?url";
+import githubDarkDefaultThemeStyle from "../../src/stories/vscode-theme-github-dark-default.css?url";
+
 const themeFiles: { [key in VSCodeTheme]: string } = {
-  [VSCodeTheme.Dark]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-dark.css")
-      .default,
-  [VSCodeTheme.Light]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-light.css")
-      .default,
-  [VSCodeTheme.LightHighContrast]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-light-high-contrast.css")
-      .default,
-  [VSCodeTheme.DarkHighContrast]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-dark-high-contrast.css")
-      .default,
-  [VSCodeTheme.GitHubLightDefault]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-github-light-default.css")
-      .default,
-  [VSCodeTheme.GitHubDarkDefault]:
-    // eslint-disable-next-line @typescript-eslint/no-var-requires,import/no-commonjs,import/no-webpack-loader-syntax
-    require("!file-loader?modules!../../src/stories/vscode-theme-github-dark-default.css")
-      .default,
+  [VSCodeTheme.Dark]: darkThemeStyle,
+  [VSCodeTheme.Light]: lightThemeStyle,
+  [VSCodeTheme.LightHighContrast]: lightHighContrastThemeStyle,
+  [VSCodeTheme.DarkHighContrast]: darkHighContrastThemeStyle,
+  [VSCodeTheme.GitHubLightDefault]: githubLightDefaultThemeStyle,
+  [VSCodeTheme.GitHubDarkDefault]: githubDarkDefaultThemeStyle,
 };
 
 export const withTheme = (StoryFn: StoryFunction, context: StoryContext) => {