@vendure/dashboard 3.3.5-master-202506250727 → 3.3.5-master-202506251305

package/vite/vite-plugin-tailwind-source.ts

@@ -0,0 +1,65 @@
+import path from 'path';
+import { Plugin } from 'vite';
+
+import { LoadVendureConfigResult } from './utils/config-loader.js';
+import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
+
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export function dashboardTailwindSourcePlugin(): Plugin {
+    let configLoaderApi: ConfigLoaderApi;
+    let loadVendureConfigResult: LoadVendureConfigResult;
+    return {
+        name: 'vendure:dashboard-tailwind-source',
+        // Ensure this plugin runs before Tailwind CSS processing
+        enforce: 'pre',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async transform(src, id) {
+            if (/app\/styles.css$/.test(id)) {
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                }
+                const { pluginInfo } = loadVendureConfigResult;
+                const dashboardExtensionDirs =
+                    pluginInfo
+                        ?.map(
+                            ({ dashboardEntryPath, pluginPath }) =>
+                                dashboardEntryPath && path.join(pluginPath, path.dirname(dashboardEntryPath)),
+                        )
+                        .filter(x => x != null) ?? [];
+                const sources = dashboardExtensionDirs
+                    .map(extension => {
+                        return `@source '${extension}';`;
+                    })
+                    .join('\n');
+
+                // Find the line with the specific comment and insert sources after it
+                const lines = src.split('\n');
+                const sourceCommentIndex = lines.findIndex(line =>
+                    line.includes(
+                        '/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */',
+                    ),
+                );
+
+                if (sourceCommentIndex !== -1) {
+                    // Insert the sources after the comment line
+                    lines.splice(sourceCommentIndex + 1, 0, sources);
+                    const modifiedSrc = lines.join('\n');
+                    return {
+                        code: modifiedSrc,
+                    };
+                }
+
+                // If the comment is not found, append sources at the end
+                return {
+                    code: src + '\n' + sources,
+                };
+            }
+        },
+    };
+}

package/vite/vite-plugin-vendure-dashboard.ts

@@ -10,9 +10,10 @@ import { configLoaderPlugin } from './vite-plugin-config-loader.js';
 import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
-import { ThemeVariablesPluginOptions, themeVariablesPlugin } from './vite-plugin-theme.js';
+import { dashboardTailwindSourcePlugin } from './vite-plugin-tailwind-source.js';
+import { themeVariablesPlugin, ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
 import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
-import { UiConfigPluginOptions, uiConfigPlugin } from './vite-plugin-ui-config.js';
+import { uiConfigPlugin, UiConfigPluginOptions } from './vite-plugin-ui-config.js';
 
 /**
  * @description
@@ -121,6 +122,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
             // },
         }),
         themeVariablesPlugin({ theme: options.theme }),
+        dashboardTailwindSourcePlugin(),
         tailwindcss(),
         configLoaderPlugin({
             vendureConfigPath: normalizedVendureConfigPath,
@@ -130,7 +132,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
         }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
-        dashboardMetadataPlugin({ rootDir: tempDir }),
+        dashboardMetadataPlugin(),
         uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]