Move browserslist loading webpack-config.ts (#30889)

packages/next/build/webpack-config.ts

@@ -55,6 +55,21 @@ import { TelemetryPlugin } from './webpack/plugins/telemetry-plugin'
 import type { Span } from '../trace'
 import isError from '../lib/is-error'
 import { getRawPageExtensions } from './utils'
+import browserslist from 'browserslist'
+
+function getSupportedBrowsers(
+  dir: string,
+  isDevelopment: boolean
+): string[] | undefined {
+  let browsers: any
+  try {
+    browsers = browserslist.loadConfig({
+      path: dir,
+      env: isDevelopment ? 'development' : 'production',
+    })
+  } catch {}
+  return browsers
+}
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
@@ -338,6 +353,7 @@ export default async function getBaseWebpackConfig(
     runWebpackSpan: Span
   }
 ): Promise<webpack.Configuration> {
+  const supportedBrowsers = await getSupportedBrowsers(dir, dev)
   const hasRewrites =
     rewrites.beforeFiles.length > 0 ||
     rewrites.afterFiles.length > 0 ||
@@ -1671,6 +1687,7 @@ export default async function getBaseWebpackConfig(
   }
 
   webpackConfig = await buildConfiguration(webpackConfig, {
+    supportedBrowsers,
     rootDirectory: dir,
     customAppFile: new RegExp(escapeRegExp(path.join(pagesDir, `_app`))),
     isDevelopment: dev,
@@ -1879,7 +1896,7 @@ export default async function getBaseWebpackConfig(
         )
     }
   } else if (!config.future.strictPostcssConfiguration) {
-    await __overrideCssConfiguration(dir, !dev, webpackConfig)
+    await __overrideCssConfiguration(dir, supportedBrowsers, webpackConfig)
   }
 
   // Inject missing React Refresh loaders so that development mode is fast:

packages/next/build/webpack/config/blocks/css/index.ts

@@ -139,7 +139,7 @@ export const css = curry(async function css(
 
   const postCssPlugins = await getPostCssPlugins(
     ctx.rootDirectory,
-    ctx.isProduction,
+    ctx.supportedBrowsers,
     !ctx.future.strictPostcssConfiguration
   )
 

packages/next/build/webpack/config/blocks/css/overrideCssConfiguration.ts

@@ -4,10 +4,13 @@ import postcss from 'postcss'
 
 export async function __overrideCssConfiguration(
   rootDirectory: string,
-  isProduction: boolean,
+  supportedBrowsers: string[] | undefined,
   config: webpack.Configuration
 ) {
-  const postCssPlugins = await getPostCssPlugins(rootDirectory, isProduction)
+  const postCssPlugins = await getPostCssPlugins(
+    rootDirectory,
+    supportedBrowsers
+  )
 
   function patch(rule: webpack.RuleSetRule) {
     if (

packages/next/build/webpack/config/blocks/css/plugins.ts

@@ -1,6 +1,5 @@
 import chalk from 'chalk'
 import { findConfig } from '../../../../../lib/find-config'
-import browserslist from 'browserslist'
 
 type CssPluginCollection_Array = (string | [string, boolean | object])[]
 
@@ -89,23 +88,14 @@ async function loadPlugin(
 }
 
 function getDefaultPlugins(
-  baseDirectory: string,
-  isProduction: boolean
+  supportedBrowsers: string[] | undefined
 ): CssPluginCollection {
-  let browsers: any
-  try {
-    browsers = browserslist.loadConfig({
-      path: baseDirectory,
-      env: isProduction ? 'production' : 'development',
-    })
-  } catch {}
-
   return [
     require.resolve('next/dist/compiled/postcss-flexbugs-fixes'),
     [
       require.resolve('next/dist/compiled/postcss-preset-env'),
       {
-        browsers: browsers ?? ['defaults'],
+        browsers: supportedBrowsers ?? ['defaults'],
         autoprefixer: {
           // Disable legacy flexbox support
           flexbox: 'no-2009',
@@ -123,7 +113,7 @@ function getDefaultPlugins(
 
 export async function getPostCssPlugins(
   dir: string,
-  isProduction: boolean,
+  supportedBrowsers: string[] | undefined,
   defaults: boolean = false
 ): Promise<import('postcss').AcceptedPlugin[]> {
   let config = defaults
@@ -131,7 +121,7 @@ export async function getPostCssPlugins(
     : await findConfig<{ plugins: CssPluginCollection }>(dir, 'postcss')
 
   if (config == null) {
-    config = { plugins: getDefaultPlugins(dir, isProduction) }
+    config = { plugins: getDefaultPlugins(supportedBrowsers) }
   }
 
   if (typeof config === 'function') {

packages/next/build/webpack/config/index.ts

@@ -8,6 +8,7 @@ import { ConfigurationContext, pipe } from './utils'
 export async function build(
   config: webpack.Configuration,
   {
+    supportedBrowsers,
     rootDirectory,
     customAppFile,
     isDevelopment,
@@ -21,6 +22,7 @@ export async function build(
     experimental,
     disableStaticImages,
   }: {
+    supportedBrowsers: string[] | undefined
     rootDirectory: string
     customAppFile: RegExp
     isDevelopment: boolean
@@ -36,6 +38,7 @@ export async function build(
   }
 ): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
+    supportedBrowsers,
     rootDirectory,
     customAppFile,
     isDevelopment,

packages/next/build/webpack/config/utils.ts

@@ -2,6 +2,7 @@ import { webpack } from 'next/dist/compiled/webpack/webpack'
 import { NextConfigComplete } from '../../../server/config-shared'
 
 export type ConfigurationContext = {
+  supportedBrowsers: string[] | undefined
   rootDirectory: string
   customAppFile: RegExp