Remove launched experimental options (#12197)

vercel · Apr 25, 2020 · 5d8968f · 5d8968f
1 parent fcc6d7d
commit 5d8968f
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 175 deletions.
diff --git a/examples/with-carbon-components/next.config.js b/examples/with-carbon-components/next.config.js
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -448,9 +448,11 @@ export default async function getBaseWebpackConfig(
       ? 'anonymous'
       : config.crossOrigin
 
-  let customAppFile: string | null = config.experimental.css
-    ? await findPageFile(pagesDir, '/_app', config.pageExtensions)
-    : null
+  let customAppFile: string | null = await findPageFile(
+    pagesDir,
+    '/_app',
+    config.pageExtensions
+  )
   if (customAppFile) {
     customAppFile = path.resolve(path.join(pagesDir, customAppFile))
   }
@@ -644,20 +646,19 @@ export default async function getBaseWebpackConfig(
           terserOptions,
         }),
         // Minify CSS
-        config.experimental.css &&
-          new CssMinimizerPlugin({
-            postcssOptions: {
-              map: {
-                // `inline: false` generates the source map in a separate file.
-                // Otherwise, the CSS file is needlessly large.
-                inline: false,
-                // `annotation: false` skips appending the `sourceMappingURL`
-                // to the end of the CSS file. Webpack already handles this.
-                annotation: false,
-              },
+        new CssMinimizerPlugin({
+          postcssOptions: {
+            map: {
+              // `inline: false` generates the source map in a separate file.
+              // Otherwise, the CSS file is needlessly large.
+              inline: false,
+              // `annotation: false` skips appending the `sourceMappingURL`
+              // to the end of the CSS file. Webpack already handles this.
+              annotation: false,
             },
-          }),
-      ].filter(Boolean),
+          },
+        }),
+      ],
     },
     context: dir,
     node: {
@@ -1031,8 +1032,6 @@ export default async function getBaseWebpackConfig(
     customAppFile,
     isDevelopment: dev,
     isServer,
-    hasSupportCss: !!config.experimental.css,
-    hasSupportScss: !!config.experimental.scss,
     assetPrefix: config.assetPrefix || '',
     sassOptions: config.experimental.sassOptions,
   })
@@ -1095,49 +1094,47 @@ export default async function getBaseWebpackConfig(
     return false
   }
 
-  if (config.experimental.css) {
-    const hasUserCssConfig =
-      webpackConfig.module?.rules.some(
-        rule => canMatchCss(rule.test) || canMatchCss(rule.include)
-      ) ?? false
-
-    if (hasUserCssConfig) {
-      // only show warning for one build
-      if (isServer) {
-        console.warn(
-          chalk.yellow.bold('Warning: ') +
-            chalk.bold(
-              'Built-in CSS support is being disabled due to custom CSS configuration being detected.\n'
-            ) +
-            'See here for more info: https://err.sh/next.js/built-in-css-disabled\n'
-        )
-      }
+  const hasUserCssConfig =
+    webpackConfig.module?.rules.some(
+      rule => canMatchCss(rule.test) || canMatchCss(rule.include)
+    ) ?? false
 
-      if (webpackConfig.module?.rules.length) {
-        // Remove default CSS Loader
-        webpackConfig.module.rules = webpackConfig.module.rules.filter(
-          r =>
-            !(
-              typeof r.oneOf?.[0]?.options === 'object' &&
-              r.oneOf[0].options.__next_css_remove === true
-            )
-        )
-      }
-      if (webpackConfig.plugins?.length) {
-        // Disable CSS Extraction Plugin
-        webpackConfig.plugins = webpackConfig.plugins.filter(
-          p => (p as any).__next_css_remove !== true
-        )
-      }
-      if (webpackConfig.optimization?.minimizer?.length) {
-        // Disable CSS Minifier
-        webpackConfig.optimization.minimizer = webpackConfig.optimization.minimizer.filter(
-          e => (e as any).__next_css_remove !== true
-        )
-      }
-    } else {
-      await __overrideCssConfiguration(dir, !dev, webpackConfig)
+  if (hasUserCssConfig) {
+    // only show warning for one build
+    if (isServer) {
+      console.warn(
+        chalk.yellow.bold('Warning: ') +
+          chalk.bold(
+            'Built-in CSS support is being disabled due to custom CSS configuration being detected.\n'
+          ) +
+          'See here for more info: https://err.sh/next.js/built-in-css-disabled\n'
+      )
+    }
+
+    if (webpackConfig.module?.rules.length) {
+      // Remove default CSS Loader
+      webpackConfig.module.rules = webpackConfig.module.rules.filter(
+        r =>
+          !(
+            typeof r.oneOf?.[0]?.options === 'object' &&
+            r.oneOf[0].options.__next_css_remove === true
+          )
+      )
     }
+    if (webpackConfig.plugins?.length) {
+      // Disable CSS Extraction Plugin
+      webpackConfig.plugins = webpackConfig.plugins.filter(
+        p => (p as any).__next_css_remove !== true
+      )
+    }
+    if (webpackConfig.optimization?.minimizer?.length) {
+      // Disable CSS Minifier
+      webpackConfig.optimization.minimizer = webpackConfig.optimization.minimizer.filter(
+        e => (e as any).__next_css_remove !== true
+      )
+    }
+  } else {
+    await __overrideCssConfiguration(dir, !dev, webpackConfig)
   }
 
   // check if using @zeit/next-typescript and show warning

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -25,15 +25,9 @@ const regexSassGlobal = /(?<!\.module)\.(scss|sass)$/
 const regexSassModules = /\.module\.(scss|sass)$/
 
 export const css = curry(async function css(
-  enabled: boolean,
-  scssEnabled: boolean,
   ctx: ConfigurationContext,
   config: Configuration
 ) {
-  if (!enabled) {
-    return config
-  }
-
   const sassPreprocessors: webpack.RuleSetUseItem[] = [
     // First, process files with `sass-loader`: this inlines content, and
     // compiles away the proprietary syntax.
@@ -128,41 +122,36 @@ export const css = curry(async function css(
       ],
     })
   )
-  if (scssEnabled) {
-    fns.push(
-      loader({
-        oneOf: [
-          // Opt-in support for Sass (using .scss or .sass extensions).
-          {
-            // Sass Modules should never have side effects. This setting will
-            // allow unused Sass to be removed from the production build.
-            // We ensure this by disallowing `:global()` Sass at the top-level
-            // via the `pure` mode in `css-loader`.
-            sideEffects: false,
-            // Sass Modules are activated via this specific extension.
-            test: regexSassModules,
-            // Sass Modules are only supported in the user's application. We're
-            // not yet allowing Sass imports _within_ `node_modules`.
-            issuer: {
-              include: [ctx.rootDirectory],
-              exclude: /node_modules/,
-            },
-            use: getCssModuleLoader(ctx, postCssPlugins, sassPreprocessors),
+  fns.push(
+    loader({
+      oneOf: [
+        // Opt-in support for Sass (using .scss or .sass extensions).
+        {
+          // Sass Modules should never have side effects. This setting will
+          // allow unused Sass to be removed from the production build.
+          // We ensure this by disallowing `:global()` Sass at the top-level
+          // via the `pure` mode in `css-loader`.
+          sideEffects: false,
+          // Sass Modules are activated via this specific extension.
+          test: regexSassModules,
+          // Sass Modules are only supported in the user's application. We're
+          // not yet allowing Sass imports _within_ `node_modules`.
+          issuer: {
+            include: [ctx.rootDirectory],
+            exclude: /node_modules/,
           },
-        ],
-      })
-    )
-  }
+          use: getCssModuleLoader(ctx, postCssPlugins, sassPreprocessors),
+        },
+      ],
+    })
+  )
 
   // Throw an error for CSS Modules used outside their supported scope
   fns.push(
     loader({
       oneOf: [
         {
-          test: [
-            regexCssModules,
-            (scssEnabled && regexSassModules) as RegExp,
-          ].filter(Boolean),
+          test: [regexCssModules, regexSassModules].filter(Boolean),
           use: {
             loader: 'error-loader',
             options: {
@@ -179,10 +168,7 @@ export const css = curry(async function css(
       loader({
         oneOf: [
           {
-            test: [
-              regexCssGlobal,
-              (scssEnabled && regexSassGlobal) as RegExp,
-            ].filter(Boolean),
+            test: [regexCssGlobal, regexSassGlobal].filter(Boolean),
             use: require.resolve('next/dist/compiled/ignore-loader'),
           },
         ],
@@ -205,35 +191,30 @@ export const css = curry(async function css(
         ],
       })
     )
-    if (scssEnabled) {
-      fns.push(
-        loader({
-          oneOf: [
-            {
-              // A global Sass import always has side effects. Webpack will tree
-              // shake the Sass without this option if the issuer claims to have
-              // no side-effects.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-              test: regexSassGlobal,
-              issuer: { include: ctx.customAppFile },
-              use: getGlobalCssLoader(ctx, postCssPlugins, sassPreprocessors),
-            },
-          ],
-        })
-      )
-    }
+    fns.push(
+      loader({
+        oneOf: [
+          {
+            // A global Sass import always has side effects. Webpack will tree
+            // shake the Sass without this option if the issuer claims to have
+            // no side-effects.
+            // See https://github.com/webpack/webpack/issues/6571
+            sideEffects: true,
+            test: regexSassGlobal,
+            issuer: { include: ctx.customAppFile },
+            use: getGlobalCssLoader(ctx, postCssPlugins, sassPreprocessors),
+          },
+        ],
+      })
+    )
   }
 
   // Throw an error for Global CSS used inside of `node_modules`
   fns.push(
     loader({
       oneOf: [
         {
-          test: [
-            regexCssGlobal,
-            (scssEnabled && regexSassGlobal) as RegExp,
-          ].filter(Boolean),
+          test: [regexCssGlobal, regexSassGlobal].filter(Boolean),
           issuer: { include: [/node_modules/] },
           use: {
             loader: 'error-loader',
@@ -251,10 +232,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: [
-            regexCssGlobal,
-            (scssEnabled && regexSassGlobal) as RegExp,
-          ].filter(Boolean),
+          test: [regexCssGlobal, regexSassGlobal].filter(Boolean),
           use: {
             loader: 'error-loader',
             options: {

diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
@@ -10,17 +10,13 @@ export async function build(
     customAppFile,
     isDevelopment,
     isServer,
-    hasSupportCss,
-    hasSupportScss,
     assetPrefix,
     sassOptions,
   }: {
     rootDirectory: string
     customAppFile: string | null
     isDevelopment: boolean
     isServer: boolean
-    hasSupportCss: boolean
-    hasSupportScss: boolean
     assetPrefix: string
     sassOptions: any
   }
@@ -40,6 +36,6 @@ export async function build(
     sassOptions,
   }
 
-  const fn = pipe(base(ctx), css(hasSupportCss, hasSupportScss, ctx))
+  const fn = pipe(base(ctx), css(ctx))
   return fn(config)
 }
diff --git a/packages/next/next-server/lib/utils.ts b/packages/next/next-server/lib/utils.ts
@@ -158,7 +158,6 @@ export type DocumentProps = DocumentInitialProps & {
   hybridAmp: boolean
   staticMarkup: boolean
   isDevelopment: boolean
-  hasCssMode: boolean
   devFiles: string[]
   files: string[]
   lowPriorityFiles: string[]

diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
@@ -41,8 +41,6 @@ const defaultConfig: { [key: string]: any } = {
       (Number(process.env.CIRCLE_NODE_TOTAL) ||
         (os.cpus() || { length: 1 }).length) - 1
     ),
-    css: true,
-    scss: true,
     documentMiddleware: false,
     granularChunks: true,
     modern: false,
@@ -155,15 +153,6 @@ function assignDefaults(userConfig: { [key: string]: any }) {
     )
   }
   if (result.experimental) {
-    if (result.experimental.css) {
-      // The new CSS support requires granular chunks be enabled.
-      if (result.experimental.granularChunks !== true) {
-        throw new Error(
-          `The new CSS support requires granular chunks be enabled.`
-        )
-      }
-    }
-
     if (typeof result.experimental.basePath !== 'string') {
       throw new Error(
         `Specified basePath is not a string, found type "${typeof result

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
@@ -119,7 +119,6 @@ export default class Server {
     assetPrefix?: string
     canonicalBase: string
     documentMiddlewareEnabled: boolean
-    hasCssMode: boolean
     dev?: boolean
     previewProps: __ApiPreviewProps
     customServer?: boolean
@@ -174,7 +173,6 @@ export default class Server {
       canonicalBase: this.nextConfig.amp.canonicalBase,
       documentMiddlewareEnabled: this.nextConfig.experimental
         .documentMiddleware,
-      hasCssMode: this.nextConfig.experimental.css,
       staticMarkup,
       buildId: this.buildId,
       generateEtags,