From a6ef3ef80eaf2c34a94ad238f0687a557b656e56 Mon Sep 17 00:00:00 2001
From: Iku-turso <mikko.aspiala@gmail.com>
Date: Mon, 20 Mar 2023 13:42:11 +0200
Subject: [PATCH] Make webpack configuration support scss, fonts and images

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
---
 packages/infrastructure/webpack/package.json  |  2 ++
 .../webpack/src/get-react-config.js           | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/packages/infrastructure/webpack/package.json b/packages/infrastructure/webpack/package.json
index 3faa94494b..227cf351d2 100644
--- a/packages/infrastructure/webpack/package.json
+++ b/packages/infrastructure/webpack/package.json
@@ -27,8 +27,10 @@
     "css-loader": "^6.7.2",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
     "mini-css-extract-plugin": "^2.7.3",
+    "sass": "^1.58.2",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.1",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.10.0",
diff --git a/packages/infrastructure/webpack/src/get-react-config.js b/packages/infrastructure/webpack/src/get-react-config.js
index 6b83b6af86..439d913368 100644
--- a/packages/infrastructure/webpack/src/get-react-config.js
+++ b/packages/infrastructure/webpack/src/get-react-config.js
@@ -1,5 +1,9 @@
 const getNodeConfig = require("./get-node-config");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+
+// hack: hard-coded
+const sassCommonVars = "/Users/maspiala/work/lens/packages/core/src/renderer";
 
 module.exports =
   ({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
@@ -46,14 +50,44 @@ module.exports =
                 },
               },
 
+              {
+                loader: "postcss-loader",
+                options: {
+                  sourceMap: false,
+                  postcssOptions: {
+                    plugins: ["tailwindcss"],
+                  },
+                },
+              },
+
               {
                 loader: "sass-loader",
                 options: {
                   sourceMap: false,
+                  additionalData: `@import "${path.basename(sassCommonVars)}";`,
+
+                  sassOptions: {
+                    includePaths: [path.dirname(sassCommonVars)],
+                  },
                 },
               },
             ],
           },
+
+          {
+            test: /\.(ttf|eot|woff2?)$/,
+            type: "asset/resource",
+          },
+
+          {
+            test: /\.svg$/,
+            type: "asset/source", // exports the source code of the asset, so we get XML
+          },
+
+          {
+            test: /\.(jpg|png|ico)$/,
+            type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
+          },
         ],
       },
     };