Fix content_scripts CSS not working on production

programs/develop/build.spec.ts

@@ -196,10 +196,14 @@ describe('extension build', () => {
           browser: SUPPORTED_BROWSERS[0] as 'chrome',
           zipSource: true
         })
-      
+
         expect(
           fs.existsSync(
-            path.join(templatePath, 'dist', `${template.name}-template-0.0.1-source.zip`)
+            path.join(
+              templatePath,
+              'dist',
+              `${template.name}-template-0.0.1-source.zip`
+            )
           )
         ).toBeTruthy()
       },

programs/develop/install_scripts.sh

@@ -15,7 +15,6 @@ resolve_plugin_files=(
 scripts_plugin_files=(
   "$(dirname "$0")/webpack/plugin-extension/feature-scripts/steps/inject-content-css-during-dev.ts"
   "$(dirname "$0")/webpack/plugin-extension/feature-scripts/steps/add-hmr-accept-code.ts"
-  "$(dirname "$0")/webpack/plugin-extension/feature-scripts/steps/add-query-param-to-imported-css.ts"
 )
 
 reload_plugin_files=(

programs/develop/webpack/plugin-css/index.ts

@@ -38,13 +38,6 @@ export class CssPlugin {
         test: /\.css$/,
         exclude: /\.module\.css$/,
         oneOf: [
-          {
-            resourceQuery: /is_content_css_import=true/,
-            use: await commonStyleLoaders(projectPath, {
-              mode: this.mode,
-              useMiniCssExtractPlugin: false
-            })
-          },
           {
             use: await commonStyleLoaders(projectPath, {
               mode: this.mode,
@@ -56,13 +49,6 @@ export class CssPlugin {
       {
         test: /\.module\.css$/,
         oneOf: [
-          {
-            resourceQuery: /is_content_css_import=true/,
-            use: await commonStyleLoaders(projectPath, {
-              mode: this.mode,
-              useMiniCssExtractPlugin: false
-            })
-          },
           {
             use: await commonStyleLoaders(projectPath, {
               mode: this.mode,

programs/develop/webpack/plugin-extension/feature-manifest/steps/update-manifest.ts

@@ -1,3 +1,5 @@
+import fs from 'fs'
+import path from 'path'
 import {type Compiler, Compilation, sources} from 'webpack'
 import {getManifestOverrides} from '../manifest-overrides'
 import {getFilename, getManifestContent} from '../../../lib/utils'
@@ -32,6 +34,35 @@ export class UpdateManifest {
     )
   }
 
+  private applyProdOverrides(
+    compiler: Compiler,
+    overrides: Record<string, any>
+  ) {
+    if (!overrides.content_scripts) return {}
+
+    console.log('reach1')
+    return overrides.content_scripts.map(
+      (contentObj: {js: string[]; css: string[]}, index: number) => {
+        if (contentObj.js.length && !contentObj.css.length) {
+          const outputPath = compiler.options.output?.path || ''
+
+          // Make a .css file for every .js file in content_scripts
+          // so we can later reference it in the manifest.
+          contentObj.css = contentObj.js.map((js: string) => {
+            const contentCss = path.join(outputPath, js.replace('.js', '.css'))
+            return getFilename(
+              `content_scripts/content-${index}.css`,
+              contentCss,
+              {}
+            )
+          })
+        }
+
+        return contentObj
+      }
+    )
+  }
+
   apply(compiler: Compiler) {
     compiler.hooks.thisCompilation.tap(
       'manifest:update-manifest',
@@ -61,7 +92,16 @@ export class UpdateManifest {
             // During development, if user has only CSS files in content_scripts,
             // we add a JS file to the content_scripts bundle so that
             // these files can be dynamically imported, thus allowing HMR.
-            if (compiler.options.mode !== 'production') {
+            if (compiler.options.mode === 'development') {
+              if (patchedManifest.content_scripts) {
+                patchedManifest.content_scripts =
+                  this.applyDevOverrides(patchedManifest)
+              }
+            }
+
+            // During production, if user has the output of a CSS file in content_scripts,
+            // we add it to the manifest so that the file is copied to the output directory.
+            if (compiler.options.mode === 'development') {
               if (patchedManifest.content_scripts) {
                 patchedManifest.content_scripts =
                   this.applyDevOverrides(patchedManifest)
@@ -74,6 +114,48 @@ export class UpdateManifest {
             compilation.updateAsset('manifest.json', rawSource)
           }
         )
+
+        // During development, content_scripts are injected in the page
+        // via <style> tag. In production, these styles are bundled
+        // in a content_scripts CSS file, so we need to reference it
+        // in the manifest.
+        if (compiler.options.mode === 'production') {
+          compilation.hooks.afterProcessAssets.tap(
+            'manifest:update-manifest',
+            () => {
+              if (compilation.errors.length > 0) return
+
+              const manifest = getManifestContent(
+                compilation,
+                this.manifestPath
+              )
+
+              const overrides = getManifestOverrides(
+                this.manifestPath,
+                manifest,
+                this.excludeList || {}
+              )
+
+              const patchedManifest: Manifest = {
+                // Preserve all uncatched user entries
+                ...manifest,
+                ...JSON.parse(overrides)
+              }
+
+              if (patchedManifest.content_scripts) {
+                patchedManifest.content_scripts = this.applyProdOverrides(
+                  compiler,
+                  patchedManifest
+                )
+              }
+
+              const source = JSON.stringify(patchedManifest, null, 2)
+              const rawSource = new sources.RawSource(source)
+
+              compilation.updateAsset('manifest.json', rawSource)
+            }
+          )
+        }
       }
     )
   }

programs/develop/webpack/plugin-extension/feature-scripts/index.ts

@@ -107,31 +107,5 @@ export class ScriptsPlugin {
       includeList: this.includeList || {},
       excludeList: this.excludeList || {}
     }).apply(compiler)
-
-    // 5 - Fix the issue of content_scripts not being able to import
-    // CSS files via import statements. This loader adds the
-    // is_content_css_import=true query param to CSS imports in
-    // content_scripts. This skips the MiniCssExtractPlugin loader
-    // and allows the CSS to be injected in the DOM via <style> tags.
-    if (compiler.options.mode === 'development') {
-      compiler.options.module.rules.push({
-        test: /\.(js|mjs|jsx|mjsx|ts|mts|tsx|mtsx)$/,
-        include: [path.dirname(this.manifestPath)],
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: path.resolve(
-              __dirname,
-              './add-query-param-to-imported-css.js'
-            ),
-            options: {
-              manifestPath: this.manifestPath,
-              includeList: this.includeList || {},
-              excludeList: this.excludeList || {}
-            }
-          }
-        ]
-      })
-    }
   }
 }