Merge branch 'canary' into trailing-slash-files

docs/api-routes/dynamic-api-routes.md

@@ -82,9 +82,6 @@ Now, a request to `/api/post/a/b/c` will respond with the text: `Post: a, b, c`.
 
 ### Optional catch all API routes
 
-> **Warning**: This feature is **experimental and may not work as expected**.
-> You must enable the `optionalCatchAll` experimental option to try it.
-
 Catch all routes can be made optional by including the parameter in double brackets (`[[...slug]]`).
 
 For example, `pages/api/post/[[...slug]].js` will match `/api/post`, `/api/post/a`, `/api/post/a/b`, and so on.

docs/routing/dynamic-routes.md

@@ -87,9 +87,6 @@ And in the case of `/post/a/b`, and any other matching path, new parameters will
 
 ### Optional catch all routes
 
-> **Warning**: This feature is **experimental and may not work as expected**.
-> You must enable the `optionalCatchAll` experimental option to try it.
-
 Catch all routes can be made optional by including the parameter in double brackets (`[[...slug]]`).
 
 For example, `pages/post/[[...slug]].js` will match `/post`, `/post/a`, `/post/a/b`, and so on.

examples/with-mongodb-mongoose/pages/[id]/index.js

@@ -63,16 +63,7 @@ const PetPage = ({ pet }) => {
   )
 }
 
-export async function getStaticPaths() {
-  await dbConnect()
-
-  const result = await Pet.find({})
-  const paths = result.map((doc) => ({ params: { id: doc._id.toString() } }))
-
-  return { paths, fallback: false }
-}
-
-export async function getStaticProps({ params }) {
+export async function getServerSideProps({ params }) {
   await dbConnect()
 
   const pet = await Pet.findById(params.id).lean()

examples/with-mongodb-mongoose/pages/index.js

@@ -48,7 +48,7 @@ const Index = ({ pets }) => (
 )
 
 /* Retrieves pet(s) data from mongodb database */
-export async function getStaticProps() {
+export async function getServerSideProps() {
   await dbConnect()
 
   /* find all the data in our database */

examples/with-three-js/components/Bird.js

@@ -0,0 +1,40 @@
+import { useRef, useState, useEffect } from 'react'
+import * as THREE from 'three'
+import { useFrame, useLoader } from 'react-three-fiber'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+
+const Bird = ({ speed, factor, url, ...props }) => {
+  const gltf = useLoader(GLTFLoader, url)
+  const group = useRef()
+  const [mixer] = useState(() => new THREE.AnimationMixer())
+  useEffect(
+    () => void mixer.clipAction(gltf.animations[0], group.current).play(),
+    [gltf.animations, mixer]
+  )
+  useFrame((state, delta) => {
+    group.current.rotation.y +=
+      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
+    mixer.update(delta * speed)
+  })
+  return (
+    <group ref={group}>
+      <scene name="Scene" {...props}>
+        <mesh
+          name="Object_0"
+          morphTargetDictionary={gltf.__$[1].morphTargetDictionary}
+          morphTargetInfluences={gltf.__$[1].morphTargetInfluences}
+          rotation={[1.5707964611537577, 0, 0]}
+        >
+          <bufferGeometry attach="geometry" {...gltf.__$[1].geometry} />
+          <meshStandardMaterial
+            attach="material"
+            {...gltf.__$[1].material}
+            name="Material_0_COLOR_0"
+          />
+        </mesh>
+      </scene>
+    </group>
+  )
+}
+
+export default Bird

examples/with-three-js/pages/birds.js

@@ -1,42 +1,7 @@
-import { useRef, useState, useEffect, Suspense } from 'react'
-import * as THREE from 'three'
-import { Canvas, useFrame, useLoader } from 'react-three-fiber'
-
-let GLTFLoader
-
-const Bird = ({ speed, factor, url, ...props }) => {
-  const gltf = useLoader(GLTFLoader, url)
-  const group = useRef()
-  const [mixer] = useState(() => new THREE.AnimationMixer())
-  useEffect(
-    () => void mixer.clipAction(gltf.animations[0], group.current).play(),
-    [gltf.animations, mixer]
-  )
-  useFrame((state, delta) => {
-    group.current.rotation.y +=
-      Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5
-    mixer.update(delta * speed)
-  })
-  return (
-    <group ref={group}>
-      <scene name="Scene" {...props}>
-        <mesh
-          name="Object_0"
-          morphTargetDictionary={gltf.__$[1].morphTargetDictionary}
-          morphTargetInfluences={gltf.__$[1].morphTargetInfluences}
-          rotation={[1.5707964611537577, 0, 0]}
-        >
-          <bufferGeometry attach="geometry" {...gltf.__$[1].geometry} />
-          <meshStandardMaterial
-            attach="material"
-            {...gltf.__$[1].material}
-            name="Material_0_COLOR_0"
-          />
-        </mesh>
-      </scene>
-    </group>
-  )
-}
+import dynamic from 'next/dynamic'
+import { Suspense } from 'react'
+import { Canvas } from 'react-three-fiber'
+const Bird = dynamic(() => import('../components/Bird'), { ssr: false })
 
 const Birds = () => {
   return new Array(5).fill().map((_, i) => {
@@ -65,9 +30,6 @@ const Birds = () => {
 }
 
 const BirdsPage = (props) => {
-  useEffect(() => {
-    GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader
-  }, [])
   return (
     <>
       <Canvas camera={{ position: [0, 0, 35] }}>

packages/next/build/index.ts

@@ -47,6 +47,7 @@ import loadConfig, {
 import { BuildManifest } from '../next-server/server/get-page-files'
 import '../next-server/server/node-polyfill-fetch'
 import { normalizePagePath } from '../next-server/server/normalize-page-path'
+import { getPagePath } from '../next-server/server/require'
 import * as ciEnvironment from '../telemetry/ci-info'
 import {
   eventBuildCompleted,
@@ -73,7 +74,6 @@ import {
 import getBaseWebpackConfig from './webpack-config'
 import { PagesManifest } from './webpack/plugins/pages-manifest-plugin'
 import { writeBuildId } from './write-build-id'
-import { getPagePath } from '../next-server/server/require'
 const staticCheckWorker = require.resolve('./utils')
 
 export type SsgRoute = {
@@ -277,16 +277,6 @@ export default async function build(dir: string, conf = null): Promise<void> {
     }
   }
 
-  const firstOptionalCatchAllPage =
-    pageKeys.find((f) => /\[\[\.{3}[^\][/]*\]\]/.test(f)) ?? null
-  if (
-    config.experimental?.optionalCatchAll !== true &&
-    firstOptionalCatchAllPage
-  ) {
-    const msg = `Optional catch-all routes are currently experimental and cannot be used by default ("${firstOptionalCatchAllPage}").`
-    throw new Error(msg)
-  }
-
   const routesManifestPath = path.join(distDir, ROUTES_MANIFEST)
   const routesManifest: any = {
     version: 3,

packages/next/build/webpack/plugins/css-minimizer-plugin.ts

@@ -1,4 +1,4 @@
-import { process as minify } from 'next/dist/compiled/cssnano-simple'
+import { process as minify } from 'cssnano-simple'
 import webpack from 'webpack'
 import { RawSource, SourceMapSource } from 'webpack-sources'
 

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

@@ -2,10 +2,9 @@ import chalk from 'next/dist/compiled/chalk'
 import findUp from 'next/dist/compiled/find-up'
 import os from 'os'
 import { basename, extname } from 'path'
-
+import * as Log from '../../build/output/log'
 import { CONFIG_FILE } from '../lib/constants'
 import { execOnce } from '../lib/utils'
-import * as Log from '../../build/output/log'
 
 const targets = ['server', 'serverless', 'experimental-serverless-trace']
 const reactModes = ['legacy', 'blocking', 'concurrent']
@@ -54,7 +53,6 @@ const defaultConfig: { [key: string]: any } = {
     workerThreads: false,
     pageEnv: false,
     productionBrowserSourceMaps: false,
-    optionalCatchAll: false,
   },
   future: {
     excludeDefaultMomentLocales: false,

packages/next/package.json

@@ -85,15 +85,16 @@
     "cacache": "13.0.1",
     "chokidar": "2.1.8",
     "css-loader": "3.5.3",
+    "cssnano-simple": "1.0.4",
     "find-cache-dir": "3.3.1",
     "jest-worker": "24.9.0",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "0.8.0",
     "mkdirp": "0.5.3",
-    "native-url": "0.3.3",
+    "native-url": "0.3.4",
     "neo-async": "2.6.1",
     "pnp-webpack-plugin": "1.6.4",
-    "postcss": "7.0.29",
+    "postcss": "7.0.32",
     "prop-types": "15.7.2",
     "prop-types-exact": "1.2.0",
     "react-is": "16.13.1",
@@ -169,7 +170,6 @@
     "conf": "5.0.0",
     "content-type": "1.0.4",
     "cookie": "0.4.1",
-    "cssnano-simple": "1.0.2",
     "debug": "4.1.1",
     "devalue": "2.0.1",
     "dotenv": "8.2.0",

packages/next/server/next-dev-server.ts

@@ -210,21 +210,6 @@ export default class DevServer extends Server {
               match: getRouteMatcher(getRouteRegex(page)),
             }))
 
-          const firstOptionalCatchAllPage =
-            this.dynamicRoutes.find((f) => /\[\[\.{3}[^\][/]*\]\]/.test(f.page))
-              ?.page ?? null
-          if (
-            this.nextConfig.experimental?.optionalCatchAll !== true &&
-            firstOptionalCatchAllPage
-          ) {
-            const msg = `Optional catch-all routes are currently experimental and cannot be used by default ("${firstOptionalCatchAllPage}").`
-            if (resolved) {
-              console.warn(msg)
-            } else {
-              throw new Error(msg)
-            }
-          }
-
           this.router.setDynamicRoutes(this.dynamicRoutes)
 
           if (!resolved) {

packages/next/taskfile.js

@@ -171,14 +171,6 @@ export async function ncc_cookie(task, opts) {
     .target('compiled/cookie')
 }
 // eslint-disable-next-line camelcase
-externals['cssnano-simple'] = 'next/dist/compiled/cssnano-simple'
-export async function ncc_cssnano_simple(task, opts) {
-  await task
-    .source(opts.src || relative(__dirname, require.resolve('cssnano-simple')))
-    .ncc({ packageName: 'cssnano-simple', externals })
-    .target('compiled/cssnano-simple')
-}
-// eslint-disable-next-line camelcase
 externals['debug'] = 'next/dist/compiled/debug'
 export async function ncc_debug(task, opts) {
   await task
@@ -539,7 +531,6 @@ export async function ncc(task) {
     'ncc_conf',
     'ncc_content_type',
     'ncc_cookie',
-    'ncc_cssnano_simple',
     'ncc_debug',
     'ncc_devalue',
     'ncc_dotenv',

packages/next/types/misc.d.ts

@@ -73,10 +73,6 @@ declare module 'next/dist/compiled/cookie' {
   import m from 'cookie'
   export = m
 }
-declare module 'next/dist/compiled/cssnano-simple' {
-  import m from 'cssnano-simple'
-  export = m
-}
 declare module 'next/dist/compiled/debug' {
   import m from 'debug'
   export = m

test/integration/css-customization/test/index.test.js

@@ -33,7 +33,7 @@ describe('CSS Customization', () => {
     expect(cssFiles.length).toBe(1)
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"@media (480px <= width < 768px){::placeholder{color:green}}.video{max-width:400px;max-height:300px}"`
+      `"@media (480px <= width < 768px){::placeholder{color:green}}.video{max-height:300px;max-width:400px}"`
     )
 
     // Contains a source map
@@ -54,7 +54,7 @@ describe('CSS Customization', () => {
     const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
     expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
       Object {
-        "mappings": "AACA,gCACE,cACE,WACF,CACF,CAGA,OACE,eAA0B,CAA1B,gBACF",
+        "mappings": "AACA,gCACE,cACE,WACF,CACF,CAGA,OACE,gBAA0B,CAA1B,eACF",
         "sourcesContent": Array [
           "/* this should pass through untransformed */
       @media (480px <= width < 768px) {
@@ -132,7 +132,7 @@ describe('CSS Customization Array', () => {
     expect(cssFiles.length).toBe(1)
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"@media (480px <= width < 768px){a:before{content:\\"\\"}::placeholder{color:green}}.video{max-width:6400px;max-height:4800px;max-width:400rem;max-height:300rem}"`
+      `"@media (480px <= width < 768px){a:before{content:\\"\\"}::placeholder{color:green}}.video{max-height:4800px;max-height:300rem;max-width:6400px;max-width:400rem}"`
     )
 
     // Contains a source map
@@ -153,7 +153,7 @@ describe('CSS Customization Array', () => {
     const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
     expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
       Object {
-        "mappings": "AACA,gCACE,SACE,UACF,CACA,cACE,WACF,CACF,CAGA,OACE,gBAA4B,CAA5B,iBAA4B,CAA5B,gBAA4B,CAA5B,iBACF",
+        "mappings": "AACA,gCACE,SACE,UACF,CACA,cACE,WACF,CACF,CAGA,OACE,iBAA4B,CAA5B,iBAA4B,CAA5B,gBAA4B,CAA5B,gBACF",
         "sourcesContent": Array [
           "/* this should pass through untransformed */
       @media (480px <= width < 768px) {
@@ -213,7 +213,7 @@ describe('Bad CSS Customization', () => {
     expect(cssFiles.length).toBe(1)
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `".video{max-width:400px;max-height:300px}"`
+      `".video{max-height:300px;max-width:400px}"`
     )
 
     // Contains a source map

test/integration/css-features/test/index.test.js

@@ -35,7 +35,7 @@ describe('Browserslist: Old', () => {
     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
 
     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
-      `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;grid-column-gap:normal;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+      `"a{clip:auto;grid-column-gap:normal;all:initial;-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;color:#000;column-fill:balance;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
     )
   })
 })

test/integration/css-fixtures/compilation-and-prefixing/styles/global.css

@@ -7,3 +7,11 @@
 .flex-parsing {
   flex: 0 0 calc(50% - var(--vertical-gutter));
 }
+
+.transform-parsing {
+  transform: translate3d(0px, 0px);
+}
+
+.g-docs-sidenav .filter::-webkit-input-placeholder {
+  opacity: 80%;
+}