Fix type in CSS plugin

Author: cezaraugusto

programs/develop/webpack/plugin-css/css-in-content-script-loader.ts

@@ -9,17 +9,19 @@ export async function cssInContentScriptLoader(
 ) {
   const manifestPath = path.join(projectPath, 'manifest.json')
 
-  return [{
-    test: /\.css$/,
-    type: 'asset',
-    generator: {
-      // Add contenthash to avoid naming collisions between
-      // different content script CSS files
-      filename: 'content_scripts/[name].[contenthash:8].css'
-    },
-    issuer: (issuer: string) => isContentScriptEntry(issuer, manifestPath),
-    use: await commonStyleLoaders(projectPath, {
-      mode: mode as 'development' | 'production'
-    })
-  }]
+  return [
+    {
+      test: /\.css$/,
+      type: 'asset',
+      generator: {
+        // Add contenthash to avoid naming collisions between
+        // different content script CSS files
+        filename: 'content_scripts/[name].[contenthash:8].css'
+      },
+      issuer: (issuer: string) => isContentScriptEntry(issuer, manifestPath),
+      use: await commonStyleLoaders(projectPath, {
+        mode: mode as 'development' | 'production'
+      })
+    }
+  ]
 }

programs/develop/webpack/plugin-css/css-in-html-loader.ts

@@ -9,13 +9,15 @@ export async function cssInHtmlLoader(
 ) {
   const manifestPath = path.join(projectPath, 'manifest.json')
 
-  return {
-    test: /\.css$/,
-    type: 'css',
-    // type: 'css' breaks content scripts so let's avoid it
-    issuer: (issuer: string) => !isContentScriptEntry(issuer, manifestPath),
-    use: await commonStyleLoaders(projectPath, {
-      mode: mode as 'development' | 'production'
-    })
-  }
+  return [
+    {
+      test: /\.css$/,
+      type: 'css',
+      // type: 'css' breaks content scripts so let's avoid it
+      issuer: (issuer: string) => !isContentScriptEntry(issuer, manifestPath),
+      use: await commonStyleLoaders(projectPath, {
+        mode: mode as 'development' | 'production'
+      })
+    }
+  ]
 }

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

@@ -37,8 +37,8 @@ export class CssPlugin {
     // For HTML we need to use the css loader because it's a HTML file
     // and we need to load it as a CSS file.
     const loaders: RuleSetRule[] = [
-      await cssInContentScriptLoader(projectPath, mode),
-      await cssInHtmlLoader(projectPath, mode)
+      ...(await cssInContentScriptLoader(projectPath, mode)),
+      ...(await cssInHtmlLoader(projectPath, mode))
     ]
 
     // Add Sass/Less support if needed

programs/develop/webpack/webpack-config.ts

@@ -47,9 +47,9 @@ export default function webpackConfig(
       ? 'gecko-based'
       : devOptions.browser
 
+  // Keep hot updates for content scripts in development mode
   const cleanConfig = devOptions.output?.clean
     ? devOptions.output.clean
-    // Keep hot updates for content scripts in development mode
     : devOptions.mode === 'development'
 
   return {