From 3d9217099ee746835c6592d8c9e1583ea27de887 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Wed, 24 Jul 2024 12:38:22 -0300
Subject: [PATCH] Add resolve-url-loader (untested)

---
 programs/develop/commands/build/index.ts      |  5 ++--
 programs/develop/package.json                 |  1 +
 .../plugin-css/common-style-loaders.ts        | 24 ++++++++++++++-----
 .../webpack/plugin-css/css-tools/sass.ts      |  1 -
 programs/develop/webpack/webpack-config.ts    |  3 +--
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/programs/develop/commands/build/index.ts b/programs/develop/commands/build/index.ts
index 896d7fda..fd2a16b6 100644
--- a/programs/develop/commands/build/index.ts
+++ b/programs/develop/commands/build/index.ts
@@ -5,7 +5,6 @@
 // ██████╔╝███████╗ ╚████╔╝ ███████╗███████╗╚██████╔╝██║
 // ╚═════╝ ╚══════╝  ╚═══╝  ╚══════╝╚══════╝ ╚═════╝ ╚═╝
 
-import {bold, red} from '@colors/colors/safe'
 import webpack from 'webpack'
 import compilerConfig from '../../webpack/webpack-config'
 import {getProjectPath} from '../../webpack/lib/get-project-path'
@@ -45,7 +44,7 @@ export default async function extensionBuild(
       plugins: allPluginsButBrowserRunners
     }
 
-    webpack(webpackConfigNoBrowser).run((err, stats) => {
+    webpack(webpackConfigNoBrowser).run(async (err, stats) => {
       if (err) {
         console.error(err.stack || err)
         process.exit(1)
@@ -60,7 +59,7 @@ export default async function extensionBuild(
       )
 
       if (buildOptions.zip || buildOptions.zipSource) {
-        generateZip(projectPath, {...buildOptions, browser})
+        await generateZip(projectPath, {...buildOptions, browser})
       }
 
       if (!stats?.hasErrors()) {
diff --git a/programs/develop/package.json b/programs/develop/package.json
index f811f851..5ef06b0a 100644
--- a/programs/develop/package.json
+++ b/programs/develop/package.json
@@ -59,6 +59,7 @@
     "postcss-preset-env": "^9.3.0",
     "postcss-scss": "^4.0.9",
     "react-refresh": "^0.14.0",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.70.0",
     "sass-loader": "^14.0.0",
     "slugify": "^1.6.6",
diff --git a/programs/develop/webpack/plugin-css/common-style-loaders.ts b/programs/develop/webpack/plugin-css/common-style-loaders.ts
index b86a3f08..9c88624b 100644
--- a/programs/develop/webpack/plugin-css/common-style-loaders.ts
+++ b/programs/develop/webpack/plugin-css/common-style-loaders.ts
@@ -49,12 +49,24 @@ export function commonStyleLoaders(
   }
 
   if (opts.loader) {
-    styleLoaders.push({
-      loader: opts.loader,
-      options: {
-        sourceMap: opts.mode === 'development'
-      } as any
-    })
+    styleLoaders.push(
+      ...[
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: opts.mode === 'production',
+            root: projectPath
+          }
+        },
+        {
+          loader: opts.loader,
+          options: {
+            sourceMap: opts.mode === 'development'
+          } as any
+        },
+        {}
+      ]
+    )
   }
 
   return styleLoaders
diff --git a/programs/develop/webpack/plugin-css/css-tools/sass.ts b/programs/develop/webpack/plugin-css/css-tools/sass.ts
index 07468c70..125e62d5 100644
--- a/programs/develop/webpack/plugin-css/css-tools/sass.ts
+++ b/programs/develop/webpack/plugin-css/css-tools/sass.ts
@@ -46,7 +46,6 @@ export function maybeUseSass(
   mode: DevOptions['mode']
 ): Loader[] {
   if (!isUsingSass(projectPath)) return []
-
   // try {
   //   require.resolve('sass')
   // } catch (e) {
diff --git a/programs/develop/webpack/webpack-config.ts b/programs/develop/webpack/webpack-config.ts
index 749b96d3..5cc4e89a 100644
--- a/programs/develop/webpack/webpack-config.ts
+++ b/programs/develop/webpack/webpack-config.ts
@@ -21,10 +21,10 @@ import {
 // Loaders
 import assetLoaders from './loaders/asset-loaders'
 import jsLoaders from './loaders/js-loaders'
-import {CssPlugin} from './plugin-css'
 
 // Plugins
 import {CompilationPlugin} from './plugin-compilation'
+import {CssPlugin} from './plugin-css'
 import {ExtensionPlugin} from './plugin-extension'
 import {ReloadPlugin} from './plugin-reload'
 import compatPlugin from './plugin-compat'
@@ -40,7 +40,6 @@ export default function webpackConfig(
   {...devOptions}: DevOptions
 ): webpack.Configuration {
   const manifestPath = path.join(projectPath, 'manifest.json')
-
   return {
     mode: devOptions.mode,
     entry: {},