@genexus/mercury 0.20.0 → 0.21.0

package/dist/cli/internal/create-bundles-with-custom-paths.js

@@ -1,67 +1,114 @@
 import fs from "node:fs";
 import path from "node:path";
-// @ts-expect-error: This file does exists after the bundle transpilation process
-import { bundleMappings } from "../../bundles/js/bundle-mappings.js";
-import { BASE_BUNDLE, BASE_GLOBANT_BUNDLE, BUNDLE_MAPPING_TO_HASH_FILE } from "./constants.js";
-import { getBundleNameWithHash, getHash, replacePlaceholdersInBundle } from "./utils.js";
-import { printBundleToHashMappingsWasCreated, printBundleWasCreated } from "./print-utils.js";
-const findLargestPath = () => {
-    let largestBundleLength = 0;
-    bundleMappings.forEach(entry => {
-        largestBundleLength = Math.max(largestBundleLength, entry.bundleName.length);
+import { fileURLToPath } from "node:url";
+import { BASE_BUNDLE, BASE_CSS_FILE, BASE_GLOBANT_BUNDLE, BASE_GLOBANT_CSS_FILE, BUNDLE_MAPPING_TO_HASH_FILE, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, HASH_AND_LETTER_LENGTH } from "./constants.js";
+import { getFilesInDir } from "./file-management.js";
+import { getBundleFolderAndFileBaseDir, getBundleName, getFileNameWithHash, getFileNameWithoutExt, getFileSize, getHash, sanitizeBundleName } from "./utils.js";
+import { printBundleWasCreated, printBundleWasCreatedTableHeader } from "./print-utils.js";
+export const createBundleWithCustomPath = (args, options, fileMetadata, avoidAllHashes, actualFilePath) => {
+    const { avoidHash, fontFacePath, iconsPath } = args;
+    const { bundleFolder, fileBaseDirToWrite } = options;
+    const fileNameWithoutExt = getFileNameWithoutExt(fileMetadata);
+    const bundleName = getBundleName(fileMetadata);
+    // Copy CSS bundle
+    let css = fs.readFileSync(actualFilePath ?? fileMetadata.filePath, {
+        encoding: "utf8"
     });
-    return largestBundleLength;
+    if (fontFacePath !== DEFAULT_FONT_FACE_PATH) {
+        css = css.replaceAll(DEFAULT_FONT_FACE_PATH, fontFacePath);
+    }
+    if (iconsPath !== DEFAULT_ICONS_PATH) {
+        css = css.replaceAll(DEFAULT_ICONS_PATH, iconsPath);
+    }
+    const fileNameWithHash = avoidAllHashes || avoidHash.has(bundleName)
+        ? fileNameWithoutExt
+        : getFileNameWithHash(fileNameWithoutExt, getHash(css));
+    const fileNameToWriteCss = `${fileNameWithHash}.css`;
+    const filePathWithHash = path.join(fileBaseDirToWrite, fileNameToWriteCss);
+    // Create the CSS bundle with hash
+    fs.writeFileSync(filePathWithHash, css);
+    return {
+        bundleName,
+        bundleNameWithHash: sanitizeBundleName(`${bundleFolder}/${fileNameWithHash}`),
+        fileSize: getFileSize(css)
+    };
 };
-const getActualBundleName = (bundleName) => bundleName === BASE_BUNDLE || bundleName === BASE_GLOBANT_BUNDLE
-    ? BASE_BUNDLE
-    : bundleName;
-const shouldSkipBundleCreation = (bundleName, globant) => (bundleName === BASE_BUNDLE && globant) ||
-    (bundleName === BASE_GLOBANT_BUNDLE && !globant);
-export const createBundlesWithCustomPaths = (args) => {
-    const { avoidHash, fontFacePath, iconsPath, globant } = args;
+export const createBundlesWithCustomPaths = async (args, avoidAllHashes = false) => {
+    const hasGlobantVariant = args.globant;
     const outDir = path.join(args.outDirPath);
     const CREATED_DIRS = new Set();
-    const largestBundleLength = findLargestPath();
-    let bundleMappingToHashObjectEntries = "";
-    bundleMappings.forEach(entry => {
-        const { bundleName, fileDir, transpiledBundle } = entry;
-        if (shouldSkipBundleCreation(bundleName, globant)) {
-            return;
+    // This is a WA to have __filename and __dirname in ES modules
+    const __filename = fileURLToPath(import.meta.url);
+    // Directory name where the script is located (<path from root to node_modules/@genexus/mercury>/dist/cli/)
+    const __dirname = path.dirname(__filename);
+    const cssOutput = path.join(__dirname, "../../bundles/css");
+    /**
+     * Files to transpile
+     */
+    const allFilesToCopy = await getFilesInDir(cssOutput);
+    let largestBundleLength = BUNDLE_MAPPING_TO_HASH_FILE.length;
+    let largestFileSizeLength = 0;
+    allFilesToCopy.forEach(fileMetadata => {
+        const options = getBundleFolderAndFileBaseDir(fileMetadata, outDir);
+        largestBundleLength = Math.max(largestBundleLength, options.bundleFolder.length + fileMetadata.fileName.length);
+    });
+    if (!avoidAllHashes) {
+        largestBundleLength += HASH_AND_LETTER_LENGTH;
+    }
+    const copiedFiles = [];
+    allFilesToCopy.forEach(fileMetadata => {
+        const bundleName = getBundleName(fileMetadata);
+        const options = getBundleFolderAndFileBaseDir(fileMetadata, outDir);
+        const { fileBaseDirToWrite } = options;
+        let actualFilePath = fileMetadata.filePath;
+        if (!CREATED_DIRS.has(fileBaseDirToWrite)) {
+            CREATED_DIRS.add(fileBaseDirToWrite);
+            fs.mkdirSync(path.join(fileBaseDirToWrite), { recursive: true });
         }
-        const actualBundleName = getActualBundleName(bundleName);
-        const compiledBundleWithoutPlaceholders = replacePlaceholdersInBundle(transpiledBundle, fontFacePath, iconsPath);
-        const hash = getHash(compiledBundleWithoutPlaceholders);
-        if (fileDir && !CREATED_DIRS.has(fileDir)) {
-            fs.mkdirSync(path.join(outDir, fileDir), { recursive: true });
-            CREATED_DIRS.add(fileDir);
+        // There is no need to copy the base-globant.css file, since the base.css
+        // file already contains this file
+        if (hasGlobantVariant) {
+            if (bundleName === BASE_GLOBANT_BUNDLE) {
+                return;
+            }
+            // Replace the content of the base bundle with the Globant variant
+            if (bundleName === BASE_BUNDLE) {
+                actualFilePath = actualFilePath.replace(BASE_CSS_FILE, BASE_GLOBANT_CSS_FILE);
+            }
         }
-        const bundleNameWithHash = avoidHash.has(actualBundleName)
-            ? actualBundleName
-            : getBundleNameWithHash(actualBundleName, hash);
-        const filePathToCreateBundle = path.join(outDir, `${bundleNameWithHash}.css`);
-        fs.writeFileSync(filePathToCreateBundle, compiledBundleWithoutPlaceholders);
-        printBundleWasCreated({
-            outDir,
-            bundleName: actualBundleName,
-            compiledBundleWithoutPlaceholders,
-            filePathToCreateBundle,
-            // WA to improve style
-            largestBundleLength: largestBundleLength + (avoidHash.has(actualBundleName) ? 17 : 0)
-        });
-        // Store the bundle mapping.
-        // For example: "components/button" --> "components/button-9f82641938b85445"
-        const bundleToHashEntry = `  "${actualBundleName}": "${bundleNameWithHash}"`;
-        // Concat entries in the object
-        bundleMappingToHashObjectEntries +=
-            bundleMappingToHashObjectEntries === ""
-                ? bundleToHashEntry
-                : ",\n" + bundleToHashEntry;
+        copiedFiles.push(createBundleWithCustomPath(args, options, fileMetadata, avoidAllHashes, actualFilePath));
     });
-    bundleMappingToHashObjectEntries = `export const bundleToHashMappings = {\n${bundleMappingToHashObjectEntries}\n} as const;\n`;
+    copiedFiles.sort((a, b) => (a.bundleName <= b.bundleName ? -1 : 0));
+    const bundleMappingFileContent = `export const bundleToHashMappings = {\n${copiedFiles.map(entry => `  "${entry.bundleName}": "${entry.bundleNameWithHash}"`).join(",\n")}\n} as const;\n`;
+    const bundleMappingFileSize = getFileSize(bundleMappingFileContent);
     const bundleMappingFilePath = path.join(outDir, BUNDLE_MAPPING_TO_HASH_FILE);
-    fs.writeFileSync(bundleMappingFilePath, bundleMappingToHashObjectEntries);
-    printBundleToHashMappingsWasCreated({
-        outDir,
-        filePath: bundleMappingFilePath
+    // Compute the largest fileName length
+    largestFileSizeLength = copiedFiles.reduce((acc, copiedFile) => Math.max(acc, copiedFile.fileSize.length), bundleMappingFileSize.length);
+    printBundleWasCreatedTableHeader({
+        largestBundleLength: avoidAllHashes
+            ? largestBundleLength
+            : largestBundleLength + 1,
+        outDir
+    });
+    // Print bundle created message
+    for (let index = 0; index < copiedFiles.length; index++) {
+        const entry = copiedFiles[index];
+        printBundleWasCreated({
+            bundleNameWithHash: `${entry.bundleNameWithHash}.css`,
+            fileSize: entry.fileSize,
+            largestBundleLength,
+            largestFileSizeLength,
+            outDir
+        });
+    }
+    fs.writeFileSync(bundleMappingFilePath, bundleMappingFileContent);
+    // Separate the TS file
+    console.log("");
+    printBundleWasCreated({
+        bundleNameWithHash: BUNDLE_MAPPING_TO_HASH_FILE,
+        fileSize: getFileSize(bundleMappingFileContent),
+        largestBundleLength,
+        largestFileSizeLength,
+        outDir
     });
 };

package/dist/cli/internal/file-management.d.ts

@@ -1,4 +1,5 @@
 import type { FileMetadata } from "./types";
-export declare const ensureDirectoryExistsAndItsClear: (dirPath: string) => void;
-export declare function walkSync(dir: string): Generator<FileMetadata>;
+export declare const ensureDirectoryExistsAndItsClear: (dirPath: string, filesToNotRemove?: Set<string>) => Promise<void>;
+export declare const getFilesInDir: (dir: string) => Promise<FileMetadata[]>;
 export declare const copyDirectories: (srcDir: string, outDir: string) => void;
+export declare const refreshAngularBrowser: () => void;

package/dist/cli/internal/file-management.js

@@ -1,20 +1,53 @@
 import fs from "node:fs";
 import path from "node:path";
-export const ensureDirectoryExistsAndItsClear = (dirPath) => {
-    if (fs.existsSync(dirPath)) {
+import { readdir, rm } from "node:fs/promises";
+export const ensureDirectoryExistsAndItsClear = async (dirPath, filesToNotRemove) => {
+    // First build
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+        return;
+    }
+    // Incremental rebuild keeps some file without any changes, so we must skip
+    // the file deletion
+    if (filesToNotRemove) {
+        const filesInDir = await getFilesInDir(dirPath);
+        await Promise.all(filesInDir.map(file => filesToNotRemove.has(file.filePath)
+            ? Promise.resolve()
+            : rm(file.filePath)));
+    }
+    // Incremental rebuild did not include any file to exclude its removal
+    else {
         fs.rmSync(dirPath, { recursive: true });
+        fs.mkdirSync(dirPath, { recursive: true });
     }
-    fs.mkdirSync(dirPath, { recursive: true });
 };
-export function* walkSync(dir) {
-    const files = fs.readdirSync(dir, { withFileTypes: true });
-    for (const file of files) {
-        if (file.isDirectory()) {
-            yield* walkSync(path.join(dir, file.name));
-        }
-        else {
-            yield { dir, fileName: file.name, filePath: path.join(dir, file.name) };
+export const getFilesInDir = async (dir) => {
+    const filesAndDirs = await readdir(dir, {
+        withFileTypes: true,
+        recursive: true
+    });
+    const files = [];
+    for (let index = 0; index < filesAndDirs.length; index++) {
+        const file = filesAndDirs[index];
+        if (file.isFile()) {
+            files.push({
+                dir: file.parentPath,
+                fileName: file.name,
+                filePath: path.join(file.parentPath, file.name)
+            });
         }
     }
-}
+    return files;
+};
 export const copyDirectories = (srcDir, outDir) => fs.cpSync(srcDir, outDir, { recursive: true });
+export const refreshAngularBrowser = () => {
+    const ANGULAR_FILE_TO_TRIGGER_RELOAD = path.join(process.cwd(), "../showcase/src/index.html");
+    const FILE_CONTENT = fs.readFileSync(ANGULAR_FILE_TO_TRIGGER_RELOAD, {
+        encoding: "utf8"
+    });
+    // Trigger a dummy write in the index.html
+    fs.writeFileSync(ANGULAR_FILE_TO_TRIGGER_RELOAD, FILE_CONTENT + "\n");
+    // Rollback that write to not provoke any changes, but do it after the
+    // debounce of the Angular CLI has completed the queued HMR
+    setTimeout(() => fs.writeFileSync(ANGULAR_FILE_TO_TRIGGER_RELOAD, FILE_CONTENT), 300);
+};

package/dist/cli/internal/print-utils.d.ts

@@ -1,13 +1,13 @@
-export declare const printBundleWasCreated: (args: {
+export declare const printBundleWasCreatedTableHeader: (args: {
     outDir: string;
-    bundleName: string;
     largestBundleLength: number;
-    filePathToCreateBundle: string;
-    compiledBundleWithoutPlaceholders: string;
 }) => void;
-export declare const printBundleToHashMappingsWasCreated: (args: {
+export declare const printBundleWasCreated: (args: {
     outDir: string;
-    filePath: string;
+    bundleNameWithHash: string;
+    largestBundleLength: number;
+    largestFileSizeLength: number;
+    fileSize: string;
 }) => void;
 export declare const printBundleWasTranspiled: (filePath: string) => void;
 export declare const printArgumentDoesNotExistsError: (arg: string) => void;

package/dist/cli/internal/print-utils.js

@@ -1,18 +1,20 @@
 import { styleText } from "node:util";
-import { getFileSize } from "./utils.js";
-import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, DEFAULT_OUT_DIR_PATH, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
-export const printBundleWasCreated = (args) => console.log(styleText("greenBright", "  Created: ") +
-    styleText("white", args.outDir) +
-    styleText("whiteBright", args.filePathToCreateBundle.replace(args.outDir, "")) +
-    styleText("cyan", " ".repeat(1 + args.largestBundleLength - args.bundleName.length) +
-        getFileSize(args.compiledBundleWithoutPlaceholders)));
-export const printBundleToHashMappingsWasCreated = (args) => console.log("\n" +
-    styleText("greenBright", "  Created: ") +
-    styleText("white", args.outDir) +
-    styleText("whiteBright", args.filePath.replace(args.outDir, "")));
+import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, DEFAULT_OUT_DIR_PATH, SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
+import path from "node:path";
+const separator = () => styleText(["gray"], " | ");
+export const printBundleWasCreatedTableHeader = (args) => console.log(styleText(["white", "bold"], "Files") +
+    " ".repeat(args.largestBundleLength + args.outDir.length - "Files".length) +
+    separator() +
+    styleText(["white", "bold"], "Raw size"));
+export const printBundleWasCreated = (args) => console.log(styleText("white", args.outDir) +
+    styleText("greenBright", path.join(args.outDir, args.bundleNameWithHash).replace(args.outDir, "")) +
+    " ".repeat(Math.max(args.largestBundleLength - args.bundleNameWithHash.length, 0)) +
+    separator() +
+    " ".repeat(Math.max(args.largestFileSizeLength - args.fileSize.length, 0)) +
+    styleText("cyanBright", args.fileSize));
 export const printBundleWasTranspiled = (filePath) => console.log(styleText("greenBright", "  Transpiled: ") +
     styleText("white", SCSS_BUNDLES_OUT_DIR) +
-    styleText("whiteBright", filePath.replace(SCSS_BUNDLES_OUT_DIR, "")));
+    styleText("whiteBright", filePath.replace(SCSS_BUNDLES_INPUT_DIR, "")));
 export const printArgumentDoesNotExistsError = (arg) => console.log(styleText("red", "  error ") +
     styleText("gray", "Argument does not exists: ") +
     `'${arg}'`);

package/dist/cli/internal/transpile-bundle-and-create-mappings.d.ts

@@ -1,3 +1,2 @@
-import { FileMetadata } from "./types.js";
-export declare const transpileCssBundleWithPlaceholder: (fileMetadata: FileMetadata) => void;
-export declare const createBundleMappingsFile: () => void;
+import type { CLIArguments, FileMetadata } from "./types";
+export declare const transpileCssBundleWithPlaceholder: (fileMetadata: FileMetadata, args?: CLIArguments) => Promise<void>;

package/dist/cli/internal/transpile-bundle-and-create-mappings.js

@@ -1,86 +1,57 @@
-import fs from "node:fs";
+import fs from "node:fs/promises";
 import path from "node:path";
 import * as sass from "sass";
-import { BASE_BUNDLE_WITH_BACK_SLASH, BASE_GLOBANT_CSS_FILE, BASE_GLOBANT_FILE, BASE_GLOBANT_JS_FILE, BASE_GLOBANT_SCSS_FILE, BASE_SCSS_FILE, BUNDLE_MAPPING_ENTRIES, BUNDLE_MAPPING_FILE, CSS_BUNDLES_OUT_DIR, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, JS_BUNDLES_OUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
-import { getBundleNameWithoutSpecialChars, replacePlaceholdersInBundle } from "./utils.js";
-import { printBundleWasTranspiled } from "./print-utils.js";
+import { BASE_BUNDLE, BASE_GLOBANT_BUNDLE, BASE_GLOBANT_CSS_FILE, CSS_BUNDLES_OUT_DIR, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js";
+import { replacePlaceholdersInBundle, sanitizeBundleName } from "./utils.js";
 const transpileBundle = (filePath, globant) => sass.compile(filePath, {
     loadPaths: [globant ? "src/config/globant" : "src/config/default"],
     style: "compressed"
 }).css;
-const CSS_CREATED_DIRS = new Set();
-const JS_CREATED_DIRS = new Set();
-const BUNDLES = [];
-const addBaseGlobantFile = (fileMetadata, cssOutDir, jsOutDir) => {
+let BUNDLES = [];
+const transpileGlobantCssFile = async (fileMetadata, cssOutDir) => {
     const { filePath } = fileMetadata;
     BUNDLES.push({
         fileDir: fileMetadata.dir
             .replace(SCSS_BUNDLES_OUT_DIR, "")
-            .replace("\\", "/"),
-        bundleNameWithBackSlash: filePath
-            .replace(SCSS_BUNDLES_OUT_DIR, "")
-            .replace(BASE_SCSS_FILE, BASE_GLOBANT_FILE)
+            .replace("\\", "/")
     });
     const transpiledBundle = transpileBundle(filePath, true);
     // Store the CSS file with its default values
-    fs.writeFileSync(path.join(cssOutDir, BASE_GLOBANT_CSS_FILE), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
-    // Store the CSS file in a JS file with placeholders for the values
-    fs.writeFileSync(path.join(jsOutDir, BASE_GLOBANT_JS_FILE), `export const bundle = \`${transpiledBundle}\`;`);
-    printBundleWasTranspiled(filePath.replace(BASE_SCSS_FILE, BASE_GLOBANT_SCSS_FILE));
+    await fs.writeFile(path.join(cssOutDir, BASE_GLOBANT_CSS_FILE), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
 };
-export const transpileCssBundleWithPlaceholder = (fileMetadata) => {
-    const { fileName, filePath } = fileMetadata;
-    const cssOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_OUT_DIR, CSS_BUNDLES_OUT_DIR);
-    const jsOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_OUT_DIR, JS_BUNDLES_OUT_DIR);
+export const transpileCssBundleWithPlaceholder = async (fileMetadata, args) => {
+    const { fileName } = fileMetadata;
+    let actualFilePath = fileMetadata.filePath;
+    const hasGlobantVariant = args?.globant ?? false;
+    const cssOutDir = fileMetadata.dir.replace(SCSS_BUNDLES_INPUT_DIR, CSS_BUNDLES_OUT_DIR);
     const fileNameCssExt = fileName.replace(".scss", ".css");
-    const fileNameJsExt = fileName.replace(".scss", ".js");
-    const bundleNameWithBackSlash = filePath
-        .replace(SCSS_BUNDLES_OUT_DIR, "")
-        .replace(".scss", "");
+    const bundleName = sanitizeBundleName(actualFilePath.replace(SCSS_BUNDLES_INPUT_DIR, "").replace(".scss", ""));
+    // There is no need to generate the base-globant.css file, since the base.css
+    // file already contains this file
+    if (hasGlobantVariant) {
+        if (bundleName === BASE_GLOBANT_BUNDLE) {
+            return;
+        }
+        // Replace the content of the base bundle with the Globant variant
+        if (bundleName === BASE_BUNDLE) {
+            actualFilePath = actualFilePath.replace(BASE_BUNDLE, BASE_GLOBANT_BUNDLE);
+        }
+    }
+    // The Globant variant is not forced, so we are creating both bundles, the
+    // base/base and base/base-globant bundles
+    else if (bundleName === BASE_BUNDLE) {
+        transpileGlobantCssFile({
+            dir: fileMetadata.dir,
+            fileName: fileName.replace(BASE_BUNDLE, BASE_GLOBANT_BUNDLE),
+            filePath: actualFilePath
+        }, cssOutDir);
+    }
     BUNDLES.push({
         fileDir: fileMetadata.dir
-            .replace(SCSS_BUNDLES_OUT_DIR, "")
-            .replace("\\", "/"),
-        bundleNameWithBackSlash
+            .replace(SCSS_BUNDLES_INPUT_DIR, "")
+            .replace("\\", "/")
     });
-    // Create the file directory if it does not exists
-    if (!CSS_CREATED_DIRS.has(cssOutDir)) {
-        fs.mkdirSync(cssOutDir, { recursive: true });
-        fs.mkdirSync(jsOutDir, { recursive: true });
-        CSS_CREATED_DIRS.add(cssOutDir);
-        JS_CREATED_DIRS.add(jsOutDir);
-    }
-    const transpiledBundle = transpileBundle(filePath, false);
+    const transpiledBundle = transpileBundle(actualFilePath, hasGlobantVariant);
     // Store the CSS file with its default values
-    fs.writeFileSync(path.join(cssOutDir, fileNameCssExt), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
-    // Store the CSS file in a JS file with placeholders for the values
-    fs.writeFileSync(path.join(jsOutDir, fileNameJsExt), `export const bundle = \`${transpiledBundle}\`;`);
-    printBundleWasTranspiled(filePath);
-    if (bundleNameWithBackSlash.replaceAll("/", "\\") ===
-        BASE_BUNDLE_WITH_BACK_SLASH) {
-        addBaseGlobantFile(fileMetadata, cssOutDir, jsOutDir);
-    }
-};
-const createBundleEntryInMappingFile = (bundleName, fileDir, transpiledBundleRef) => `  {
-    ${BUNDLE_MAPPING_ENTRIES.BUNDLE_NAME}: "${bundleName}",
-    ${BUNDLE_MAPPING_ENTRIES.FILE_DIR}: "${fileDir}",
-    ${BUNDLE_MAPPING_ENTRIES.TRANSPILED_BUNDLE}: ${transpiledBundleRef}
-  }`;
-export const createBundleMappingsFile = () => {
-    let bundleAssociationImports = "";
-    let bundleMappingObjectEntries = "";
-    BUNDLES.forEach(bundleMetadata => {
-        const bundleName = bundleMetadata.bundleNameWithBackSlash
-            .replaceAll("\\", "/")
-            .substring(1);
-        const transpiledBundleRef = getBundleNameWithoutSpecialChars(bundleName);
-        const bundleEntry = createBundleEntryInMappingFile(bundleName, bundleMetadata.fileDir, transpiledBundleRef);
-        bundleAssociationImports += `import { bundle as ${transpiledBundleRef} } from "./${bundleName}.js";\n`;
-        // Concat entries in the object
-        bundleMappingObjectEntries +=
-            bundleMappingObjectEntries === "" ? bundleEntry : ",\n" + bundleEntry;
-    });
-    bundleMappingObjectEntries = `\nexport const bundleMappings = [\n${bundleMappingObjectEntries}\n];`;
-    // Create the JS file that contains all mappings for the bundle
-    fs.writeFileSync(path.join(JS_BUNDLES_OUT_DIR, BUNDLE_MAPPING_FILE), bundleAssociationImports + bundleMappingObjectEntries);
+    await fs.writeFile(path.join(cssOutDir, fileNameCssExt), replacePlaceholdersInBundle(transpiledBundle, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH));
 };

package/dist/cli/internal/types.d.ts

@@ -1,6 +1,5 @@
 export type BundleMetadata = {
     fileDir: string;
-    bundleNameWithBackSlash: string;
 };
 export type BundleAssociationMetadata = {
     bundleName: string;

package/dist/cli/internal/utils.d.ts

@@ -1,11 +1,14 @@
+import type { FileMetadata } from "./types";
 export declare const getFileSize: (fileContent: string) => string;
 export declare const getHash: (fileContent: string) => string;
-export declare const getBundleNameWithHash: <B extends string, H extends string>(bundleName: B, hash: H) => `${B}-${H}`;
+export declare const getFileNameWithHash: <B extends string, H extends string>(bundleName: B, hash: H) => `${B}-${H}`;
 export declare const replacePlaceholdersInBundle: (transpiledBundle: string, fontFaceValue: string, iconsValue: string) => string;
-/**
- * @example
- * "base/icons" --> "baseIcons"
- * "utils/form--full" --> "utilsFormFull"
- */
-export declare const getBundleNameWithoutSpecialChars: (bundleName: string) => string;
-export declare const measureTime: (callback: () => void) => void;
+export declare const measureTime: (callback: (() => void) | (() => Promise<void>)) => Promise<void>;
+export declare const sanitizeBundleName: (bundleName: string) => string;
+export declare const getBundleFolder: (fileMetadata: FileMetadata) => string;
+export declare const getBundleFolderAndFileBaseDir: (fileMetadata: FileMetadata, outDir: string) => {
+    bundleFolder: string;
+    fileBaseDirToWrite: string;
+};
+export declare const getFileNameWithoutExt: (fileMetadata: FileMetadata) => string;
+export declare const getBundleName: (fileMetadata: FileMetadata) => string;

package/dist/cli/internal/utils.js

@@ -1,42 +1,47 @@
 import crypto from "node:crypto";
 import { styleText } from "node:util";
-import { FONT_FACE_PATH_PLACEHOLDER, ICONS_PATH_PLACEHOLDER, KB, SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX } from "./constants.js";
+import { CSS_BUNDLES_OUT_DIR, FONT_FACE_PATH_PLACEHOLDER, HASH_LENGTH, ICONS_PATH_PLACEHOLDER, KB
+// SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX
+ } from "./constants.js";
+import path from "node:path";
 export const getFileSize = (fileContent) => {
     const fileLength = fileContent.length;
     if (fileLength < KB) {
-        return fileLength + "B";
+        return fileLength + " bytes";
     }
     const fileLengthInKB = fileLength / KB;
     if (fileLengthInKB < KB) {
-        return fileLengthInKB + "KB";
+        return fileLengthInKB.toFixed(2) + " kB";
     }
     const fileLengthInMB = fileLengthInKB / KB;
     if (fileLengthInMB < KB) {
-        return fileLengthInMB.toFixed(3) + "MB";
+        return fileLengthInMB.toFixed(2) + " MB";
     }
     const fileLengthInGB = fileLengthInMB / KB;
-    return fileLengthInGB.toFixed(3) + "GB";
+    return fileLengthInGB.toFixed(2) + " GB";
 };
-export const getHash = (fileContent) => crypto.createHash("md5").update(fileContent).digest("hex").substring(16);
-export const getBundleNameWithHash = (bundleName, hash) => `${bundleName}-${hash}`;
+export const getHash = (fileContent) => crypto
+    .createHash("md5")
+    .update(fileContent)
+    .digest("hex")
+    .substring(HASH_LENGTH);
+export const getFileNameWithHash = (bundleName, hash) => `${bundleName}-${hash}`;
 export const replacePlaceholdersInBundle = (transpiledBundle, fontFaceValue, iconsValue) => transpiledBundle
     .replaceAll(ICONS_PATH_PLACEHOLDER, iconsValue)
     .replaceAll(FONT_FACE_PATH_PLACEHOLDER, fontFaceValue);
-/**
- * @example
- * "base/icons" --> "baseIcons"
- * "utils/form--full" --> "utilsFormFull"
- */
-export const getBundleNameWithoutSpecialChars = (bundleName) => {
-    const bundleNameNoSpecialChars = bundleName
-        .split(SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX)
-        .map(subPath => subPath.charAt(0).toUpperCase() + subPath.slice(1))
-        .join("");
-    return (bundleNameNoSpecialChars.charAt(0).toLowerCase() +
-        bundleNameNoSpecialChars.slice(1));
-};
-export const measureTime = (callback) => {
+export const measureTime = async (callback) => {
     console.time(styleText("green", "Done in"));
-    callback();
+    await callback();
     console.timeEnd(styleText("green", "Done in"));
 };
+export const sanitizeBundleName = (bundleName) => bundleName.replaceAll("\\", "/").replace(/^\//, "");
+export const getBundleFolder = (fileMetadata) => fileMetadata.dir.split(CSS_BUNDLES_OUT_DIR)[1];
+export const getBundleFolderAndFileBaseDir = (fileMetadata, outDir) => {
+    const bundleFolder = getBundleFolder(fileMetadata);
+    return {
+        bundleFolder,
+        fileBaseDirToWrite: path.join(outDir, bundleFolder)
+    };
+};
+export const getFileNameWithoutExt = (fileMetadata) => fileMetadata.fileName.replace(/.css$/, "");
+export const getBundleName = (fileMetadata) => sanitizeBundleName(`${getBundleFolder(fileMetadata)}/${getFileNameWithoutExt(fileMetadata)}`);

package/dist/cli/internal/validate-args.js

@@ -1,5 +1,6 @@
 import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, DEFAULT_OUT_DIR_PATH, SEPARATE_BY_COMMA_REGEX } from "./constants.js";
 import { printArgumentDoesNotExistsError, printDuplicatedArgumentError, printInvalidArgumentError, printMissingFontPathArgumentWarning, printMissingIconsPathArgumentWarning, printMissingOutDirPathArgumentWarning } from "./print-utils.js";
+import { sanitizeBundleName } from "./utils.js";
 const ARGUMENT_VALUE_AND_NAME_SEPARATOR_REGEX = /\s*=\s*/g;
 const ERROR_IN_CHECK = false;
 const SUCCESS_CHECK = true;
@@ -40,6 +41,9 @@ const checkArgument = (argument) => {
     }
     const argNameWithValue = argument.split(ARGUMENT_VALUE_AND_NAME_SEPARATOR_REGEX);
     if (argNameWithValue.length !== 2) {
+        if (argNameWithValue[0] === "--watch") {
+            return SUCCESS_CHECK;
+        }
         printInvalidArgumentError(argument);
         return ERROR_IN_CHECK;
     }
@@ -109,8 +113,10 @@ export const getArguments = () => {
     if (anyWarning) {
         console.log("");
     }
+    // Sanitize bundle names to avoid issues with "/" and "\" in paths
+    const sanitizedAvoidHash = new Set(avoidHash.map(bundleName => sanitizeBundleName(bundleName)));
     return {
-        avoidHash: new Set(avoidHash),
+        avoidHash: new Set(sanitizedAvoidHash),
         globant: hasGlobant,
         fontFacePath,
         iconsPath,

package/dist/cli/internal/watch-fs.d.ts

@@ -0,0 +1,3 @@
+export declare const printRebuilding: (firstBuild: boolean) => void;
+export declare const stopRebuildingStdout: () => void;
+export declare const watchFileSystemChanges: (callbackToCompile: () => Promise<void>) => void;