From 4ddf8c18d8d8e156dcdfa67c191a02015dda66f3 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 5 Jul 2021 10:38:55 +0530
Subject: [PATCH] feat: Execute separate build command for style files

- Execute style build twice (one for LTR and one for RTL) because rtlcss is dependant on comments and esbuild strips all comments so we cannot run rtlcss on built css files.
---
 esbuild/esbuild.js | 106 ++++++++++++++++++++++++++-------------------
 1 file changed, 62 insertions(+), 44 deletions(-)

diff --git a/esbuild/esbuild.js b/esbuild/esbuild.js
index a0b07abe43..aa273ab85c 100644
--- a/esbuild/esbuild.js
+++ b/esbuild/esbuild.js
@@ -97,10 +97,9 @@ async function execute() {
 		await clean_dist_folders(APPS);
 	}
 
-	let result;
+	let results;
 	try {
-		result = await build_assets_for_apps(APPS, FILES_TO_BUILD);
-		result = await create_rtl_assets(result);
+		results = await build_assets_for_apps(APPS, FILES_TO_BUILD);
 	} catch (e) {
 		log_error("There were some problems during build");
 		log();
@@ -109,13 +108,15 @@ async function execute() {
 	}
 
 	if (!WATCH_MODE) {
-		log_built_assets(result.metafile);
+		log_built_assets(results);
 		console.timeEnd(TOTAL_BUILD_TIME);
 		log();
 	} else {
 		log("Watching for changes...");
 	}
-	return await write_assets_json(result.metafile);
+	for (const result of results) {
+		write_assets_json(result.metafile);
+	}
 }
 
 function build_assets_for_apps(apps, files) {
@@ -127,6 +128,8 @@ function build_assets_for_apps(apps, files) {
 		let output_path = assets_path;
 
 		let file_map = {};
+		let style_file_map = {};
+		let rtl_style_file_map = {};
 		for (let file of files) {
 			let relative_app_path = path.relative(apps_path, file);
 			let app = relative_app_path.split(path.sep)[0];
@@ -142,19 +145,32 @@ function build_assets_for_apps(apps, files) {
 			}
 			output_name = path.join(app, "dist", output_name);
 
-			if (Object.keys(file_map).includes(output_name)) {
+			if (Object.keys(file_map).includes(output_name) || Object.keys(style_file_map).includes(output_name)) {
 				log_warn(
 					`Duplicate output file ${output_name} generated from ${file}`
 				);
 			}
-
-			file_map[output_name] = file;
+			if ([".css", ".scss", ".less", ".sass", ".styl"].includes(extension)) {
+				style_file_map[output_name] = file;
+				rtl_style_file_map[output_name.replace('/css/', '/css-rtl/')] = file;
+			} else {
+				file_map[output_name] = file;
+			}
 		}
-
-		return build_files({
+		let build = build_files({
 			files: file_map,
 			outdir: output_path
 		});
+		let style_build = build_style_files({
+			files: style_file_map,
+			outdir: output_path
+		});
+		let rtl_style_build = build_style_files({
+			files: rtl_style_file_map,
+			outdir: output_path,
+			rtl_style: true
+		});
+		return Promise.all([build, style_build, rtl_style_build]);
 	});
 }
 
@@ -205,7 +221,33 @@ function get_files_to_build(files) {
 }
 
 function build_files({ files, outdir }) {
-	return esbuild.build({
+	let build_plugins = [
+		html_plugin,
+		vue(),
+	];
+	return esbuild.build(get_build_options(files, outdir, build_plugins));
+}
+
+function build_style_files({ files, outdir, rtl_style=false }) {
+	let plugins = [];
+	if (rtl_style) {
+		plugins.push(rtlcss);
+	}
+
+	let build_plugins = [
+		ignore_assets,
+		postCssPlugin({
+			plugins: plugins,
+			sassOptions: sass_options
+		})
+	];
+
+	plugins.push(require("autoprefixer"));
+	return esbuild.build(get_build_options(files, outdir, build_plugins));
+}
+
+function get_build_options(files, outdir, plugins) {
+	return {
 		entryPoints: files,
 		entryNames: "[dir]/[name].[hash]",
 		outdir,
@@ -219,17 +261,9 @@ function build_files({ files, outdir }) {
 				PRODUCTION ? "production" : "development"
 			)
 		},
-		plugins: [
-			html_plugin,
-			ignore_assets,
-			vue(),
-			postCssPlugin({
-				plugins: [require("autoprefixer")],
-				sassOptions: sass_options
-			})
-		],
+		plugins: plugins,
 		watch: get_watch_config()
-	});
+	};
 }
 
 function get_watch_config() {
@@ -275,7 +309,11 @@ async function clean_dist_folders(apps) {
 	}
 }
 
-function log_built_assets(metafile) {
+function log_built_assets(results) {
+	let outputs = {};
+	for (const result of results) {
+		outputs = Object.assign(outputs, result.metafile.outputs);
+	}
 	let column_widths = [60, 20];
 	cliui.div(
 		{
@@ -290,9 +328,9 @@ function log_built_assets(metafile) {
 	cliui.div("");
 
 	let output_by_dist_path = {};
-	for (let outfile in metafile.outputs) {
+	for (let outfile in outputs) {
 		if (outfile.endsWith(".map")) continue;
-		let data = metafile.outputs[outfile];
+		let data = outputs[outfile];
 		outfile = path.resolve(outfile);
 		outfile = path.relative(assets_path, outfile);
 		let filename = path.basename(outfile);
@@ -486,24 +524,4 @@ function log_rebuilt_assets(prev_assets, new_assets) {
 		log("    " + filename);
 	}
 	log();
-}
-
-async function create_rtl_assets(result) {
-	for (let file_path in result.metafile.outputs) {
-		if (file_path.endsWith('.css')) {
-			console.log(file_path);
-			let content = fs.readFileSync(file_path, {'encoding': 'utf-8'});
-			let rtl_content = rtlcss.process(content);
-			let rtl_file_path = file_path.replace('/css/', '/css-rtl/');
-			let rtl_folder_path = path.dirname(rtl_file_path);
-			if (fs.existsSync(rtl_file_path)) {
-				continue;
-			}
-			if (!fs.existsSync(rtl_folder_path)) {
-				fs.mkdirSync(rtl_folder_path);
-			}
-			fs.writeFileSync(rtl_file_path, rtl_content);
-		}
-	}
-	return result;
 }
\ No newline at end of file