Enable New CSS Support by Default (#9927)

* Enable New CSS Support by Default

* Adjust configs

* Fix invisible AMP body

* Fix AMP validation warning

* test fix

* Use expression that won't be eliminated by babel

packages/next/client/dev/amp-dev.js

@@ -3,6 +3,7 @@ import fetch from 'unfetch'
 import EventSourcePolyfill from './event-source-polyfill'
 import { getEventSourceWrapper } from './error-overlay/eventsource'
 import { setupPing } from './on-demand-entries-utils'
+import { displayContent } from './fouc'
 
 if (!window.EventSource) {
   window.EventSource = EventSourcePolyfill
@@ -89,3 +90,4 @@ getEventSourceWrapper({
 })
 
 setupPing(assetPrefix, () => page)
+displayContent()

packages/next/client/dev/fouc.js

@@ -0,0 +1,14 @@
+export function displayContent() {
+  // This is the fallback helper that removes Next.js' no-FOUC styles when
+  // CSS mode is enabled. This only really activates if you haven't created
+  // _any_ styles in your application yet.
+  ;(window.requestAnimationFrame || setTimeout)(function() {
+    for (
+      var x = document.querySelectorAll('[data-next-hide-fouc]'), i = x.length;
+      i--;
+
+    ) {
+      x[i].parentNode.removeChild(x[i])
+    }
+  })
+}

packages/next/client/next-dev.js

@@ -1,15 +1,18 @@
+/* globals __REPLACE_NOOP_IMPORT__ */
 import initNext, * as next from './'
 import EventSourcePolyfill from './dev/event-source-polyfill'
 import initOnDemandEntries from './dev/on-demand-entries-client'
 import initWebpackHMR from './dev/webpack-hot-middleware-client'
 import initializeBuildWatcher from './dev/dev-build-watcher'
 import initializePrerenderIndicator from './dev/prerender-indicator'
+import { displayContent } from './dev/fouc'
 
 // Temporary workaround for the issue described here:
 // https://github.com/zeit/next.js/issues/3775#issuecomment-407438123
 // The runtimeChunk doesn't have dynamic import handling code when there hasn't been a dynamic import
 // The runtimeChunk can't hot reload itself currently to correct it when adding pages using on-demand-entries
-// REPLACE_NOOP_IMPORT
+// eslint-disable-next-line no-unused-expressions
+__REPLACE_NOOP_IMPORT__
 
 // Support EventSource on Internet Explorer 11
 if (!window.EventSource) {
@@ -36,19 +39,7 @@ initNext({ webpackHMR })
       initializePrerenderIndicator()
     }
 
-    // This is the fallback helper that removes Next.js' no-FOUC styles when
-    // CSS mode is enabled. This only really activates if you haven't created
-    // _any_ styles in your application yet.
-    ;(window.requestAnimationFrame || setTimeout)(function() {
-      for (
-        var x = document.querySelectorAll('[data-next-hide-fouc]'),
-          i = x.length;
-        i--;
-
-      ) {
-        x[i].parentNode.removeChild(x[i])
-      }
-    })
+    displayContent()
 
     let lastScroll
 

packages/next/next-server/server/config.ts

@@ -41,7 +41,7 @@ const defaultConfig: { [key: string]: any } = {
       (Number(process.env.CIRCLE_NODE_TOTAL) ||
         (os.cpus() || { length: 1 }).length) - 1
     ),
-    css: false,
+    css: true,
     documentMiddleware: false,
     granularChunks: true,
     modern: false,
@@ -107,7 +107,11 @@ function assignDefaults(userConfig: { [key: string]: any }) {
   if (result.experimental) {
     if (result.experimental.css) {
       // The new CSS support requires granular chunks be enabled.
-      result.experimental.granularChunks = true
+      if (result.experimental.granularChunks !== true) {
+        throw new Error(
+          `The new CSS support requires granular chunks be enabled.`
+        )
+      }
     }
 
     if (typeof result.experimental.basePath !== 'string') {

packages/next/pages/_document.tsx

@@ -400,11 +400,15 @@ export class Head extends Component<
             <>
               <style
                 data-next-hide-fouc
+                data-ampdevmode={inAmpMode ? 'true' : undefined}
                 dangerouslySetInnerHTML={{
                   __html: `body{display:none}`,
                 }}
               />
-              <noscript data-next-hide-fouc>
+              <noscript
+                data-next-hide-fouc
+                data-ampdevmode={inAmpMode ? 'true' : undefined}
+              >
                 <style
                   dangerouslySetInnerHTML={{
                     __html: `body{display:block}`,

packages/next/taskfile-babel.js

@@ -10,6 +10,7 @@ module.exports = function(task) {
     const options = {
       ...babelOpts,
       compact: true,
+      comments: false,
       babelrc: false,
       configFile: false,
       filename: file.base,
@@ -30,7 +31,7 @@ module.exports = function(task) {
     // Workaround for noop.js loading
     if (file.base === 'next-dev.js') {
       output.code = output.code.replace(
-        '// REPLACE_NOOP_IMPORT',
+        '__REPLACE_NOOP_IMPORT__',
         `import('./dev/noop');`
       )
     }

test/integration/chunking-minimal/next.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   experimental: {
     modern: true,
-    granularChunks: true,
   },
 }

test/integration/chunking/next.config.js

@@ -2,9 +2,6 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin
 module.exports = {
   assetPrefix: '/foo/',
-  experimental: {
-    granularChunks: true,
-  },
   webpack(config) {
     config.plugins = config.plugins || []
     config.plugins.push(

test/integration/css-fixtures/next.config.js

@@ -3,11 +3,6 @@ module.exports = {
     // Make sure entries are not getting disposed.
     maxInactiveAge: 1000 * 60 * 60,
   },
-  experimental: {
-    css: true,
-    // Intentionally set false to ensure we force to true.
-    granularChunks: false,
-  },
   webpack(cfg) {
     cfg.devtool = 'source-map'
     return cfg