Add resolve-url-loader (untested)

extension-js · Jul 24, 2024 · 3d92170 · 3d92170
1 parent 07d170d
commit 3d92170
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: {},