From 1e9512f673813d1338f25e455a2a9905ab4b6790 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 16:56:11 -0500
Subject: [PATCH 1/8] WIP

---
 packages/next/build/webpack-config.ts         | 248 +-----------------
 .../next/build/webpack/config/blocks/base.ts  |  25 ++
 .../build/webpack/config/blocks/css/index.ts  | 172 ++++++++++++
 .../webpack/config/blocks/css/messages.ts     |  11 +
 .../webpack/config/blocks/css/plugins.ts      | 102 +++++++
 packages/next/build/webpack/config/helpers.ts |  22 ++
 packages/next/build/webpack/config/index.ts   |  54 ++++
 packages/next/build/webpack/config/utils.ts   |  19 ++
 packages/next/package.json                    |   2 +
 yarn.lock                                     |  47 ++--
 10 files changed, 449 insertions(+), 253 deletions(-)
 create mode 100644 packages/next/build/webpack/config/blocks/base.ts
 create mode 100644 packages/next/build/webpack/config/blocks/css/index.ts
 create mode 100644 packages/next/build/webpack/config/blocks/css/messages.ts
 create mode 100644 packages/next/build/webpack/config/blocks/css/plugins.ts
 create mode 100644 packages/next/build/webpack/config/helpers.ts
 create mode 100644 packages/next/build/webpack/config/index.ts
 create mode 100644 packages/next/build/webpack/config/utils.ts

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index d416100c7fba1..a7af7353e583b 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -1,4 +1,3 @@
-import chalk from 'chalk'
 import crypto from 'crypto'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
@@ -6,7 +5,6 @@ import path from 'path'
 // @ts-ignore: Currently missing types
 import PnpWebpackPlugin from 'pnp-webpack-plugin'
 import webpack from 'webpack'
-
 import {
   DOT_NEXT_ALIAS,
   NEXT_PROJECT_ROOT,
@@ -14,15 +12,14 @@ import {
   PAGES_DIR_ALIAS,
 } from '../lib/constants'
 import { fileExists } from '../lib/file-exists'
-import { findConfig } from '../lib/find-config'
 import { resolveRequest } from '../lib/resolve-request'
 import {
   CLIENT_STATIC_FILES_RUNTIME_MAIN,
   CLIENT_STATIC_FILES_RUNTIME_POLYFILLS,
   CLIENT_STATIC_FILES_RUNTIME_WEBPACK,
   REACT_LOADABLE_MANIFEST,
-  SERVER_DIRECTORY,
   SERVERLESS_DIRECTORY,
+  SERVER_DIRECTORY,
 } from '../next-server/lib/constants'
 import { findPageFile } from '../server/lib/find-page-file'
 import { WebpackEntrypoints } from './entries'
@@ -31,6 +28,7 @@ import {
   PluginMetaData,
   VALID_MIDDLEWARE,
 } from './plugins/collect-plugins'
+import { build as buildConfiguration } from './webpack/config'
 // @ts-ignore: JS file
 import { pluginLoaderOptions } from './webpack/loaders/next-plugin-loader'
 import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
@@ -93,105 +91,6 @@ function getOptimizedAliases(isServer: boolean): { [pkg: string]: string } {
   }
 }
 
-async function getPostCssPlugins(dir: string): Promise<unknown[]> {
-  function load(plugins: { [key: string]: object | false }): unknown[] {
-    return Object.keys(plugins)
-      .map(pkg => {
-        const options = plugins[pkg]
-        if (options === false) {
-          return false
-        }
-
-        const pluginPath = resolveRequest(pkg, `${dir}/`)
-
-        if (options == null || Object.keys(options).length === 0) {
-          return require(pluginPath)
-        }
-        return require(pluginPath)(options)
-      })
-      .filter(Boolean)
-  }
-
-  const config = await findConfig<{ plugins: { [key: string]: object } }>(
-    dir,
-    'postcss'
-  )
-
-  let target: unknown[]
-
-  if (!config) {
-    target = load({
-      [require.resolve('postcss-flexbugs-fixes')]: {},
-      [require.resolve('postcss-preset-env')]: {
-        autoprefixer: {
-          // Disable legacy flexbox support
-          flexbox: 'no-2009',
-        },
-        // Enable CSS features that have shipped to the
-        // web platform, i.e. in 2+ browsers unflagged.
-        stage: 3,
-      },
-    })
-  } else {
-    const plugins = config.plugins
-    if (plugins == null || typeof plugins !== 'object') {
-      throw new Error(
-        `Your custom PostCSS configuration must export a \`plugins\` key.`
-      )
-    }
-
-    const invalidKey = Object.keys(config).find(key => key !== 'plugins')
-    if (invalidKey) {
-      console.warn(
-        `${chalk.yellow.bold(
-          'Warning'
-        )}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). ` +
-          `Please remove this configuration value.`
-      )
-    }
-
-    // These plugins cannot be enabled by the user because they'll conflict with
-    // `css-loader`'s behavior to make us compatible with webpack.
-    ;[
-      'postcss-modules-values',
-      'postcss-modules-scope',
-      'postcss-modules-extract-imports',
-      'postcss-modules-local-by-default',
-    ].forEach(plugin => {
-      if (!plugins.hasOwnProperty(plugin)) {
-        return
-      }
-
-      console.warn(
-        `${chalk.yellow.bold('Warning')}: Please remove the ${chalk.underline(
-          plugin
-        )} plugin from your PostCSS configuration. ` +
-          `This plugin is automatically configured by Next.js.`
-      )
-      delete plugins[plugin]
-    })
-
-    // Next.js doesn't support CSS Modules yet. When we do, we should respect the
-    // options passed to this plugin (even though we need to remove the plugin
-    // itself).
-    if (plugins['postcss-modules']) {
-      delete plugins['postcss-modules']
-
-      console.warn(
-        `${chalk.yellow.bold(
-          'Warning'
-        )}: Next.js does not support CSS Modules (yet). The ${chalk.underline(
-          'postcss-modules'
-        )} plugin will have no effect.`
-      )
-    }
-
-    target = load(plugins as { [key: string]: object })
-  }
-
-  return target
-}
-
 export default async function getBaseWebpackConfig(
   dir: string,
   {
@@ -504,15 +403,7 @@ export default async function getBaseWebpackConfig(
     customAppFile = path.resolve(path.join(pagesDir, customAppFile))
   }
 
-  const postCssPlugins: unknown[] = config.experimental.css
-    ? await getPostCssPlugins(dir)
-    : []
-
   let webpackConfig: webpack.Configuration = {
-    devtool,
-    mode: webpackMode,
-    name: isServer ? 'server' : 'client',
-    target: isServer ? 'node' : 'web',
     externals: !isServer
       ? undefined
       : !isServerless
@@ -741,7 +632,6 @@ export default async function getBaseWebpackConfig(
     },
     // @ts-ignore this is filtered
     module: {
-      strictExportPresence: true,
       rules: [
         config.experimental.ampBindInitData &&
           !isServer && {
@@ -760,132 +650,6 @@ export default async function getBaseWebpackConfig(
           },
           use: defaultLoaders.babel,
         },
-        config.experimental.css &&
-          // Support CSS imports
-          ({
-            oneOf: [
-              {
-                test: /\.css$/,
-                issuer: { include: [customAppFile].filter(Boolean) },
-                use: isServer
-                  ? // Global CSS is ignored on the server because it's only needed
-                    // on the client-side.
-                    require.resolve('ignore-loader')
-                  : [
-                      // During development we load CSS via JavaScript so we can
-                      // hot reload it without refreshing the page.
-                      dev && {
-                        loader: require.resolve('style-loader'),
-                        options: {
-                          // By default, style-loader injects CSS into the bottom
-                          // of <head>. This causes ordering problems between dev
-                          // and prod. To fix this, we render a <noscript> tag as
-                          // an anchor for the styles to be placed before. These
-                          // styles will be applied _before_ <style jsx global>.
-                          insert: function(element: Node) {
-                            // These elements should always exist. If they do not,
-                            // this code should fail.
-                            var anchorElement = document.querySelector(
-                              '#__next_css__DO_NOT_USE__'
-                            )!
-                            var parentNode = anchorElement.parentNode! // Normally <head>
-
-                            // Each style tag should be placed right before our
-                            // anchor. By inserting before and not after, we do not
-                            // need to track the last inserted element.
-                            parentNode.insertBefore(element, anchorElement)
-
-                            // Remember: this is development only code.
-                            //
-                            // After styles are injected, we need to remove the
-                            // <style> tags that set `body { display: none; }`.
-                            //
-                            // We use `requestAnimationFrame` as a way to defer
-                            // this operation since there may be multiple style
-                            // tags.
-                            ;(self.requestAnimationFrame || setTimeout)(
-                              function() {
-                                for (
-                                  var x = document.querySelectorAll(
-                                      '[data-next-hide-fouc]'
-                                    ),
-                                    i = x.length;
-                                  i--;
-
-                                ) {
-                                  x[i].parentNode!.removeChild(x[i])
-                                }
-                              }
-                            )
-                          },
-                        },
-                      },
-                      // When building for production we extract CSS into
-                      // separate files.
-                      !dev && {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {},
-                      },
-
-                      // Resolve CSS `@import`s and `url()`s
-                      {
-                        loader: require.resolve('css-loader'),
-                        options: { importLoaders: 1, sourceMap: true },
-                      },
-
-                      // Compile CSS
-                      {
-                        loader: require.resolve('postcss-loader'),
-                        options: {
-                          ident: 'postcss',
-                          plugins: postCssPlugins,
-                          sourceMap: true,
-                        },
-                      },
-                    ].filter(Boolean),
-                // A global CSS import always has side effects. Webpack will tree
-                // shake the CSS without this option if the issuer claims to have
-                // no side-effects.
-                // See https://github.com/webpack/webpack/issues/6571
-                sideEffects: true,
-              },
-              {
-                test: /\.css$/,
-                use: isServer
-                  ? require.resolve('ignore-loader')
-                  : {
-                      loader: 'error-loader',
-                      options: {
-                        reason:
-                          `Global CSS ${chalk.bold(
-                            'cannot'
-                          )} be imported from files other than your ${chalk.bold(
-                            'Custom <App>'
-                          )}. Please move all global CSS imports to ${chalk.cyan(
-                            customAppFile
-                              ? path.relative(dir, customAppFile)
-                              : 'pages/_app.js'
-                          )}.\n` +
-                          `Read more: https://err.sh/next.js/global-css`,
-                      },
-                    },
-              },
-            ],
-          } as webpack.RuleSetRule),
-        config.experimental.css &&
-          ({
-            loader: require.resolve('file-loader'),
-            issuer: {
-              // file-loader is only used for CSS files, e.g. url() for a SVG
-              // or font files
-              test: /\.css$/,
-            },
-            // Exclude extensions that webpack handles by default
-            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'static/media/[name].[hash].[ext]',
-            },
-          } as webpack.RuleSetRule),
       ].filter(Boolean),
     },
     plugins: [
@@ -1077,6 +841,14 @@ export default async function getBaseWebpackConfig(
     ].filter((Boolean as any) as ExcludesFalse),
   }
 
+  webpackConfig = buildConfiguration(webpackConfig, {
+    rootDirectory: dir,
+    customAppFile,
+    isDevelopment: dev,
+    isServer,
+    hasSupportCss: !!config.experimental.css,
+  })
+
   if (typeof config.webpack === 'function') {
     webpackConfig = config.webpack(webpackConfig, {
       dir,
diff --git a/packages/next/build/webpack/config/blocks/base.ts b/packages/next/build/webpack/config/blocks/base.ts
new file mode 100644
index 0000000000000..b7828db41907e
--- /dev/null
+++ b/packages/next/build/webpack/config/blocks/base.ts
@@ -0,0 +1,25 @@
+import curry from 'lodash.curry'
+import { Configuration } from 'webpack'
+import { ConfigurationContext } from '../utils'
+
+export const base = curry(function base(
+  ctx: ConfigurationContext,
+  config: Configuration
+) {
+  config.mode = ctx.isDevelopment ? 'development' : 'production'
+  config.name = ctx.isServer ? 'server' : 'client'
+  config.target = ctx.isServer ? 'node' : 'web'
+
+  config.devtool = ctx.isDevelopment
+    ? 'cheap-module-source-map'
+    : ctx.isProduction
+    ? false
+    : false
+
+  config.module = {
+    strictExportPresence: true,
+    rules: [],
+  }
+
+  return config
+})
diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
new file mode 100644
index 0000000000000..1235d0c31076e
--- /dev/null
+++ b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -0,0 +1,172 @@
+import curry from 'lodash.curry'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import { Configuration } from 'webpack'
+import { loader } from '../../helpers'
+import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils'
+import { getGlobalImportError } from './messages'
+import { getPostCssPlugins } from './plugins'
+import webpack from 'webpack'
+
+function getStyleLoader({
+  isDevelopment,
+}: {
+  isDevelopment: boolean
+}): webpack.RuleSetUseItem {
+  return isDevelopment
+    ? {
+        loader: require.resolve('style-loader'),
+        options: {
+          // By default, style-loader injects CSS into the bottom
+          // of <head>. This causes ordering problems between dev
+          // and prod. To fix this, we render a <noscript> tag as
+          // an anchor for the styles to be placed before. These
+          // styles will be applied _before_ <style jsx global>.
+          insert: function(element: Node) {
+            // These elements should always exist. If they do not,
+            // this code should fail.
+            var anchorElement = document.querySelector(
+              '#__next_css__DO_NOT_USE__'
+            )!
+            var parentNode = anchorElement.parentNode! // Normally <head>
+
+            // Each style tag should be placed right before our
+            // anchor. By inserting before and not after, we do not
+            // need to track the last inserted element.
+            parentNode.insertBefore(element, anchorElement)
+
+            // Remember: this is development only code.
+            //
+            // After styles are injected, we need to remove the
+            // <style> tags that set `body { display: none; }`.
+            //
+            // We use `requestAnimationFrame` as a way to defer
+            // this operation since there may be multiple style
+            // tags.
+            ;(self.requestAnimationFrame || setTimeout)(function() {
+              for (
+                var x = document.querySelectorAll('[data-next-hide-fouc]'),
+                  i = x.length;
+                i--;
+
+              ) {
+                x[i].parentNode!.removeChild(x[i])
+              }
+            })
+          },
+        },
+      }
+    : {
+        loader: MiniCssExtractPlugin.loader,
+        options: {},
+      }
+}
+
+export const css = curry(function css(
+  enabled: boolean,
+  ctx: ConfigurationContext,
+  config: Configuration
+) {
+  if (!enabled) {
+    return config
+  }
+
+  const fns: ConfigurationFn[] = []
+
+  if (ctx.isServer) {
+    fns.push(
+      loader({
+        oneOf: [{ test: /\.css$/, use: require.resolve('ignore-loader') }],
+      })
+    )
+  } else if (ctx.customAppFile) {
+    const postCssPlugins = getPostCssPlugins(ctx.rootDirectory)
+    fns.push(
+      loader({
+        oneOf: [
+          {
+            // A global CSS import always has side effects. Webpack will tree
+            // shake the CSS without this option if the issuer claims to have
+            // no side-effects.
+            // See https://github.com/webpack/webpack/issues/6571
+            sideEffects: true,
+            test: /\.css$/,
+            issuer: { include: ctx.customAppFile },
+
+            use: [
+              // Add appropriate development more or production mode style
+              // loader
+              getStyleLoader({ isDevelopment: ctx.isDevelopment }),
+
+              // Resolve CSS `@import`s and `url()`s
+              {
+                loader: require.resolve('css-loader'),
+                options: { importLoaders: 1, sourceMap: true },
+              },
+
+              // Compile CSS
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  ident: 'postcss',
+                  plugins: postCssPlugins,
+                  sourceMap: true,
+                },
+              },
+            ],
+          },
+        ],
+      })
+    )
+  }
+
+  // Throw an error for Global CSS used outside of our custom <App> file
+  fns.push(
+    loader({
+      oneOf: [
+        {
+          test: /\.css$/,
+          use: {
+            loader: 'error-loader',
+            options: {
+              reason: getGlobalImportError(
+                ctx.customAppFile &&
+                  path.relative(ctx.rootDirectory, ctx.customAppFile)
+              ),
+            },
+          },
+        },
+      ],
+    })
+  )
+
+  // Automatically transform references to files (i.e. url()) into URLs
+  // e.g. url(./logo.svg)
+  fns.push(
+    loader({
+      oneOf: [
+        {
+          // This should only be applied to CSS files
+          issuer: { test: /\.css$/ },
+          // Exclude extensions that webpack handles by default
+          exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+          use: {
+            // `file-loader` always emits a URL reference, where `url-loader`
+            // might inline the asset as a data URI
+            loader: require.resolve('file-loader'),
+            options: {
+              // Hash the file for immutable cacheability
+              name: 'static/media/[name].[hash].[ext]',
+            },
+          },
+        },
+      ],
+    })
+  )
+
+  if (fns.length) {
+    const fn = pipe(...(fns as [ConfigurationFn]))
+    return fn(config)
+  }
+  return config
+})
diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts
new file mode 100644
index 0000000000000..461a37e0c0dee
--- /dev/null
+++ b/packages/next/build/webpack/config/blocks/css/messages.ts
@@ -0,0 +1,11 @@
+import chalk from 'chalk'
+
+export function getGlobalImportError(file: string | null) {
+  return `Global CSS ${chalk.bold(
+    'cannot'
+  )} be imported from files other than your ${chalk.bold(
+    'Custom <App>'
+  )}. Please move all global CSS imports to ${chalk.cyan(
+    file ? file : 'pages/_app.js'
+  )}.\nRead more: https://err.sh/next.js/global-css`
+}
diff --git a/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts
new file mode 100644
index 0000000000000..25d96a0a4a6b9
--- /dev/null
+++ b/packages/next/build/webpack/config/blocks/css/plugins.ts
@@ -0,0 +1,102 @@
+import chalk from 'chalk'
+import { findConfig } from '../../../../../lib/find-config'
+import { resolveRequest } from '../../../../../lib/resolve-request'
+
+export async function getPostCssPlugins(dir: string): Promise<unknown[]> {
+  function load(plugins: { [key: string]: object | false }): unknown[] {
+    return Object.keys(plugins)
+      .map(pkg => {
+        const options = plugins[pkg]
+        if (options === false) {
+          return false
+        }
+
+        const pluginPath = resolveRequest(pkg, `${dir}/`)
+
+        if (options == null || Object.keys(options).length === 0) {
+          return require(pluginPath)
+        }
+        return require(pluginPath)(options)
+      })
+      .filter(Boolean)
+  }
+
+  const config = await findConfig<{ plugins: { [key: string]: object } }>(
+    dir,
+    'postcss'
+  )
+
+  let target: unknown[]
+
+  if (!config) {
+    target = load({
+      [require.resolve('postcss-flexbugs-fixes')]: {},
+      [require.resolve('postcss-preset-env')]: {
+        autoprefixer: {
+          // Disable legacy flexbox support
+          flexbox: 'no-2009',
+        },
+        // Enable CSS features that have shipped to the
+        // web platform, i.e. in 2+ browsers unflagged.
+        stage: 3,
+      },
+    })
+  } else {
+    const plugins = config.plugins
+    if (plugins == null || typeof plugins !== 'object') {
+      throw new Error(
+        `Your custom PostCSS configuration must export a \`plugins\` key.`
+      )
+    }
+
+    const invalidKey = Object.keys(config).find(key => key !== 'plugins')
+    if (invalidKey) {
+      console.warn(
+        `${chalk.yellow.bold(
+          'Warning'
+        )}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). ` +
+          `Please remove this configuration value.`
+      )
+    }
+
+    // These plugins cannot be enabled by the user because they'll conflict with
+    // `css-loader`'s behavior to make us compatible with webpack.
+    ;[
+      'postcss-modules-values',
+      'postcss-modules-scope',
+      'postcss-modules-extract-imports',
+      'postcss-modules-local-by-default',
+    ].forEach(plugin => {
+      if (!plugins.hasOwnProperty(plugin)) {
+        return
+      }
+
+      console.warn(
+        `${chalk.yellow.bold('Warning')}: Please remove the ${chalk.underline(
+          plugin
+        )} plugin from your PostCSS configuration. ` +
+          `This plugin is automatically configured by Next.js.`
+      )
+      delete plugins[plugin]
+    })
+
+    // Next.js doesn't support CSS Modules yet. When we do, we should respect the
+    // options passed to this plugin (even though we need to remove the plugin
+    // itself).
+    if (plugins['postcss-modules']) {
+      delete plugins['postcss-modules']
+
+      console.warn(
+        `${chalk.yellow.bold(
+          'Warning'
+        )}: Next.js does not support CSS Modules (yet). The ${chalk.underline(
+          'postcss-modules'
+        )} plugin will have no effect.`
+      )
+    }
+
+    target = load(plugins as { [key: string]: object })
+  }
+
+  return target
+}
diff --git a/packages/next/build/webpack/config/helpers.ts b/packages/next/build/webpack/config/helpers.ts
new file mode 100644
index 0000000000000..1e1a98209ebda
--- /dev/null
+++ b/packages/next/build/webpack/config/helpers.ts
@@ -0,0 +1,22 @@
+import curry from 'lodash.curry'
+import { Configuration, RuleSetRule } from 'webpack'
+
+export const loader = curry(function loader(
+  rule: RuleSetRule,
+  config: Configuration
+) {
+  if (!config.module) {
+    config.module = { rules: [] }
+  }
+
+  if (rule.oneOf) {
+    const existing = config.module.rules.find(rule => rule.oneOf)
+    if (existing) {
+      existing.oneOf!.push(...rule.oneOf)
+      return config
+    }
+  }
+
+  config.module.rules.push(rule)
+  return config
+})
diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
new file mode 100644
index 0000000000000..383b0c672efc6
--- /dev/null
+++ b/packages/next/build/webpack/config/index.ts
@@ -0,0 +1,54 @@
+import webpack from 'webpack'
+import { base } from './blocks/base'
+import { css } from './blocks/css'
+import { ConfigurationContext, pipe } from './utils'
+
+export function build(
+  config: webpack.Configuration,
+  {
+    rootDirectory,
+    customAppFile,
+    isDevelopment,
+    isServer,
+    hasSupportCss,
+  }: {
+    rootDirectory: string
+    customAppFile: string | null
+    isDevelopment: boolean
+    isServer: boolean
+    hasSupportCss: boolean
+  }
+) {
+  const ctx: ConfigurationContext = {
+    rootDirectory,
+    customAppFile,
+    isDevelopment,
+    isProduction: !isDevelopment,
+    isServer,
+    isClient: !isServer,
+  }
+
+  const fn = pipe(base(ctx), css(hasSupportCss, ctx))
+  return fn(config)
+}
+
+// eslint-disable-next-line no-extend-native
+Object.defineProperty(RegExp.prototype, 'toJSON', {
+  value: RegExp.prototype.toString,
+})
+console.log(
+  JSON.stringify(
+    build(
+      {},
+      {
+        rootDirectory: '/noop',
+        customAppFile: '/noop/pages/_app.js',
+        isDevelopment: true,
+        isServer: false,
+        hasSupportCss: true,
+      }
+    ),
+    null,
+    2
+  )
+)
diff --git a/packages/next/build/webpack/config/utils.ts b/packages/next/build/webpack/config/utils.ts
new file mode 100644
index 0000000000000..bf013304acf64
--- /dev/null
+++ b/packages/next/build/webpack/config/utils.ts
@@ -0,0 +1,19 @@
+import webpack from 'webpack'
+
+export type ConfigurationContext = {
+  rootDirectory: string
+  customAppFile: string | null
+
+  isDevelopment: boolean
+  isProduction: boolean
+
+  isServer: boolean
+  isClient: boolean
+}
+
+export type ConfigurationFn = (
+  a: webpack.Configuration
+) => webpack.Configuration
+
+export const pipe = <R>(fn1: (a: R) => R, ...fns: Array<(a: R) => R>) =>
+  fns.reduce((prevFn, nextFn) => value => nextFn(prevFn(value)), fn1)
diff --git a/packages/next/package.json b/packages/next/package.json
index 862f4a444d35a..9b3e44e091867 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -100,6 +100,7 @@
     "json5": "2.1.1",
     "launch-editor": "2.2.1",
     "loader-utils": "1.2.3",
+    "lodash.curry": "4.1.1",
     "lru-cache": "5.1.1",
     "mini-css-extract-plugin": "0.8.0",
     "mkdirp": "0.5.1",
@@ -159,6 +160,7 @@
     "@types/fresh": "0.5.0",
     "@types/json5": "0.0.30",
     "@types/loader-utils": "1.1.3",
+    "@types/lodash.curry": "4.1.6",
     "@types/lru-cache": "5.1.0",
     "@types/mini-css-extract-plugin": "0.8.0",
     "@types/mkdirp": "0.5.2",
diff --git a/yarn.lock b/yarn.lock
index b8a386e69cfe2..f7262291cf072 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2692,6 +2692,18 @@
     "@types/node" "*"
     "@types/webpack" "*"
 
+"@types/lodash.curry@4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.curry/-/lodash.curry-4.1.6.tgz#f26c490c80c92d7cbaa2300d542e89781d44b1ff"
+  integrity sha512-x3ctCcmOYqRrihNNnQJW6fe/yZFCgnrIa6p80AiPQRO8Jis29bBdy1dEw1FwngoF/mCZa3Bx+33fUZvOEE635Q==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.149"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
+  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+
 "@types/long@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.0.tgz#719551d2352d301ac8b81db732acb6bdc28dbdef"
@@ -4203,13 +4215,13 @@ browserify-zlib@^0.2.0:
     pako "~1.0.5"
 
 browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.4, browserslist@^4.7.1, browserslist@^4.7.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.0.tgz#6f06b0f974a7cc3a84babc2ccc56493668e3c789"
-  integrity sha512-HYnxc/oLRWvJ3TsGegR0SRL/UDnknGq2s/a8dYYEO+kOQ9m9apKoS5oiathLKZdh/e9uE+/J3j92qPlGD/vTqA==
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
+  integrity sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==
   dependencies:
-    caniuse-lite "^1.0.30001012"
-    electron-to-chromium "^1.3.317"
-    node-releases "^1.1.41"
+    caniuse-lite "^1.0.30001015"
+    electron-to-chromium "^1.3.322"
+    node-releases "^1.1.42"
 
 browserstack-local@1.4.0:
   version "1.4.0"
@@ -4466,10 +4478,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001002, caniuse-lite@^1.0.30001010, caniuse-lite@^1.0.30001012:
-  version "1.0.30001013"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001013.tgz#da2440d4d266a17d40eb79bd19c0c8cc1d029c72"
-  integrity sha512-hOAXaWKuq/UVFgYawxIOdPdyMQdYcwOCDOjnZcKn7wCgFUrhP7smuNZjGLuJlPSgE6aRA4cRJ+bGSrhtEt7ZAg==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001002, caniuse-lite@^1.0.30001010, caniuse-lite@^1.0.30001015:
+  version "1.0.30001015"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz#15a7ddf66aba786a71d99626bc8f2b91c6f0f5f0"
+  integrity sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==
 
 capitalize@1.0.0:
   version "1.0.0"
@@ -6150,7 +6162,7 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
   integrity sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==
 
-electron-to-chromium@^1.3.317:
+electron-to-chromium@^1.3.322:
   version "1.3.322"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz#a6f7e1c79025c2b05838e8e344f6e89eb83213a8"
   integrity sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==
@@ -9836,6 +9848,11 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.curry@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
+
 lodash.defaults@^4.0.1, lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -10841,10 +10858,10 @@ node-pre-gyp@^0.13.0:
     semver "^5.3.0"
     tar "^4"
 
-node-releases@^1.1.41:
-  version "1.1.41"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.41.tgz#57674a82a37f812d18e3b26118aefaf53a00afed"
-  integrity sha512-+IctMa7wIs8Cfsa8iYzeaLTFwv5Y4r5jZud+4AnfymzeEXKBCavFX0KBgzVaPVqf0ywa6PrO8/b+bPqdwjGBSg==
+node-releases@^1.1.42:
+  version "1.1.42"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.42.tgz#a999f6a62f8746981f6da90627a8d2fc090bbad7"
+  integrity sha512-OQ/ESmUqGawI2PRX+XIRao44qWYBBfN54ImQYdWVTQqUckuejOg76ysSqDBK8NG3zwySRVnX36JwDQ6x+9GxzA==
   dependencies:
     semver "^6.3.0"
 

From 5c4f9be79099ea687599216d4ba69d5ad05f2b0d Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 17:07:10 -0500
Subject: [PATCH 2/8] Move data experiment

---
 packages/next/build/webpack-config.ts         |  7 +----
 .../webpack/config/blocks/experiment-data.ts  | 28 +++++++++++++++++++
 packages/next/build/webpack/config/index.ts   | 10 ++++++-
 3 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 packages/next/build/webpack/config/blocks/experiment-data.ts

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index a7af7353e583b..23c57463da028 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -633,12 +633,6 @@ export default async function getBaseWebpackConfig(
     // @ts-ignore this is filtered
     module: {
       rules: [
-        config.experimental.ampBindInitData &&
-          !isServer && {
-            test: /\.(tsx|ts|js|mjs|jsx)$/,
-            include: [path.join(dir, 'data')],
-            use: 'next-data-loader',
-          },
         {
           test: /\.(tsx|ts|js|mjs|jsx)$/,
           include: [dir, ...babelIncludeRegexes],
@@ -847,6 +841,7 @@ export default async function getBaseWebpackConfig(
     isDevelopment: dev,
     isServer,
     hasSupportCss: !!config.experimental.css,
+    hasSupportData: !!config.experimental.ampBindInitData,
   })
 
   if (typeof config.webpack === 'function') {
diff --git a/packages/next/build/webpack/config/blocks/experiment-data.ts b/packages/next/build/webpack/config/blocks/experiment-data.ts
new file mode 100644
index 0000000000000..7a47667f96bd1
--- /dev/null
+++ b/packages/next/build/webpack/config/blocks/experiment-data.ts
@@ -0,0 +1,28 @@
+import curry from 'lodash.curry'
+import path from 'path'
+import { Configuration } from 'webpack'
+import { loader } from '../helpers'
+import { ConfigurationContext, pipe } from '../utils'
+
+export const experimentData = curry(function experimentData(
+  enabled: boolean,
+  ctx: ConfigurationContext,
+  config: Configuration
+) {
+  if (!enabled) {
+    return config
+  }
+
+  if (ctx.isServer) {
+    return config
+  }
+
+  const fn = pipe(
+    loader({
+      test: /\.(tsx|ts|js|mjs|jsx)$/,
+      include: [path.join(ctx.rootDirectory, 'data')],
+      use: 'next-data-loader',
+    })
+  )
+  return fn(config)
+})
diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
index 383b0c672efc6..fe13945ebd053 100644
--- a/packages/next/build/webpack/config/index.ts
+++ b/packages/next/build/webpack/config/index.ts
@@ -2,6 +2,7 @@ import webpack from 'webpack'
 import { base } from './blocks/base'
 import { css } from './blocks/css'
 import { ConfigurationContext, pipe } from './utils'
+import { experimentData } from './blocks/experiment-data'
 
 export function build(
   config: webpack.Configuration,
@@ -11,12 +12,14 @@ export function build(
     isDevelopment,
     isServer,
     hasSupportCss,
+    hasSupportData,
   }: {
     rootDirectory: string
     customAppFile: string | null
     isDevelopment: boolean
     isServer: boolean
     hasSupportCss: boolean
+    hasSupportData: boolean
   }
 ) {
   const ctx: ConfigurationContext = {
@@ -28,7 +31,11 @@ export function build(
     isClient: !isServer,
   }
 
-  const fn = pipe(base(ctx), css(hasSupportCss, ctx))
+  const fn = pipe(
+    base(ctx),
+    experimentData(hasSupportData, ctx),
+    css(hasSupportCss, ctx)
+  )
   return fn(config)
 }
 
@@ -46,6 +53,7 @@ console.log(
         isDevelopment: true,
         isServer: false,
         hasSupportCss: true,
+        hasSupportData: false,
       }
     ),
     null,

From af44edb76fa44ccbb3782216a798452559b412c6 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 17:28:21 -0500
Subject: [PATCH 3/8] Do not throw away rules

---
 packages/next/build/webpack/config/blocks/base.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/build/webpack/config/blocks/base.ts b/packages/next/build/webpack/config/blocks/base.ts
index b7828db41907e..8d30f3305ee00 100644
--- a/packages/next/build/webpack/config/blocks/base.ts
+++ b/packages/next/build/webpack/config/blocks/base.ts
@@ -16,10 +16,10 @@ export const base = curry(function base(
     ? false
     : false
 
-  config.module = {
-    strictExportPresence: true,
-    rules: [],
+  if (!config.module) {
+    config.module = { rules: [] }
   }
+  config.module.strictExportPresence = true
 
   return config
 })

From 96ee42db1ba5dcb62cb4c2a3e88eea74582b1662 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 17:28:53 -0500
Subject: [PATCH 4/8] Remove test code

---
 packages/next/build/webpack/config/index.ts | 22 ---------------------
 1 file changed, 22 deletions(-)

diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
index fe13945ebd053..959c4bb49ab31 100644
--- a/packages/next/build/webpack/config/index.ts
+++ b/packages/next/build/webpack/config/index.ts
@@ -38,25 +38,3 @@ export function build(
   )
   return fn(config)
 }
-
-// eslint-disable-next-line no-extend-native
-Object.defineProperty(RegExp.prototype, 'toJSON', {
-  value: RegExp.prototype.toString,
-})
-console.log(
-  JSON.stringify(
-    build(
-      {},
-      {
-        rootDirectory: '/noop',
-        customAppFile: '/noop/pages/_app.js',
-        isDevelopment: true,
-        isServer: false,
-        hasSupportCss: true,
-        hasSupportData: false,
-      }
-    ),
-    null,
-    2
-  )
-)

From 4df7bd35d90bb5781a7f932f8901501a586d20fe Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 17:33:24 -0500
Subject: [PATCH 5/8] Correct next data behavior

---
 .../webpack/config/blocks/experiment-data.ts  |  4 ++--
 packages/next/build/webpack/config/helpers.ts | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/next/build/webpack/config/blocks/experiment-data.ts b/packages/next/build/webpack/config/blocks/experiment-data.ts
index 7a47667f96bd1..b86c49852784d 100644
--- a/packages/next/build/webpack/config/blocks/experiment-data.ts
+++ b/packages/next/build/webpack/config/blocks/experiment-data.ts
@@ -1,7 +1,7 @@
 import curry from 'lodash.curry'
 import path from 'path'
 import { Configuration } from 'webpack'
-import { loader } from '../helpers'
+import { unshiftLoader } from '../helpers'
 import { ConfigurationContext, pipe } from '../utils'
 
 export const experimentData = curry(function experimentData(
@@ -18,7 +18,7 @@ export const experimentData = curry(function experimentData(
   }
 
   const fn = pipe(
-    loader({
+    unshiftLoader({
       test: /\.(tsx|ts|js|mjs|jsx)$/,
       include: [path.join(ctx.rootDirectory, 'data')],
       use: 'next-data-loader',
diff --git a/packages/next/build/webpack/config/helpers.ts b/packages/next/build/webpack/config/helpers.ts
index 1e1a98209ebda..552509b48d384 100644
--- a/packages/next/build/webpack/config/helpers.ts
+++ b/packages/next/build/webpack/config/helpers.ts
@@ -20,3 +20,23 @@ export const loader = curry(function loader(
   config.module.rules.push(rule)
   return config
 })
+
+export const unshiftLoader = curry(function loader(
+  rule: RuleSetRule,
+  config: Configuration
+) {
+  if (!config.module) {
+    config.module = { rules: [] }
+  }
+
+  if (rule.oneOf) {
+    const existing = config.module.rules.find(rule => rule.oneOf)
+    if (existing) {
+      existing.oneOf!.unshift(...rule.oneOf)
+      return config
+    }
+  }
+
+  config.module.rules.unshift(rule)
+  return config
+})

From 52685e17ff3a3abbe9ed82364e8671d00f9670e2 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 19:48:53 -0500
Subject: [PATCH 6/8] Add support for async composing

---
 packages/next/build/webpack-config.ts                  | 2 +-
 packages/next/build/webpack/config/blocks/css/index.ts | 4 ++--
 packages/next/build/webpack/config/index.ts            | 4 ++--
 packages/next/build/webpack/config/utils.ts            | 6 ++++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 23c57463da028..5270226351f49 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -835,7 +835,7 @@ export default async function getBaseWebpackConfig(
     ].filter((Boolean as any) as ExcludesFalse),
   }
 
-  webpackConfig = buildConfiguration(webpackConfig, {
+  webpackConfig = await buildConfiguration(webpackConfig, {
     rootDirectory: dir,
     customAppFile,
     isDevelopment: dev,
diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
index 1235d0c31076e..c4291c554b4ea 100644
--- a/packages/next/build/webpack/config/blocks/css/index.ts
+++ b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -62,7 +62,7 @@ function getStyleLoader({
       }
 }
 
-export const css = curry(function css(
+export const css = curry(async function css(
   enabled: boolean,
   ctx: ConfigurationContext,
   config: Configuration
@@ -80,7 +80,7 @@ export const css = curry(function css(
       })
     )
   } else if (ctx.customAppFile) {
-    const postCssPlugins = getPostCssPlugins(ctx.rootDirectory)
+    const postCssPlugins = await getPostCssPlugins(ctx.rootDirectory)
     fns.push(
       loader({
         oneOf: [
diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
index 959c4bb49ab31..777f204de8803 100644
--- a/packages/next/build/webpack/config/index.ts
+++ b/packages/next/build/webpack/config/index.ts
@@ -4,7 +4,7 @@ import { css } from './blocks/css'
 import { ConfigurationContext, pipe } from './utils'
 import { experimentData } from './blocks/experiment-data'
 
-export function build(
+export async function build(
   config: webpack.Configuration,
   {
     rootDirectory,
@@ -21,7 +21,7 @@ export function build(
     hasSupportCss: boolean
     hasSupportData: boolean
   }
-) {
+): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
     rootDirectory,
     customAppFile,
diff --git a/packages/next/build/webpack/config/utils.ts b/packages/next/build/webpack/config/utils.ts
index bf013304acf64..49cf83188501a 100644
--- a/packages/next/build/webpack/config/utils.ts
+++ b/packages/next/build/webpack/config/utils.ts
@@ -15,5 +15,7 @@ export type ConfigurationFn = (
   a: webpack.Configuration
 ) => webpack.Configuration
 
-export const pipe = <R>(fn1: (a: R) => R, ...fns: Array<(a: R) => R>) =>
-  fns.reduce((prevFn, nextFn) => value => nextFn(prevFn(value)), fn1)
+export const pipe = <R>(...fns: Array<(a: R) => R | Promise<R>>) => (
+  param: R
+) =>
+  fns.reduce(async (result: R | Promise<R>, next) => next(await result), param)

From 2aab49a1bea26f0d4b594943e9a7862dbd5810ef Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Fri, 6 Dec 2019 19:53:35 -0500
Subject: [PATCH 7/8] Remove unnecessary workaround

---
 packages/next/build/webpack/config/blocks/css/index.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
index c4291c554b4ea..304450eab91c3 100644
--- a/packages/next/build/webpack/config/blocks/css/index.ts
+++ b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -164,9 +164,6 @@ export const css = curry(async function css(
     })
   )
 
-  if (fns.length) {
-    const fn = pipe(...(fns as [ConfigurationFn]))
-    return fn(config)
-  }
-  return config
+  const fn = pipe(...fns)
+  return fn(config)
 })

From 475c8c9bf2458f813ed1bc23e4f0be1bfb7403f6 Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Mon, 9 Dec 2019 14:58:57 -0500
Subject: [PATCH 8/8] Rename Field

---
 packages/next/build/webpack-config.ts       | 2 +-
 packages/next/build/webpack/config/index.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 5270226351f49..b988151c4aa01 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -841,7 +841,7 @@ export default async function getBaseWebpackConfig(
     isDevelopment: dev,
     isServer,
     hasSupportCss: !!config.experimental.css,
-    hasSupportData: !!config.experimental.ampBindInitData,
+    hasExperimentalData: !!config.experimental.ampBindInitData,
   })
 
   if (typeof config.webpack === 'function') {
diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts
index 777f204de8803..e926b17479b17 100644
--- a/packages/next/build/webpack/config/index.ts
+++ b/packages/next/build/webpack/config/index.ts
@@ -12,14 +12,14 @@ export async function build(
     isDevelopment,
     isServer,
     hasSupportCss,
-    hasSupportData,
+    hasExperimentalData,
   }: {
     rootDirectory: string
     customAppFile: string | null
     isDevelopment: boolean
     isServer: boolean
     hasSupportCss: boolean
-    hasSupportData: boolean
+    hasExperimentalData: boolean
   }
 ): Promise<webpack.Configuration> {
   const ctx: ConfigurationContext = {
@@ -33,7 +33,7 @@ export async function build(
 
   const fn = pipe(
     base(ctx),
-    experimentData(hasSupportData, ctx),
+    experimentData(hasExperimentalData, ctx),
     css(hasSupportCss, ctx)
   )
   return fn(config)