Disable CSS Support When Manually Configured (#9735)

* Disable CSS Support When Manually Configured * upgrade TS * adjust yarn lock * Remove another version of TypeScript * Remove possibly leftover loader * Revert "Remove possibly leftover loader" This reverts commit 7ce2d1a. * Update to use no-op loader
vercel · Dec 13, 2019 · 32cb5e1 · 32cb5e1
1 parent 62a6ece
commit 32cb5e1
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
     "tree-kill": "1.2.1",
-    "typescript": "3.7.2",
+    "typescript": "3.7.3",
     "wait-port": "0.2.2",
     "wd": "1.11.3",
     "webpack-bundle-analyzer": "3.3.2"

diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -42,7 +42,7 @@
     "prompts": "2.1.0",
     "rimraf": "3.0.0",
     "tar": "4.4.10",
-    "typescript": "^3.5.3",
+    "typescript": "3.7.3",
     "update-check": "1.5.3",
     "validate-npm-package-name": "3.0.0"
   }

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1,6 +1,5 @@
 import crypto from 'crypto'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import path from 'path'
 // @ts-ignore: Currently missing types
 import PnpWebpackPlugin from 'pnp-webpack-plugin'
@@ -35,6 +34,7 @@ import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
 import { CssMinimizerPlugin } from './webpack/plugins/css-minimizer-plugin'
 import { importAutoDllPlugin } from './webpack/plugins/dll-import'
+import MiniCssExtractPlugin from './webpack/plugins/mini-css-extract-plugin'
 import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
 import NextEsmPlugin from './webpack/plugins/next-esm-plugin'
 import NextJsSsrImportPlugin from './webpack/plugins/nextjs-ssr-import'
@@ -864,6 +864,65 @@ export default async function getBaseWebpackConfig(
     }
   }
 
+  function canMatchCss(rule: webpack.RuleSetCondition | undefined): boolean {
+    if (!rule) {
+      return false
+    }
+
+    const fileName = '/tmp/test.css'
+
+    if (rule instanceof RegExp && rule.test(fileName)) {
+      return true
+    }
+
+    if (typeof rule === 'function') {
+      try {
+        if (rule(fileName)) {
+          return true
+        }
+      } catch (_) {}
+    }
+
+    if (Array.isArray(rule) && rule.some(canMatchCss)) {
+      return true
+    }
+
+    return false
+  }
+
+  if (config.experimental.css) {
+    const hasUserCssConfig =
+      webpackConfig.module &&
+      webpackConfig.module.rules.some(
+        rule => canMatchCss(rule.test) || canMatchCss(rule.include)
+      )
+
+    if (hasUserCssConfig) {
+      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
+        )
+      }
+    }
+  }
+
   // check if using @zeit/next-typescript and show warning
   if (
     isServer &&

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -1,7 +1,7 @@
 import curry from 'lodash.curry'
-import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import path from 'path'
 import webpack, { Configuration } from 'webpack'
+import MiniCssExtractPlugin from '../../../plugins/mini-css-extract-plugin'
 import { loader } from '../../helpers'
 import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils'
 import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
@@ -71,7 +71,18 @@ export const css = curry(async function css(
     return config
   }
 
-  const fns: ConfigurationFn[] = []
+  const fns: ConfigurationFn[] = [
+    loader({
+      oneOf: [
+        {
+          // Impossible regex expression
+          test: /a^/,
+          loader: 'noop-loader',
+          options: { __next_css_remove: true },
+        },
+      ],
+    }),
+  ]
 
   const postCssPlugins = await getPostCssPlugins(ctx.rootDirectory)
   // CSS Modules support must be enabled on the server and client so the class

diff --git a/packages/next/build/webpack/plugins/css-minimizer-plugin.ts b/packages/next/build/webpack/plugins/css-minimizer-plugin.ts
@@ -12,6 +12,8 @@ type CssMinimizerPluginOptions = {
 }
 
 export class CssMinimizerPlugin {
+  __next_css_remove = true
+
   private options: CssMinimizerPluginOptions
 
   constructor(options: CssMinimizerPluginOptions) {

diff --git a/packages/next/build/webpack/plugins/mini-css-extract-plugin.ts b/packages/next/build/webpack/plugins/mini-css-extract-plugin.ts
@@ -0,0 +1,5 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+export default class NextMiniCssExtractPlugin extends MiniCssExtractPlugin {
+  __next_css_remove = true
+}
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -185,7 +185,7 @@
     "resolve": "1.11.0",
     "taskr": "1.1.0",
     "text-table": "0.2.0",
-    "typescript": "3.5.1",
+    "typescript": "3.7.3",
     "unistore": "3.4.1"
   },
   "engines": {

diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
@@ -50,6 +50,7 @@ const babelServerOpts = {
     ],
   ],
   plugins: [
+    '@babel/plugin-proposal-optional-chaining',
     'babel-plugin-dynamic-import-node',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
   ],

diff --git a/test/integration/production-config/next.config.js b/test/integration/production-config/next.config.js
@@ -24,6 +24,7 @@ module.exports = withCSS(
       // Make sure entries are not getting disposed.
       maxInactiveAge: 1000 * 60 * 60,
     },
+    experimental: { css: true },
     webpack(config) {
       // When next-css is `npm link`ed we have to solve loaders from the project root
       const nextLocation = path.join(

diff --git a/test/integration/production-config/pages/_app.js b/test/integration/production-config/pages/_app.js
@@ -1,8 +1,6 @@
 import App from 'next/app'
 import React from 'react'
 
-import '../styles.css'
-
 export default class MyApp extends App {
   render() {
     const { Component, pageProps } = this.props

diff --git a/test/integration/production-config/pages/index.js b/test/integration/production-config/pages/index.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 
+import '../styles.css'
+
 export default class extends Component {
   constructor(props) {
     super(props)

diff --git a/yarn.lock b/yarn.lock
@@ -15202,20 +15202,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.1.tgz#ba72a6a600b2158139c5dd8850f700e231464202"
-  integrity sha512-64HkdiRv1yYZsSe4xC1WVgamNigVYjlssIoaH2HcZF0+ijsk5YK2g0G34w9wJkze8+5ow4STd22AynfO6ZYYLw==
-
-typescript@3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
-  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
-
-typescript@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
-  integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==
+typescript@3.7.3:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
+  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
 
 uglify-js@^3.1.4:
   version "3.5.15"