@wavemaker/react-codegen 11.14.1-rc.240 → 11.14.2-rc.6311

package/src/gen-app-override-css.js

@@ -33,276 +33,347 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OVERRIDE_TOKENS_PATH = exports.APP_OVERRIDE_CSS_PATH = exports.DESIGN_TOKENS_DIR_NAME = void 0;
-exports.generateOverrideCSS = generateOverrideCSS;
-const fs = __importStar(require("fs"));
+exports.generateOverrideCSS = void 0;
 const path = __importStar(require("path"));
-const project_service_1 = require("./project.service");
+const fs = __importStar(require("fs"));
+const url_1 = require("url");
+const download_packages_1 = require("./download-packages");
 const utils_1 = require("./utils");
-// Constants
-exports.DESIGN_TOKENS_DIR_NAME = "design-tokens";
-exports.APP_OVERRIDE_CSS_PATH = `${exports.DESIGN_TOKENS_DIR_NAME}/app.override.css`;
-exports.OVERRIDE_TOKENS_PATH = `${exports.DESIGN_TOKENS_DIR_NAME}/overrides`;
-/**
- * Install a package if it's not already installed
- * @param projectRoot project root directory
- * @param packageName name of the package to install
- * @param version version of the package
- */
-async function installPackageIfNeeded(projectRoot, packageName, version) {
-    const packagePath = path.join(projectRoot, "node_modules", packageName);
-    if (!fs.existsSync(packagePath)) {
-        console.log(`Installing ${packageName}@${version}...`);
-        const installCmd = `npm install ${packageName}@${version} --save-dev --legacy-peer-deps`;
-        (0, utils_1.executeSyncCmd)(`cd ${projectRoot} && ${installCmd}`, (errMsg) => {
-            console.log(`Error installing ${packageName}:`, errMsg);
-            throw Error(errMsg);
-        }, `Installing ${packageName}: `);
-        console.log(`Successfully installed ${packageName}@${version}`);
+const dynamicImport = new Function("specifier", "return import(specifier);");
+const importFromFile = async (modulePath) => {
+    const moduleUrl = (0, url_1.pathToFileURL)(modulePath).href;
+    return dynamicImport(moduleUrl);
+};
+const groupFilesByMode = (directory) => {
+    const modeGroups = {
+        default: [], // files without a mode in the name
+    };
+    const items = fs.readdirSync(directory);
+    items.forEach((item) => {
+        const itemPath = path.join(directory, item);
+        const stats = fs.statSync(itemPath);
+        if (stats.isDirectory()) {
+            // Recursively collect from subdirectories
+            const subGroup = groupFilesByMode(itemPath);
+            for (const mode in subGroup) {
+                if (!modeGroups[mode]) {
+                    modeGroups[mode] = [];
+                }
+                modeGroups[mode].push(...subGroup[mode]);
+            }
+        }
+        else if (stats.isFile() && path.extname(itemPath) === ".json") {
+            const match = item.match(/\.([^.]+)\.json$/); // Matches ".dark.json" or ".light.json"
+            if (match) {
+                const mode = match[1]; // 'dark' or 'light' etc.
+                if (!modeGroups[mode]) {
+                    modeGroups[mode] = [];
+                }
+                modeGroups[mode].push(itemPath);
+            }
+            else {
+                modeGroups.default.push(itemPath);
+            }
+        }
+    });
+    return modeGroups;
+};
+const generateModeConfigs = (modeGroups, sourceDir, cssVarCalcMixFormatter, componentVariantsFormatter) => {
+    const baseCssFormatName = (cssVarCalcMixFormatter && cssVarCalcMixFormatter.name) || "css/variables";
+    const variantCssFormatName = (componentVariantsFormatter && componentVariantsFormatter.name) || "css/variables";
+    const configs = [];
+    for (const mode in modeGroups) {
+        const tokenFiles = modeGroups[mode];
+        const buildPaths = tokenFiles.flatMap((filePath) => {
+            const relativePath = filePath.replace(sourceDir + "/", "");
+            return [
+                {
+                    destination: relativePath.replace(/\.json$/, ".css"),
+                    options: { outputReferences: true, selector: ":root" },
+                    format: baseCssFormatName,
+                    filter: function (token) {
+                        var tokenPath;
+                        // Extract file path from token['@'].filePath (used in some token formats) or fallback to token.filePath.
+                        if (token["@"] && token["@"].filePath) {
+                            tokenPath = token["@"].filePath;
+                        }
+                        else {
+                            tokenPath = token.filePath;
+                        }
+                        // normalize paths for Windows
+                        const normalizePath = (p) => (p ? p.replace(/\\/g, "/") : p);
+                        tokenPath = normalizePath(tokenPath);
+                        filePath = normalizePath(filePath);
+                        // Only include tokens originating from "overrides" files (i.e., filter out foundation CSS tokens)
+                        var isOverrideToken = (tokenPath && tokenPath.indexOf("overrides") !== -1) ||
+                            (token.filePath && token.filePath.indexOf("overrides") !== -1);
+                        // Ensure the token is written only to the correct CSS file
+                        var matchesOutputFile = tokenPath &&
+                            (filePath.includes(tokenPath) || filePath.includes(normalizePath(token.filePath))) &&
+                            !token.path.includes("appearances") &&
+                            !token.path.includes("states");
+                        return isOverrideToken && matchesOutputFile;
+                    },
+                },
+                {
+                    destination: relativePath.replace(/\.json$/, "variant.css"),
+                    options: { outputReferences: true, selector: ":root" },
+                    format: variantCssFormatName,
+                    filter: (token) => {
+                        let tokenPath;
+                        if (token["@"] && token["@"].filePath) {
+                            tokenPath = token["@"].filePath;
+                        }
+                        else {
+                            tokenPath = token.filePath;
+                        }
+                        const isOverrideToken = tokenPath && tokenPath.indexOf("overrides") !== -1;
+                        const matchesOutputFile = tokenPath &&
+                            (filePath.includes(tokenPath) || filePath.includes(token.filePath)) &&
+                            (token.path.includes("appearances") || token.path.includes("states"));
+                        return isOverrideToken && matchesOutputFile;
+                    },
+                },
+            ];
+        });
+        configs.push({
+            mode,
+            files: buildPaths,
+        });
+    }
+    return configs;
+};
+const accessFile = (filePath) => {
+    const dirPath = path.dirname(filePath); // Get directory from file path
+    // Ensure the directory exists
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+        console.log(`Directory created: ${dirPath}`);
+    }
+    fs.access(filePath, fs.constants.F_OK, err => {
+        if (err) {
+            console.log(`${filePath} does not exist. Creating file...`);
+            // File does not exist, create it
+            const fileContent = JSON.stringify({});
+            fs.writeFile(filePath, fileContent, err => {
+                if (err)
+                    throw err;
+                console.log(`${filePath} was created successfully.`);
+            });
+        }
+    });
+};
+async function setupSymlink(from, to) {
+    try {
+        // Ensure the parent directory of the symlink exists
+        await fs.promises.mkdir(path.dirname(to), { recursive: true });
+        try {
+            if (fs.existsSync(to))
+                await fs.promises.unlink(to);
+        }
+        catch (unlinkErr) {
+            console.error("Error removing existing symlink:", unlinkErr);
+        }
+        // Create the symlink
+        const isWindows = process.platform === "win32";
+        const symlinkType = isWindows ? "junction" : "dir";
+        await fs.promises.symlink(from, to, symlinkType);
+        console.log("Symlink created successfully at:", to);
+    }
+    catch (err) {
+        console.error("Error creating symlink:", to, err);
+    }
+}
+// Function to generate Style Dictionary configuration
+const getStyleDictionaryConfig = (files, tempFoundationTokensSymlink, mode, sourceDir) => {
+    if (!sourceDir.endsWith("/")) {
+        sourceDir += "/";
+    }
+    let sourcePattern = "";
+    if (mode === "default") {
+        // Files without any mode like dark/light in the name
+        sourcePattern = `${sourceDir}/src/main/webapp/${utils_1.OVERRIDE_TOKENS_PATH}/**/!(*.*).json`;
     }
     else {
-        console.log(`${packageName} already installed`);
+        // Files like *.dark.json or *.light.json
+        sourcePattern = `${sourceDir}/src/main/webapp/${utils_1.OVERRIDE_TOKENS_PATH}/**/*.${mode}.json`;
+    }
+    return {
+        log: {
+            verbosity: "verbose",
+        },
+        source: [sourcePattern],
+        include: [
+            `${tempFoundationTokensSymlink.replace(/\\/g, "/")}/**/!(*.dark|*.light).json`,
+            `${sourceDir.replace(/\\/g, "/")}/src/main/webapp/${utils_1.OVERRIDE_TOKENS_PATH}/global/**/*.json`,
+        ],
+        platforms: {
+            css: {
+                transformGroup: "css",
+                prefix: "--wm",
+                files: files,
+            },
+        },
+    };
+};
+async function removeSymlink(symlinkPath) {
+    const resolvedPath = path.resolve(symlinkPath);
+    try {
+        const stats = fs.lstatSync(resolvedPath);
+        if (stats.isSymbolicLink()) {
+            await fs.promises.unlink(resolvedPath);
+            console.log("Symlink removed successfully:", resolvedPath);
+        }
+        else {
+            console.warn("Not a symlink, skipping unlink:", resolvedPath);
+        }
+    }
+    catch (err) {
+        console.error("Error during symlink removal:", err);
+    }
+}
+async function getCustomFormatters(STYLE_DICTIONARY_PATH, FOUNDATION_CSS_PATH) {
+    try {
+        // Import utils from Style Dictionary
+        const utilsModule = await importFromFile(`${STYLE_DICTIONARY_PATH}/node_modules/style-dictionary/lib/utils/index.js`);
+        const { usesReferences, getReferences } = utilsModule;
+        // Import formatter utility from foundation-css
+        const formatterModule = await importFromFile(`${FOUNDATION_CSS_PATH}/node_modules/@wavemaker/foundation-css/src/utils/style-dictionary-utils.js`);
+        const { cssVarCalcMixFormatter, componentVariantsFormatter } = formatterModule;
+        const platform = "web";
+        return {
+            cssVarCalcMixFormatter: cssVarCalcMixFormatter(usesReferences, getReferences),
+            componentVariantsFormatter: componentVariantsFormatter(usesReferences, getReferences, platform),
+        };
+    }
+    catch (error) {
+        console.error("Failed to load CssVarCalcMixFormatter:", error);
+        return null;
     }
 }
 /**
- * Process a single override JSON file to generate CSS variables
- * @param jsonFilePath path to the override JSON file
- * @param foundationTokensDir path to foundation tokens
- * @param baseDir base directory
- * @returns map of token name to value
+ * Processes an array of CSS files, merges :root blocks for light mode,
+ * and appends others with dynamic attribute selectors.
+ * @param {Array<{destination: string}>} files - List of file objects with destination paths.
+ * @returns {string} Combined CSS content after processing all files.
  */
-async function processOverrideFile(jsonFilePath, foundationTokensDir, baseDir) {
-    const tokens = new Map();
-    try {
-        // Read override file
-        const content = JSON.parse(fs.readFileSync(jsonFilePath, "utf-8"));
-        // Read foundation tokens for reference resolution
-        const foundationTokens = new Map();
-        function loadFoundationTokens(dir, prefix = "") {
-            if (!fs.existsSync(dir))
-                return;
-            const items = fs.readdirSync(dir);
-            items.forEach(item => {
-                const itemPath = path.join(dir, item);
-                const stat = fs.statSync(itemPath);
-                if (stat.isDirectory()) {
-                    loadFoundationTokens(itemPath, prefix ? `${prefix}-${item}` : item);
+function processCSSFiles(files, cssFileContent) {
+    for (const { destination } of files) {
+        try {
+            if (destination.endsWith(".css") && fs.existsSync(destination)) {
+                const fileContent = fs.readFileSync(destination, "utf-8");
+                const rootBlockPattern = /(:root\s*\{[^}]*\})/;
+                const fileName = path.basename(destination); // Get file name
+                const fileNameArgs = fileName.split("."); // Split by '.'
+                let modifiedCSS = fileContent;
+                // e.g., color.dark.css → add [color='dark']
+                if (fileNameArgs.length === 3 && fileNameArgs[1] !== "light") {
+                    const attributeName = fileNameArgs[0];
+                    const attributeValue = fileNameArgs[1];
+                    modifiedCSS = fileContent.replace(/:root/g, `:root[${attributeName}='${attributeValue}']`);
+                    cssFileContent += modifiedCSS + "\n";
                 }
-                else if (item.endsWith(".json") && !item.includes(".dark") && !item.includes(".light")) {
-                    try {
-                        const tokenContent = JSON.parse(fs.readFileSync(itemPath, "utf-8"));
-                        flattenTokens(tokenContent, foundationTokens, prefix ? `${prefix}-${path.basename(item, ".json")}` : path.basename(item, ".json"));
-                    }
-                    catch (error) {
-                        // Skip invalid JSON files
-                    }
-                }
-            });
-        }
-        function flattenTokens(obj, tokenMap, prefix = "") {
-            for (const [key, value] of Object.entries(obj)) {
-                if (value && typeof value === "object" && !Array.isArray(value)) {
-                    if (value.value !== undefined) {
-                        // This is a token definition
-                        const tokenName = prefix ? `${prefix}.${key}` : key;
-                        tokenMap.set(tokenName, value.value);
+                else {
+                    // Merge :root blocks for light/default mode
+                    const existingRootMatch = cssFileContent.match(rootBlockPattern);
+                    const newRootMatch = fileContent.match(rootBlockPattern);
+                    if (existingRootMatch && newRootMatch) {
+                        const existingRoot = existingRootMatch[1];
+                        const newVariables = newRootMatch[1].replace(/:root\s*\{|\}/g, "").trim();
+                        const mergedRoot = existingRoot.replace("}", `\n${newVariables}\n}`);
+                        cssFileContent = cssFileContent.replace(existingRoot, mergedRoot);
                     }
                     else {
-                        // Continue traversing
-                        const newPrefix = prefix ? `${prefix}.${key}` : key;
-                        flattenTokens(value, tokenMap, newPrefix);
+                        cssFileContent += modifiedCSS + "\n";
                     }
                 }
+                // Delete the processed file
+                fs.unlink(destination, () => { });
             }
         }
-        // Load foundation tokens
-        loadFoundationTokens(foundationTokensDir);
-        // Process override tokens
-        function processTokens(obj, prefix = "") {
-            for (const [key, value] of Object.entries(obj)) {
-                if (value && typeof value === "object" && !Array.isArray(value)) {
-                    if (value.value !== undefined) {
-                        // This is a token definition - skip @ keys for token names
-                        const cleanKey = key === "@" ? "" : key;
-                        const tokenName = cleanKey
-                            ? `--wm-${prefix ? `${prefix}-${cleanKey}` : cleanKey}`
-                            : `--wm-${prefix}`;
-                        let tokenValue = value.value;
-                        // Resolve references like {color.white.@.value} to CSS variables
-                        if (typeof tokenValue === "string" &&
-                            tokenValue.includes("{") &&
-                            tokenValue.includes("}")) {
-                            const referenceMatch = tokenValue.match(/\{([^}]+)\}/g);
-                            if (referenceMatch) {
-                                referenceMatch.forEach(ref => {
-                                    const refKey = ref.slice(1, -1); // Remove { }
-                                    // Convert foundation token path to CSS variable name
-                                    let cssVarName = refKey
-                                        .replace(".@.value", "")
-                                        .replace(".value", "")
-                                        .replace(/\./g, "-");
-                                    // Convert to CSS variable format
-                                    const cssVariable = `var(--wm-${cssVarName})`;
-                                    tokenValue = tokenValue.replace(ref, cssVariable);
-                                });
-                            }
-                        }
-                        tokens.set(tokenName, tokenValue);
-                    }
-                    else {
-                        // Continue traversing - skip @ keys in paths
-                        const cleanKey = key === "@" ? "" : key;
-                        const newPrefix = prefix && cleanKey ? `${prefix}-${cleanKey}` : cleanKey || prefix;
-                        processTokens(value, newPrefix);
-                    }
-                }
-            }
+        catch (error) {
+            console.error(`\nStyle dictionary, Error processing file ${destination}:`, error);
         }
-        processTokens(content);
     }
-    catch (error) {
-        console.error(`Error processing ${jsonFilePath}:`, error);
-    }
-    return tokens;
+    return cssFileContent;
 }
-async function generateOverrideCSS(runtimeUIVersion, sourceDir, appTarget) {
-    // Use existing LocalProjectService to check if this is a Prism project
-    const projectService = new project_service_1.LocalProjectService(sourceDir + "/src/main/webapp");
-    const isPrismProject = await projectService.getWmProjectType();
-    if (isPrismProject) {
-        const overridesDir = path.join(sourceDir + `/src/main/webapp/`, exports.OVERRIDE_TOKENS_PATH);
-        const overrideCssFile = sourceDir + `/src/main/webapp/${exports.APP_OVERRIDE_CSS_PATH}`;
-        if (fs.existsSync(overridesDir)) {
-            console.log("CODEGEN REACT APP: generating override css...");
-            // Use the react-codegen package directory as baseDir
-            // __dirname will be the 'build/src' directory after compilation,
-            // so we go up one level to get the react-codegen root
-            const baseDir = path.resolve(__dirname, "..");
-            console.log("baseDir for npm packages (react-codegen path):", baseDir);
-            // Install required packages
-            await installPackageIfNeeded(baseDir, "style-dictionary", "4.1.0");
-            await installPackageIfNeeded(baseDir, "@wavemaker/foundation-css", runtimeUIVersion || "latest");
-            const foundationTokensDir = path.join(baseDir, "node_modules", "@wavemaker", "foundation-css", "tokens");
-            // Find all override JSON files
-            const overrideFiles = [];
-            function findOverrideFiles(dir) {
-                if (!fs.existsSync(dir))
-                    return;
-                const items = fs.readdirSync(dir);
-                items.forEach(item => {
-                    const itemPath = path.join(dir, item);
-                    const stat = fs.statSync(itemPath);
-                    if (stat.isDirectory()) {
-                        findOverrideFiles(itemPath);
-                    }
-                    else if (item.endsWith(".json")) {
-                        overrideFiles.push(itemPath);
-                    }
-                });
-            }
-            findOverrideFiles(overridesDir);
-            console.log(`Processing ${overrideFiles.length} override files...`);
-            // Collect all tokens with source tracking
-            const defaultTokens = new Map();
-            const lightTokens = new Map();
-            const darkTokens = new Map();
-            for (const overrideFile of overrideFiles) {
-                const fileName = path.basename(overrideFile);
-                const fileTokens = await processOverrideFile(overrideFile, foundationTokensDir, baseDir);
-                // Sort tokens by mode
-                if (fileName.includes(".light.")) {
-                    fileTokens.forEach((value, name) => {
-                        lightTokens.set(name, value);
-                    });
-                }
-                else if (fileName.includes(".dark.")) {
-                    fileTokens.forEach((value, name) => {
-                        darkTokens.set(name, value);
-                    });
+const generateOverrideCSS = async (args, sourceDir, baseDir) => {
+    args = args || {};
+    const overridesDir = path.join(sourceDir + `/src/main/webapp/`, utils_1.OVERRIDE_TOKENS_PATH);
+    // Check if file exists
+    const overrideCssFile = sourceDir + `/src/main/webapp/${utils_1.APP_OVERRIDE_CSS_PATH}`;
+    accessFile(overrideCssFile);
+    if (fs.existsSync(overridesDir)) {
+        console.log("CODEGEN REACT APP: generating override css...");
+        let styleDictionaryPackageInfo = {
+            scope: "",
+            name: "style-dictionary",
+            version: "4.1.0",
+            packageJsonFile: "",
+            successMsg: "STYLE DICTIONARY SUCCESS",
+            infoMsg: "STYLE DICTIONARY PACKAGE : ",
+            skipPackageVersion: false,
+        };
+        styleDictionaryPackageInfo.baseDir = baseDir;
+        const STYLE_DICTIONARY_PATH = await (0, download_packages_1.downloadNPMPackage)(styleDictionaryPackageInfo);
+        let foundationCSSPackageInfo = {
+            scope: "@wavemaker",
+            name: "foundation-css",
+            version: args.runtimeUIVersion || "latest",
+            packageJsonFile: "",
+            successMsg: "Foundation-CSS SUCCESS",
+            infoMsg: "Foundation-CSS PACKAGE : ",
+        };
+        foundationCSSPackageInfo.baseDir = baseDir;
+        const FOUNDATION_CSS_PATH = await (0, download_packages_1.downloadNPMPackage)(foundationCSSPackageInfo);
+        console.log("FOUNDATION_CSS_PATH", FOUNDATION_CSS_PATH, "SourceDir", sourceDir);
+        await (async () => {
+            const StyleDictionary = await importFromFile(`${STYLE_DICTIONARY_PATH}/node_modules/style-dictionary/lib/StyleDictionary.js`).then(mod => mod.default);
+            const foundationTokensDir = path.join(FOUNDATION_CSS_PATH, "/node_modules/@wavemaker/foundation-css/src/tokens/web");
+            const { cssVarCalcMixFormatter, componentVariantsFormatter } = (await getCustomFormatters(STYLE_DICTIONARY_PATH, FOUNDATION_CSS_PATH));
+            if (!cssVarCalcMixFormatter || !componentVariantsFormatter) {
+                if (!cssVarCalcMixFormatter) {
+                    console.error("cssVarCalcMixFormatter failed to load.");
                 }
-                else {
-                    fileTokens.forEach((value, name) => {
-                        defaultTokens.set(name, value);
-                    });
+                if (!componentVariantsFormatter) {
+                    console.error("cssVariantFormatter failed to load.");
                 }
             }
-            // Generate final CSS with mode-specific attribute selectors like Angular
-            const cssLines = [];
-            // Add default tokens
-            if (defaultTokens.size > 0) {
-                cssLines.push(":root {");
-                defaultTokens.forEach((value, name) => {
-                    cssLines.push(`${name}: ${value};`);
-                });
-                cssLines.push("}");
-            }
-            // Add light mode tokens with attribute selectors (like Angular does)
-            if (lightTokens.size > 0) {
-                if (cssLines.length > 0)
-                    cssLines.push("");
-                cssLines.push(":root[color='light'] {");
-                lightTokens.forEach((value, name) => {
-                    cssLines.push(`${name}: ${value};`);
-                });
-                cssLines.push("}");
-            }
-            // Add dark mode tokens with attribute selectors (like Angular does)
-            if (darkTokens.size > 0) {
-                if (cssLines.length > 0)
-                    cssLines.push("");
-                cssLines.push(":root[color='dark'] {");
-                darkTokens.forEach((value, name) => {
-                    cssLines.push(`${name}: ${value};`);
-                });
-                cssLines.push("}");
-            }
-            const totalTokens = defaultTokens.size + lightTokens.size + darkTokens.size;
-            // Only generate CSS files if there are actual tokens
-            if (totalTokens > 0) {
-                const finalCSS = cssLines.join("\n");
-                fs.writeFileSync(overrideCssFile, finalCSS);
-                // Also copy to public directory for React app if appTarget is provided
-                if (appTarget) {
-                    const publicCssPath = path.join(appTarget, "public", exports.APP_OVERRIDE_CSS_PATH);
-                    const publicDir = path.dirname(publicCssPath);
-                    const globalCSSPath = path.join(appTarget, "app", "globals.css");
-                    if (!fs.existsSync(publicDir)) {
-                        fs.mkdirSync(publicDir, { recursive: true });
+            cssVarCalcMixFormatter && StyleDictionary.registerFormat(cssVarCalcMixFormatter);
+            componentVariantsFormatter && StyleDictionary.registerFormat(componentVariantsFormatter);
+            const tempFoundationTokensSymlink = path.resolve(sourceDir, "src", "main", "webapp", utils_1.DESIGN_TOKENS_DIR_NAME, "temp-tokens");
+            const modeGroups = groupFilesByMode(overridesDir);
+            const modeConfigs = generateModeConfigs(modeGroups, sourceDir, cssVarCalcMixFormatter, componentVariantsFormatter);
+            let cssFileContent = "";
+            try {
+                console.log("\nSetting up foundation tokens symlink...");
+                await setupSymlink(foundationTokensDir, tempFoundationTokensSymlink);
+                for (const { mode, files } of modeConfigs) {
+                    console.log(`\nBuilding CSS for mode: ${mode}...`);
+                    try {
+                        const config = getStyleDictionaryConfig(files, tempFoundationTokensSymlink, mode, sourceDir);
+                        console.log(config, mode);
+                        const sd = new StyleDictionary(config);
+                        await sd.buildPlatform("css");
+                        console.log(`Style Dictionary build completed for mode: ${mode}`);
+                        cssFileContent = processCSSFiles(files, cssFileContent);
+                        fs.writeFileSync(overrideCssFile, cssFileContent);
+                        console.log(`CSS overrides generated successfully for mode: ${mode}`);
                     }
-                    fs.writeFileSync(publicCssPath, finalCSS);
-                    console.log(`✅ CSS copied to React app public directory`);
-                    // Now that we've generated the override CSS, add its import to globals.css
-                    if (fs.existsSync(globalCSSPath)) {
-                        const content = fs.readFileSync(globalCSSPath, "utf-8");
-                        // Check if the import is already present
-                        if (!content.includes("public/design-tokens/app.override.css")) {
-                            // Add the import after the existing imports
-                            const lines = content.split("\n");
-                            let insertIndex = 0;
-                            // Find the last import line
-                            for (let i = 0; i < lines.length; i++) {
-                                if (lines[i].startsWith("@import")) {
-                                    insertIndex = i + 1;
-                                }
-                                else if (lines[i].trim() === "" && insertIndex > 0) {
-                                    insertIndex = i;
-                                    break;
-                                }
-                            }
-                            // Insert the override CSS import
-                            lines.splice(insertIndex, 0, '@import "../public/design-tokens/app.override.css";');
-                            fs.writeFileSync(globalCSSPath, lines.join("\n"), "utf-8");
-                            console.log("✅ Added CSS override import to globals.css");
-                        }
+                    catch (err) {
+                        console.error(`Error during Style Dictionary build for mode: ${mode}`, err);
                     }
                 }
-                console.log(`✅ Generated CSS with ${totalTokens} override tokens`);
-                console.log("CODEGEN REACT APP: generating overrides success!");
+                console.log("CODEGEN REACT APP: generating overrides success !");
             }
-            else {
-                console.log("ℹ️ No design tokens found, skipping CSS generation");
+            catch (err) {
+                console.error("Error setting up symlink or processing modes:", err);
             }
-        }
+            finally {
+                await removeSymlink(tempFoundationTokensSymlink);
+            }
+        })();
     }
-}
+};
+exports.generateOverrideCSS = generateOverrideCSS;
 //# sourceMappingURL=gen-app-override-css.js.map