@wavemaker/react-codegen 11.14.2-rc.6311 → 11.14.4-rc.647538

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

@@ -33,347 +33,276 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateOverrideCSS = void 0;
-const path = __importStar(require("path"));
+exports.OVERRIDE_TOKENS_PATH = exports.APP_OVERRIDE_CSS_PATH = exports.DESIGN_TOKENS_DIR_NAME = void 0;
+exports.generateOverrideCSS = generateOverrideCSS;
 const fs = __importStar(require("fs"));
-const url_1 = require("url");
-const download_packages_1 = require("./download-packages");
+const path = __importStar(require("path"));
+const project_service_1 = require("./project.service");
 const utils_1 = require("./utils");
-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`;
+// 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}`);
     }
     else {
-        // 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;
+        console.log(`${packageName} already installed`);
     }
 }
 /**
- * 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.
+ * 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
  */
-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";
+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);
                 }
-                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 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 {
-                        cssFileContent += modifiedCSS + "\n";
+                        // Continue traversing
+                        const newPrefix = prefix ? `${prefix}.${key}` : key;
+                        flattenTokens(value, tokenMap, newPrefix);
                     }
                 }
-                // Delete the processed file
-                fs.unlink(destination, () => { });
             }
         }
-        catch (error) {
-            console.error(`\nStyle dictionary, Error processing file ${destination}:`, error);
+        // 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);
+                    }
+                }
+            }
         }
+        processTokens(content);
     }
-    return cssFileContent;
+    catch (error) {
+        console.error(`Error processing ${jsonFilePath}:`, error);
+    }
+    return tokens;
 }
-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.");
+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);
+                    });
                 }
-                if (!componentVariantsFormatter) {
-                    console.error("cssVariantFormatter failed to load.");
+                else {
+                    fileTokens.forEach((value, name) => {
+                        defaultTokens.set(name, value);
+                    });
                 }
             }
-            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}`);
+            // 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 });
                     }
-                    catch (err) {
-                        console.error(`Error during Style Dictionary build for mode: ${mode}`, err);
+                    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");
+                        }
                     }
                 }
-                console.log("CODEGEN REACT APP: generating overrides success !");
-            }
-            catch (err) {
-                console.error("Error setting up symlink or processing modes:", err);
+                console.log(`✅ Generated CSS with ${totalTokens} override tokens`);
+                console.log("CODEGEN REACT APP: generating overrides success!");
             }
-            finally {
-                await removeSymlink(tempFoundationTokensSymlink);
+            else {
+                console.log("ℹ️ No design tokens found, skipping CSS generation");
             }
-        })();
+        }
     }
-};
-exports.generateOverrideCSS = generateOverrideCSS;
+}
 //# sourceMappingURL=gen-app-override-css.js.map