vendure/packages/dashboard/vite/vite-plugin-tailwind-source.ts

import path from 'path';
import { Plugin } from 'vite';

import { CompileResult } from './utils/compiler.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: CompileResult;
    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
                        ?.flatMap(({ dashboardEntryPath, sourcePluginPath, pluginPath }) => {
                            if (!dashboardEntryPath) {
                                return [];
                            }
                            const sourcePaths = [];
                            if (sourcePluginPath) {
                                sourcePaths.push(
                                    path.join(
                                        path.dirname(sourcePluginPath),
                                        path.dirname(dashboardEntryPath),
                                    ),
                                );
                            }
                            if (pluginPath) {
                                sourcePaths.push(
                                    path.join(path.dirname(pluginPath), path.dirname(dashboardEntryPath)),
                                );
                            }
                            return sourcePaths;
                        })
                        .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,
                };
            }
        },
    };
}