Transform theme import paths for window support

Refs: #7995

Author: sdvg

packages/samples/react/src/react.main.tsx

@@ -8,6 +8,7 @@ import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BWSt, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
 import { App } from './App';
+import { transformUncPathIfNecessary } from './shares/transformUncPathIfNecessary';
 
 import type { Generic } from 'adopted-style-sheets';
 
@@ -30,6 +31,7 @@ if (ENABLE_TAG_NAME_TRANSFORMER) {
 const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
+		process.env.THEME_MODULE = transformUncPathIfNecessary(process.env.THEME_MODULE); // process.env.THEME_MODULE must be used literally in the import(). Moving it to a constant breaks the import.
 		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(/* @vite-ignore */ process.env.THEME_MODULE)) as Record<string, Theme>;
 		return [theme];
 	}

packages/samples/react/src/shares/transformUncPathIfNecessary.ts

@@ -0,0 +1,38 @@
+/**
+ * Transforms a UNC-style path to a proper file URL format for browser usage on Windows systems.
+ *
+ * This function handles the conversion of UNC paths (Universal Naming Convention) that are commonly
+ * used in Windows environments. UNC paths typically start with double backslashes and include a
+ * server or drive specification.
+ *
+ * @param {string} uncPath - The UNC-style path to transform (e.g., "//c/path/to/file")
+ * @returns {string} The transformed path suitable for browser usage:
+ *                  - On Windows: Returns path in format "/C:/path/to/file/" with uppercase drive letter
+ *                  - On non-Windows platforms: Returns the original path unchanged
+ *
+ * @example
+ * // Windows platform
+ * transformUncPathIfNecessary("//c/users/documents/file.txt")
+ * // Returns: "/C:/users/documents/file.txt"
+ *
+ * // Non-Windows platform
+ * transformUncPathIfNecessary("//c/users/documents/file.txt")
+ * // Returns: "//c/users/documents/file.txt" (unchanged)
+ */
+export function transformUncPathIfNecessary(uncPath: string): string {
+	if (process.env.PLATFORM !== 'win32') {
+		return uncPath;
+	}
+
+	// Remove leading // and split by /
+	const parts = uncPath.replace(/^\/\//, '').split('/');
+
+	// Extract drive letter and convert to uppercase
+	const driveLetter = parts[0].toUpperCase();
+
+	// Reconstruct the path with proper format
+	const pathParts = parts.slice(1);
+	const path = pathParts.join('/');
+
+	return `/${driveLetter}:/${path}`;
+}

packages/samples/react/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import { execSync } from 'node:child_process';
 import react from '@vitejs/plugin-react-swc';
 import UnoCSS from '@unocss/vite';
+import process from 'process';
 
 function getGitCommitHash(): string | null {
 	try {
@@ -21,6 +22,7 @@ export default defineConfig({
 		'process.env.ENABLE_THEME_PATCHING': JSON.stringify(process.env.ENABLE_THEME_PATCHING || ''),
 		'process.env.BUILD_DATE': JSON.stringify(new Date().toISOString()),
 		'process.env.COMMIT_HASH': JSON.stringify(getGitCommitHash()),
+		'process.env.PLATFORM': JSON.stringify(process.platform),
 	},
 	build: {
 		sourcemap: true,