allow custom component authors to provide custom vite plugins and svelte preprocessors (#6787)

2025-04-06 12:30:29 +08:00 · 2024-04-25 19:58:42 +01:00 · 2024-04-25 19:58:42 +01:00 · 15a7106a36
commit 15a7106a36
parent 2e469a5f99
12 changed files with 486 additions and 55 deletions
--- a/.changeset/eleven-nails-wait.md
+++ b/.changeset/eleven-nails-wait.md
@ -0,0 +1,7 @@
+---
+"@gradio/preview": minor
+"gradio": minor
+"gradio_test": minor
+---
+
+feat:allow custom component authors to provide custom vite plugins and svelte preprocessors
--- a/gradio/cli/commands/components/_create_utils.py
+++ b/gradio/cli/commands/components/_create_utils.py
@ -285,6 +285,10 @@ def _create_frontend(
    source_package_json = _modify_js_deps(source_package_json, "dependencies", p)
    source_package_json = _modify_js_deps(source_package_json, "devDependencies", p)
    (frontend / "package.json").write_text(json.dumps(source_package_json, indent=2))
+    shutil.copy(
+        str(Path(__file__).parent / "files" / "gradio.config.js"),
+        frontend / "gradio.config.js",
+    )


 def _replace_old_class_name(old_class_name: str, new_class_name: str, content: str):
--- a/gradio/cli/commands/components/files/gradio.config.js
+++ b/gradio/cli/commands/components/files/gradio.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+};
--- a/guides/05_custom-components/05_frontend.md
+++ b/guides/05_custom-components/05_frontend.md
@ -256,6 +256,33 @@ For those interested in design customization, we provide the CSS variables consi

 [Storybook Link](https://gradio.app/main/docs/js/storybook)

+## Custom configuration
+
+If you want to make use of the vast vite ecosystem, you can use the `gradio.config.js` file to configure your component's build process. This allows you to make use of tools like tailwindcss, mdsvex, and more.
+
+Currently, it is possible to configure the following:
+
+Vite options:
+- `plugins`: A list of vite plugins to use.
+
+Svelte options:
+- `preprocess`: A list of svelte preprocessors to use.
+
+The `gradio.config.js` file should be placed in the root of your component's `frontend` directory. A default config file is created for you when you create a new component. But you can also create your own config file and use it to customize your component's build process.
+
+```typescript
+import tailwindcss from "@tailwindcss/vite";
+import { mdsvex } from "mdsvex";
+
+export default {
+    plugins: [tailwindcss()],
+    svelte: {
+        preprocess: [
+            mdsvex()
+        ]
+    }
+};
+```

 ## Conclusion

--- a/js/preview/src/build.ts
+++ b/js/preview/src/build.ts
@ -33,6 +33,22 @@ export async function make_build({
 			const pkg = JSON.parse(
 				fs.readFileSync(join(source_dir, "package.json"), "utf-8")
 			);
+			let component_config = {
+				plugins: [],
+				svelte: {
+					preprocess: []
+				}
+			};
+
+			if (
+				comp.frontend_dir &&
+				fs.existsSync(join(comp.frontend_dir, "gradio.config.js"))
+			) {
+				const m = await import(join(comp.frontend_dir, "gradio.config.js"));
+
+				component_config.plugins = m.default.plugins || [];
+				component_config.svelte.preprocess = m.default.svelte?.preprocess || [];
+			}

 			const exports: string[][] = [
 				["component", pkg.exports["."] as string],
@ -45,7 +61,7 @@ export async function make_build({
 						root: source_dir,
 						configFile: false,
 						plugins: [
-							...plugins,
+							...plugins(component_config),
 							make_gradio_plugin({ mode: "build", svelte_dir })
 						],
 						build: {
--- a/js/preview/src/dev.ts
+++ b/js/preview/src/dev.ts
@ -35,7 +35,11 @@ export async function create_server({
 	python_path
 }: ServerOptions): Promise<void> {
 	process.env.gradio_mode = "dev";
-	const imports = generate_imports(component_dir, root_dir, python_path);
+	const [imports, config] = await generate_imports(
+		component_dir,
+		root_dir,
+		python_path
+	);

 	const svelte_dir = join(root_dir, "assets", "svelte");

@ -55,7 +59,7 @@ export async function create_server({
 				}
 			},
 			plugins: [
-				...plugins,
+				...plugins(config),
 				make_gradio_plugin({
 					mode: "dev",
 					backend_port,
@ -107,11 +111,18 @@ function to_posix(_path: string): string {
 	return _path.replace(/\\/g, "/");
 }

-function generate_imports(
+export interface ComponentConfig {
+	plugins: any[];
+	svelte: {
+		preprocess: unknown[];
+	};
+}
+
+async function generate_imports(
 	component_dir: string,
 	root: string,
 	python_path: string
-): string {
+): Promise<[string, ComponentConfig]> {
 	const components = find_frontend_folders(component_dir);

 	const component_entries = components.flatMap((component) => {
@ -123,6 +134,30 @@ function generate_imports(
 		);
 	}

+	let component_config = {
+		plugins: [],
+		svelte: {
+			preprocess: []
+		}
+	};
+
+	await Promise.all(
+		component_entries.map(async (component) => {
+			if (
+				component.frontend_dir &&
+				fs.existsSync(join(component.frontend_dir, "gradio.config.js"))
+			) {
+				const m = await import(
+					join(component.frontend_dir, "gradio.config.js")
+				);
+
+				component_config.plugins = m.default.plugins || [];
+				component_config.svelte.preprocess = m.default.svelte?.preprocess || [];
+			} else {
+			}
+		})
+	);
+
 	const imports = component_entries.reduce((acc, component) => {
 		const pkg = JSON.parse(
 			fs.readFileSync(join(component.frontend_dir, "package.json"), "utf-8")
@ -151,5 +186,5 @@ function generate_imports(
 			},\n`;
 	}, "");

-	return `{${imports}}`;
+	return [`{${imports}}`, component_config];
 }
--- a/js/preview/src/plugins.ts
+++ b/js/preview/src/plugins.ts
@ -5,6 +5,8 @@ import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
 import sucrase from "@rollup/plugin-sucrase";
 import { createLogger } from "vite";
 import { join } from "path";
+import { type ComponentConfig } from "./dev";
+import type { Preprocessor, PreprocessorGroup } from "svelte/compiler";

 const svelte_codes_to_ignore: Record<string, string> = {
 	"reactive-component": "Icon"
@ -13,46 +15,52 @@ const svelte_codes_to_ignore: Record<string, string> = {
 const RE_SVELTE_IMPORT =
 	/import\s+([\w*{},\s]+)\s+from\s+['"](svelte|svelte\/internal)['"]/g;
 const RE_BARE_SVELTE_IMPORT = /import ("|')svelte(\/\w+)*("|')(;)*/g;
-export const plugins: PluginOption[] = [
-	viteCommonjs() as Plugin,
-	svelte({
-		onwarn(warning, handler) {
-			if (
-				svelte_codes_to_ignore.hasOwnProperty(warning.code) &&
-				svelte_codes_to_ignore[warning.code] &&
-				warning.message.includes(svelte_codes_to_ignore[warning.code])
-			) {
-				return;
-			}
-			handler!(warning);
-		},
-		prebundleSvelteLibraries: false,
-		hot: true,
-		compilerOptions: {
-			discloseVersion: false
-		},
-		preprocess: [
-			{
-				script: ({ attributes, filename, content }) => {
-					if (attributes.lang === "ts") {
-						const compiledCode = transform(content, {
-							transforms: ["typescript"],
-							keepUnusedImports: true
-						});
-						return {
-							code: compiledCode.code,
-							map: compiledCode.sourceMap
-						};
-					}
+export function plugins(config: ComponentConfig): PluginOption[] {
+	const _additional_plugins = config.plugins || [];
+	const _additional_svelte_preprocess = config.svelte?.preprocess || [];
+	return [
+		viteCommonjs() as Plugin,
+		svelte({
+			onwarn(warning, handler) {
+				if (
+					svelte_codes_to_ignore.hasOwnProperty(warning.code) &&
+					svelte_codes_to_ignore[warning.code] &&
+					warning.message.includes(svelte_codes_to_ignore[warning.code])
+				) {
+					return;
 				}
-			}
-		]
-	}) as unknown as Plugin,
-	sucrase({
-		transforms: ["typescript"],
-		include: ["**/*.ts", "**/*.tsx"]
-	}) as unknown as Plugin
-];
+				handler!(warning);
+			},
+			prebundleSvelteLibraries: false,
+			hot: true,
+			compilerOptions: {
+				discloseVersion: false
+			},
+			preprocess: [
+				{
+					script: ({ attributes, filename, content }) => {
+						if (attributes.lang === "ts") {
+							const compiledCode = transform(content, {
+								transforms: ["typescript"],
+								keepUnusedImports: true
+							});
+							return {
+								code: compiledCode.code,
+								map: compiledCode.sourceMap
+							};
+						}
+					}
+				},
+				...(_additional_svelte_preprocess as PreprocessorGroup[])
+			]
+		}) as unknown as Plugin,
+		sucrase({
+			transforms: ["typescript"],
+			include: ["**/*.ts", "**/*.tsx"]
+		}) as unknown as Plugin,
+		..._additional_plugins
+	];
+}

 interface GradioPluginOptions {
 	mode: "dev" | "build";
--- a/js/preview/test/test/frontend/Index.svelte
+++ b/js/preview/test/test/frontend/Index.svelte
@ -1,4 +1,5 @@
 <script lang="ts">
+	import "./main.css";
 	import { JsonView } from "@zerodevx/svelte-json-view";

 	import type { Gradio } from "@gradio/utils";
@ -25,12 +26,88 @@
 	}>;
 </script>

-<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-	/>
-
-	<JsonView json={value} />
-</Block>
+<div class="relative flex min-h-screen flex-col justify-center overflow-hidden">
+	<div
+		class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"
+	>
+		<div class="mx-auto max-w-md">
+			<h1 class="text-xl! font-bold! text-gray-900">
+				<span class="text-blue-500">Tailwind</span> in Gradio
+			</h1>
+			<h2><em>(i hope you're happy now)</em></h2>
+			<div class="divide-y divide-gray-300/50">
+				<div class="space-y-6 py-8 text-base leading-7 text-gray-600">
+					<p>
+						An advanced online playground for Tailwind CSS, including support
+						for things like:
+					</p>
+					<ul class="space-y-4 my-4!">
+						<li class="flex items-center">
+							<svg
+								class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mr-4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="12" cy="12" r="11" />
+								<path
+									d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9"
+									fill="none"
+								/>
+							</svg>
+							<p class="ml-4">
+								Customizing your
+								<code class="text-sm font-bold text-gray-900"
+									>tailwind.config.js</code
+								> file
+							</p>
+						</li>
+						<li class="flex items-center">
+							<svg
+								class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mr-4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="12" cy="12" r="11" />
+								<path
+									d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9"
+									fill="none"
+								/>
+							</svg>
+							<p class="ml-4">
+								Extracting classes with
+								<code class="text-sm font-bold text-gray-900">@apply</code>
+							</p>
+						</li>
+						<li class="flex items-center">
+							<svg
+								class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mr-4"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<circle cx="12" cy="12" r="11" />
+								<path
+									d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9"
+									fill="none"
+								/>
+							</svg>
+							<p class="ml-4">Code completion with instant preview</p>
+						</li>
+					</ul>
+					<p>
+						Perfect for learning how the framework works, prototyping a new
+						idea, or creating a demo to share online.
+					</p>
+				</div>
+				<div class="pt-8 text-base font-semibold leading-7">
+					<p class="text-gray-900">Want to dig deeper into Tailwind?</p>
+					<p>
+						<a
+							href="https://tailwindcss.com/docs"
+							class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a
+						>
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/js/preview/test/test/frontend/gradio.config.js
+++ b/js/preview/test/test/frontend/gradio.config.js
@ -0,0 +1,8 @@
+import tailwindcss from "@tailwindcss/vite";
+
+export default {
+	plugins: [tailwindcss()],
+	svelte: {
+		preprocess: require("svelte-preprocess")()
+	}
+};
--- a/js/preview/test/test/frontend/main.css
+++ b/js/preview/test/test/frontend/main.css
@ -0,0 +1 @@
+@import "tailwindcss";
--- a/js/preview/test/test/frontend/package.json
+++ b/js/preview/test/test/frontend/package.json
@ -19,6 +19,8 @@
 		"@zerodevx/svelte-json-view": "^1.0.7"
 	},
 	"devDependencies": {
-		"@gradio/preview": "workspace:^"
+		"@gradio/preview": "workspace:^",
+		"@tailwindcss/vite": "4.0.0-alpha.14",
+		"tailwindcss": "4.0.0-alpha.14"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -1477,6 +1477,27 @@ importers:
      '@gradio/preview':
        specifier: workspace:^
        version: link:../../..
+      '@tailwindcss/vite':
+        specifier: 4.0.0-alpha.14
+        version: 4.0.0-alpha.14(vite@5.2.9)
+      tailwindcss:
+        specifier: 4.0.0-alpha.14
+        version: 4.0.0-alpha.14
+
+  js/preview/test/testyyyy/frontend:
+    dependencies:
+      '@gradio/atoms':
+        specifier: workspace:^
+        version: link:../../../../atoms
+      '@gradio/statustracker':
+        specifier: workspace:^
+        version: link:../../../../statustracker
+      '@gradio/utils':
+        specifier: workspace:^
+        version: link:../../../../utils
+      '@zerodevx/svelte-json-view':
+        specifier: ^1.0.7
+        version: 1.0.7(svelte@4.2.12)

  js/radio:
    dependencies:
@ -6618,6 +6639,112 @@ packages:
      mini-svg-data-uri: 1.4.4
      tailwindcss: 3.1.6(postcss@8.4.31)

+  /@tailwindcss/oxide-android-arm64@4.0.0-alpha.14:
+    resolution: {integrity: sha512-9ssgbWrn0VwcEtni5aBVrP/QXPWhpryXs4HJlqTz1HQTdjWHBF8bObBKxeixq3vVACLvjHm922jHirpvejiUYQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-darwin-arm64@4.0.0-alpha.14:
+    resolution: {integrity: sha512-TMbwZb2Jg5Xf0KtYRp0CoVzNdTrOGZkhPcdIPbqkHouzhtvynyd/iD6e4aCpm0RqPICg3MLguPu81kO3lEJu9g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-darwin-x64@4.0.0-alpha.14:
+    resolution: {integrity: sha512-aOPlkpptgDmCRbbqqYYhotnFvVDMQ8x6VjRp2kDVNdEtzoCLClAjDutERIC7CGUusX796RvGPLgkKd8YWNi+8w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-freebsd-x64@4.0.0-alpha.14:
+    resolution: {integrity: sha512-YVgGduxowoA0qqTvsMZLfTAVm7mwwixlyuTTDyoQiQc4gXm3HhIamFTEiAY9xafUZysbdPMs+ITxXFb22SxIUg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0-alpha.14:
+    resolution: {integrity: sha512-avhbIj1rsXX5VSGlv29wdbNumPjPz86IBmbTRbAbXV6PRqGIDPika/0TZGo3IDAaevsXU2xc1HkVqBeZ/Hj5AQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-gnu@4.0.0-alpha.14:
+    resolution: {integrity: sha512-NQKcFIb3xii3CSusisWR/0EH1sJfvF6I90XGi+geTdHXv77bU/McpMshrtPMcMHkbQqVlJbnJ2ttDN+zae3lcA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-musl@4.0.0-alpha.14:
+    resolution: {integrity: sha512-bUYWc/jA5Kx2pESuGO7gRA5L1Hy/Jo8/ERbs/Pq5aXdNN+lllh4OEKCCjb02GSQvj7jsmPt8OAJifcur7sYUdg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-gnu@4.0.0-alpha.14:
+    resolution: {integrity: sha512-+FCUYOLBU9KTCxAY2NNfVgsvJ1dbNfTuhV13iIsrXTuEvu/P69H8YJzoiNB5oTPPgrKnClVj/KWw9n+GycHvEQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-musl@4.0.0-alpha.14:
+    resolution: {integrity: sha512-zl3iXwC1of+7pCyByIvYpQ88JZrwfWT0dETfJHuWYSuO8NSjU93oQHFV79UZTYqD9XkUevrQBNQCd5s5/7QS8g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-win32-x64-msvc@4.0.0-alpha.14:
+    resolution: {integrity: sha512-IKaiQO/XxpuCv7ZpVngMaJEoswCqM7ncByHY68YRXkNH1tBVJl1H2Hz/jej7ziBlvEDvBY4qFgeJJAhh/tOiMQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide@4.0.0-alpha.14:
+    resolution: {integrity: sha512-KpYsgwFd1I9UeqoCtBF62KXYKkp1RuxJm26M0EGTHVvUV+Cln0KZaouKJ1/7mqH8hD/TrzIwX5cGVMb2ShM4Qg==}
+    engines: {node: '>= 10'}
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.0-alpha.14
+      '@tailwindcss/oxide-darwin-arm64': 4.0.0-alpha.14
+      '@tailwindcss/oxide-darwin-x64': 4.0.0-alpha.14
+      '@tailwindcss/oxide-freebsd-x64': 4.0.0-alpha.14
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.0-alpha.14
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.0-alpha.14
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.0-alpha.14
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.0-alpha.14
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.0-alpha.14
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.0-alpha.14
+    dev: true
+
  /@tailwindcss/typography@0.5.4(tailwindcss@3.1.6):
    resolution: {integrity: sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==}
    peerDependencies:
@ -6629,6 +6756,17 @@ packages:
      tailwindcss: 3.1.6(postcss@8.4.31)
    dev: true

+  /@tailwindcss/vite@4.0.0-alpha.14(vite@5.2.9):
+    resolution: {integrity: sha512-tvKPP948JrgSR1Ig5ogLYEn1h4FW36W3p0eCGFGJV++NF7QsBh0j98HydrhvQDxsC9jZ037yGWUOc4VPMbt22g==}
+    peerDependencies:
+      vite: ^5.2.0
+    dependencies:
+      '@tailwindcss/oxide': 4.0.0-alpha.14
+      lightningcss: 1.24.1
+      tailwindcss: 4.0.0-alpha.14
+      vite: 5.2.9(@types/node@20.3.2)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1)
+    dev: true
+
  /@testing-library/dom@10.0.0:
    resolution: {integrity: sha512-PmJPnogldqoVFf+EwbHvbBJ98MmqASV8kLrBYgsDNxQcFMeIS7JFL48sfyXvuMtgmWO/wMhh25odr+8VhDmn4g==}
    engines: {node: '>=18'}
@ -11210,6 +11348,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-darwin-arm64@1.24.1:
+    resolution: {integrity: sha512-1jQ12jBy+AE/73uGQWGSafK5GoWgmSiIQOGhSEXiFJSZxzV+OXIx+a9h2EYHxdJfX864M+2TAxWPWb0Vv+8y4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-darwin-x64@1.21.7:
    resolution: {integrity: sha512-F4gS4bf7eWekfPT+TxJNm/pF+QRgZiTrTkQH6cw4/UWfdeZISfuhD5El2dm16giFnY0K5ylIwO+ZusgYNkGSXA==}
    engines: {node: '>= 12.0.0'}
@ -11218,6 +11365,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-darwin-x64@1.24.1:
+    resolution: {integrity: sha512-R4R1d7VVdq2mG4igMU+Di8GPf0b64ZLnYVkubYnGG0Qxq1KaXQtAzcLI43EkpnoWvB/kUg8JKCWH4S13NfiLcQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-freebsd-x64@1.21.7:
    resolution: {integrity: sha512-RMfNzJWXCSfPnL55fcLWEAadcY6QUFT0S8NceNKYzp1KiCZtkJIy6RQ5SaVxPzRqd3iMsahUf5sfnG8N1UQSNQ==}
    engines: {node: '>= 12.0.0'}
@ -11226,6 +11382,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-freebsd-x64@1.24.1:
+    resolution: {integrity: sha512-z6NberUUw5ALES6Ixn2shmjRRrM1cmEn1ZQPiM5IrZ6xHHL5a1lPin9pRv+w6eWfcrEo+qGG6R9XfJrpuY3e4g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-linux-arm-gnueabihf@1.21.7:
    resolution: {integrity: sha512-biSRUDZNx7vubWP1jArw/qqfZKPGpkV/qzunasZzxmqijbZ43sW9faDQYxWNcxPWljJJdF/qs6qcurYFovWtrQ==}
    engines: {node: '>= 12.0.0'}
@ -11234,6 +11399,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-linux-arm-gnueabihf@1.24.1:
+    resolution: {integrity: sha512-NLQLnBQW/0sSg74qLNI8F8QKQXkNg4/ukSTa+XhtkO7v3BnK19TS1MfCbDHt+TTdSgNEBv0tubRuapcKho2EWw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-linux-arm64-gnu@1.21.7:
    resolution: {integrity: sha512-PENY8QekqL9TG3AY/A7rkUBb5ymefGxea7Oe7+x7Hbw4Bz4Hpj5cec5OoMypMqFbURPmpi0fTWx4vSWUPzpDcA==}
    engines: {node: '>= 12.0.0'}
@ -11242,6 +11416,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-linux-arm64-gnu@1.24.1:
+    resolution: {integrity: sha512-AQxWU8c9E9JAjAi4Qw9CvX2tDIPjgzCTrZCSXKELfs4mCwzxRkHh2RCxX8sFK19RyJoJAjA/Kw8+LMNRHS5qEg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-linux-arm64-musl@1.21.7:
    resolution: {integrity: sha512-pfOipKvA/0X1OjRaZt3870vnV9UGBSjayIqHh0fGx/+aRz3O0MVFHE/60P2UWXpM3YGJEw/hMWtNkrFwqOge8A==}
    engines: {node: '>= 12.0.0'}
@ -11250,6 +11433,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-linux-arm64-musl@1.24.1:
+    resolution: {integrity: sha512-JCgH/SrNrhqsguUA0uJUM1PvN5+dVuzPIlXcoWDHSv2OU/BWlj2dUYr3XNzEw748SmNZPfl2NjQrAdzaPOn1lA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-linux-x64-gnu@1.21.7:
    resolution: {integrity: sha512-dgcsis4TAA7s0ia4f31QHX+G4PWPwxk+wJaEQLaV0NdJs09O5hHoA8DpLEr8nrvc/tsRTyVNBP1rDtgzySjpXg==}
    engines: {node: '>= 12.0.0'}
@ -11258,6 +11450,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-linux-x64-gnu@1.24.1:
+    resolution: {integrity: sha512-TYdEsC63bHV0h47aNRGN3RiK7aIeco3/keN4NkoSQ5T8xk09KHuBdySltWAvKLgT8JvR+ayzq8ZHnL1wKWY0rw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-linux-x64-musl@1.21.7:
    resolution: {integrity: sha512-A+9dXpxld3p4Cd6fxev2eqEvaauYtrgNpXV3t7ioCJy30Oj9nYiNGwiGusM+4MJVcEpUPGUGiuAqY4sWilRDwA==}
    engines: {node: '>= 12.0.0'}
@ -11266,6 +11467,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-linux-x64-musl@1.24.1:
+    resolution: {integrity: sha512-HLfzVik3RToot6pQ2Rgc3JhfZkGi01hFetHt40HrUMoeKitLoqUUT5owM6yTZPTytTUW9ukLBJ1pc3XNMSvlLw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss-win32-x64-msvc@1.21.7:
    resolution: {integrity: sha512-07/8vogEq+C/mF99pdMhh/f19/xreq8N9Ca6AWeVHZIdODyF/pt6KdKSCWDZWIn+3CUxI8gCJWuUWyOc3xymvw==}
    engines: {node: '>= 12.0.0'}
@ -11274,6 +11484,15 @@ packages:
    requiresBuild: true
    optional: true

+  /lightningcss-win32-x64-msvc@1.24.1:
+    resolution: {integrity: sha512-joEupPjYJ7PjZtDsS5lzALtlAudAbgIBMGJPNeFe5HfdmJXFd13ECmEM+5rXNxYVMRHua2w8132R6ab5Z6K9Ow==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /lightningcss@1.21.7:
    resolution: {integrity: sha512-xITZyh5sLFwRPYUSw15T00Rm7gcQ1qOPuQwNOcvHsTm6nLWTQ723w7zl42wrC5t+xtdg6FPmnXHml1nZxxvp1w==}
    engines: {node: '>= 12.0.0'}
@ -11290,6 +11509,23 @@ packages:
      lightningcss-linux-x64-musl: 1.21.7
      lightningcss-win32-x64-msvc: 1.21.7

+  /lightningcss@1.24.1:
+    resolution: {integrity: sha512-kUpHOLiH5GB0ERSv4pxqlL0RYKnOXtgGtVe7shDGfhS0AZ4D1ouKFYAcLcZhql8aMspDNzaUCumGHZ78tb2fTg==}
+    engines: {node: '>= 12.0.0'}
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.24.1
+      lightningcss-darwin-x64: 1.24.1
+      lightningcss-freebsd-x64: 1.24.1
+      lightningcss-linux-arm-gnueabihf: 1.24.1
+      lightningcss-linux-arm64-gnu: 1.24.1
+      lightningcss-linux-arm64-musl: 1.24.1
+      lightningcss-linux-x64-gnu: 1.24.1
+      lightningcss-linux-x64-musl: 1.24.1
+      lightningcss-win32-x64-msvc: 1.24.1
+    dev: true
+
  /lilconfig@2.1.0:
    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
    engines: {node: '>=10'}
@ -14098,6 +14334,10 @@ packages:
    transitivePeerDependencies:
      - ts-node

+  /tailwindcss@4.0.0-alpha.14:
+    resolution: {integrity: sha512-7qAhQPrsWyaaDk0IjOEhTEdgDWsN0MjB3kk38DxK5vXqPJ7C57FYlARA6vrE36WL0K/mYdAA54vWJbWbDfoVcQ==}
+    dev: true
+
  /tar-fs@2.1.1:
    resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
    dependencies: