Fix content_scripts not working in production (#172)

* Fix content_scripts CSS not working on production

examples/data.ts

@@ -29,28 +29,28 @@ const JS_TEMPLATES: Template[] = [
   //   hasEnv: false,
   //   configFiles: ['babel.config.json']
   // },
-  // {
-  //   name: 'content-extension-config',
-  //   uiContext: ['content'],
-  //   uiFramework: 'react',
-  //   css: 'css',
-  //   hasBackground: true,
-  //   hasEnv: false,
-  //   configFiles: [
-  //     'extension.config.js',
-  //     'tsconfig.json',
-  //     'postcss.config.js',
-  //     'tailwind.config.js'
-  //   ]
-  // },
+  {
+    name: 'content-extension-config',
+    uiContext: ['content'],
+    uiFramework: 'react',
+    css: 'css',
+    hasBackground: true,
+    hasEnv: false,
+    configFiles: [
+      'extension.config.js',
+      'tsconfig.json',
+      'postcss.config.js',
+      'tailwind.config.js'
+    ]
+  },
   {
     name: 'config-stylelint',
     uiContext: ['newTab'],
     uiFramework: undefined,
-    css: 'css',
+    css: 'sass',
     hasBackground: false,
     hasEnv: false,
-    configFiles: ['stylelint.config.json']
+    configFiles: ['.stylelintrc.json']
   },
   {
     name: 'content',
@@ -101,7 +101,7 @@ const JS_TEMPLATES: Template[] = [
     name: 'content-sass-module',
     uiContext: ['content'],
     uiFramework: undefined,
-    css: 'css',
+    css: 'sass',
     hasBackground: false,
     hasEnv: false,
     configFiles: undefined
@@ -146,7 +146,7 @@ const JS_TEMPLATES: Template[] = [
     name: 'new-sass',
     uiContext: ['newTab'],
     uiFramework: undefined,
-    css: 'css',
+    css: 'sass',
     hasBackground: false,
     hasEnv: false,
     configFiles: undefined

examples/types.ts

@@ -3,8 +3,9 @@ export type ConfigFiles =
   | 'postcss.config.js'
   | 'tailwind.config.js'
   | 'tsconfig.json'
-  | 'stylelint.config.json'
+  | '.stylelintrc.json'
   | 'extension.config.js'
+  | 'babel.config.json'
 
 export interface Template {
   name: string

programs/create/create.spec.ts

@@ -101,7 +101,7 @@ describe('extension create', () => {
           ).toBeTruthy()
 
           // Expect [uiContext]/styles.sass|less|css for styles
-          if (template.name?.includes('sass')) {
+          if (template.css === 'sass') {
             expect(
               fileExists(template.name, `${context.toLowerCase()}/styles.scss`)
             ).toBeTruthy()

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,4 @@
+import path from 'path'
 import {type Compiler, Compilation, sources} from 'webpack'
 import {getManifestOverrides} from '../manifest-overrides'
 import {getFilename, getManifestContent} from '../../../lib/utils'
@@ -32,6 +33,34 @@ export class UpdateManifest {
     )
   }
 
+  private applyProdOverrides(
+    compiler: Compiler,
+    overrides: Record<string, any>
+  ) {
+    if (!overrides.content_scripts) return {}
+
+    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 +90,17 @@ 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, webpack styles are bundled in a CSS file,
+            // and not injected in the page via <style> tag. We need to
+            // reference these files in the manifest.
+            if (compiler.options.mode === 'development') {
               if (patchedManifest.content_scripts) {
                 patchedManifest.content_scripts =
                   this.applyDevOverrides(patchedManifest)
@@ -74,6 +113,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 || {}
-            }
-          }
-        ]
-      })
-    }
   }
 }