From fc524562e01224172cf93e2b20314a0dfec35ffe Mon Sep 17 00:00:00 2001
From: Cezar Augusto <boss@cezaraugusto.net>
Date: Thu, 1 Aug 2024 18:08:57 -0300
Subject: [PATCH] Improve content_scripts error message

---
 programs/develop/webpack/lib/messages.ts                    | 6 +++---
 .../webpack-common-errors/compilation-error-handlers.ts     | 1 +
 .../webpack/plugin-errors/webpack-common-errors/index.ts    | 3 ++-
 programs/develop/webpack/webpack-config.ts                  | 3 +--
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/programs/develop/webpack/lib/messages.ts b/programs/develop/webpack/lib/messages.ts
index f967387d..70aa84d0 100644
--- a/programs/develop/webpack/lib/messages.ts
+++ b/programs/develop/webpack/lib/messages.ts
@@ -592,9 +592,9 @@ export function handleMultipleAssetsError(
 ) {
   const extFilename = filename.split('.').pop()
   const errorMsg =
-    `[${manifestName}'s content_scripts] One of your ${extFilename} ` +
-    `file imports is also defined as a content_script in manifest.json. Remove the ` +
-    `duplicate entry and try again.`
+    `content_scripts: One of your ${extFilename?.toUpperCase()} ` +
+    `imports is also a content_script CSS in manifest.json.\n\n` +
+    `Remove the duplicate entry and try again.`
 
   if (filename.startsWith('content_scripts')) {
     return errorMsg
diff --git a/programs/develop/webpack/plugin-errors/webpack-common-errors/compilation-error-handlers.ts b/programs/develop/webpack/plugin-errors/webpack-common-errors/compilation-error-handlers.ts
index 0a90b713..2e3f9dbf 100644
--- a/programs/develop/webpack/plugin-errors/webpack-common-errors/compilation-error-handlers.ts
+++ b/programs/develop/webpack/plugin-errors/webpack-common-errors/compilation-error-handlers.ts
@@ -2,6 +2,7 @@ import webpack from 'webpack'
 import * as messages from '../../lib/messages'
 
 export function handleMultipleAssetsError(
+  manifest: {name: string},
   error: webpack.WebpackError
 ): webpack.WebpackError | null {
   const actualMsg =
diff --git a/programs/develop/webpack/plugin-errors/webpack-common-errors/index.ts b/programs/develop/webpack/plugin-errors/webpack-common-errors/index.ts
index 5dfa4be2..80e32b64 100644
--- a/programs/develop/webpack/plugin-errors/webpack-common-errors/index.ts
+++ b/programs/develop/webpack/plugin-errors/webpack-common-errors/index.ts
@@ -20,7 +20,8 @@ export class WebpackCommonErrorsPlugin {
         // as multiple assets with the same name,
         // or missing dependencies.
         compilation.errors.forEach((error, index) => {
-          const multipleAssetsError = handleMultipleAssetsError(error)
+          const manifest = require(this.manifestPath)
+          const multipleAssetsError = handleMultipleAssetsError(manifest, error)
           const topLevelAwaitError = handleTopLevelAwaitError(
             this.manifestPath,
             error
diff --git a/programs/develop/webpack/webpack-config.ts b/programs/develop/webpack/webpack-config.ts
index 82e5c1d8..428c912f 100644
--- a/programs/develop/webpack/webpack-config.ts
+++ b/programs/develop/webpack/webpack-config.ts
@@ -194,7 +194,6 @@ export default function webpackConfig(
     infrastructureLogging: {
       level: 'none'
     },
-    // cache: false,
     performance: {
       hints: false,
       maxAssetSize: 999000,
@@ -207,7 +206,7 @@ export default function webpackConfig(
       // Enable native CSS support. Note that it's an experimental feature still under development
       // and will be enabled by default in webpack v6, however you can track the progress on GitHub
       // here: https://github.com/webpack/webpack/issues/14893.
-      css: devOptions.mode === 'production',
+      css: true,
       // Support the new WebAssembly according to the updated specification,
       // it makes a WebAssembly module an async module.
       asyncWebAssembly: true