From 2a0045bed7f7e97f5f5fa3247835951f22ea81ba Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Thu, 25 Mar 2021 18:54:10 +0100
Subject: [PATCH] support override main css file

---
 doc/SKINNING.md   | 12 +++++++++++-
 scripts/build.mjs | 12 ++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/doc/SKINNING.md b/doc/SKINNING.md
index bb5034ee..5f1c735d 100644
--- a/doc/SKINNING.md
+++ b/doc/SKINNING.md
@@ -1,4 +1,4 @@
-# Skinning
+# Replacing javascript files
 
 Any source file can be replaced at build time by mapping the path in a JSON file passed in to the build command, e.g. `yarn build --override-imports customizations.json`. The file should be written like so:
 
@@ -10,3 +10,13 @@ Any source file can be replaced at build time by mapping the path in a JSON file
 The paths are relative to the location of the mapping file, but the mapping file should be in a parent directory of the files you want to replace.
 
 You should see a "replacing x with y" line (twice actually, for the normal and legacy build).
+
+# Injecting CSS
+
+You can override the location of the main css file with the `--override-css <file>` option to the build script. The default is `src/platform/web/ui/css/main.css`, which you probably want to import from your custom css file like so:
+
+```css
+@import url('src/platform/web/ui/css/main.css');
+
+/* additions */
+```
diff --git a/scripts/build.mjs b/scripts/build.mjs
index 1b931f37..44d58fe6 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -51,9 +51,10 @@ const parameters = new commander.Command();
 parameters
     .option("--modern-only", "don't make a legacy build")
     .option("--override-imports <json file>", "pass in a file to override import paths, see doc/SKINNING.md")
+    .option("--override-css <main css file>", "pass in an alternative main css file")
 parameters.parse(process.argv);
 
-async function build({modernOnly, overrideImports}) {
+async function build({modernOnly, overrideImports, overrideCss}) {
     // get version number
     const version = JSON.parse(await fs.readFile(path.join(projectDir, "package.json"), "utf8")).version;
     let importOverridesMap;
@@ -90,7 +91,7 @@ async function build({modernOnly, overrideImports}) {
     // creates the directories where the theme css bundles are placed in,
     // and writes to assets, so the build bundles can translate them, so do it first
     await copyThemeAssets(themes, assets);
-    await buildCssBundles(buildCssLegacy, themes, assets);
+    await buildCssBundles(buildCssLegacy, themes, assets, overrideCss);
     await buildManifest(assets);
     // all assets have been added, create a hash from all assets name to cache unhashed files like index.html
     assets.addToHashForAll("index.html", devHtml);
@@ -311,8 +312,11 @@ async function buildServiceWorker(swSource, version, globalHash, assets) {
     await assets.writeUnhashed("sw.js", swSource);
 }
 
-async function buildCssBundles(buildFn, themes, assets) {
-    const bundleCss = await buildFn(path.join(cssSrcDir, "main.css"));
+async function buildCssBundles(buildFn, themes, assets, mainCssFile = null) {
+    if (!mainCssFile) {
+        mainCssFile = path.join(cssSrcDir, "main.css");
+    }
+    const bundleCss = await buildFn(mainCssFile);
     await assets.write(`hydrogen.css`, bundleCss);
     for (const theme of themes) {
         const themeRelPath = `themes/${theme}/`;