Merge branch 'canary' into enhancement/prefetch-ssg-data

examples/amp/pages/index.js

@@ -18,6 +18,22 @@ export default () => {
       <h1>The Cat (AMP-first Page)</h1>
       <Byline author="Dan Zajdband" />
       <p className="caption">Meowwwwwwww</p>
+      <amp-img
+        alt="Mountains"
+        width="550"
+        height="368"
+        layout="responsive"
+        src="https://amp.dev/static/inline-examples/images/mountains.webp"
+      >
+        <amp-img
+          alt="Mountains"
+          fallback=""
+          width="550"
+          height="368"
+          layout="responsive"
+          src="https://amp.dev/static/inline-examples/images/mountains.jpg"
+        ></amp-img>
+      </amp-img>
       <p>
         Cat ipsum dolor <a href={isAmp ? '/dog?amp=1' : '/dog'}>sit amet</a>,
         eat grass, throw it back up but refuse to leave cardboard box or groom

packages/next/build/webpack/config/blocks/css/plugins.ts

@@ -193,6 +193,15 @@ export async function getPostCssPlugins(
         }
         throw new Error(genericErrorText)
       }
+    } else if (typeof plugin === 'function') {
+      console.error(
+        `${chalk.red.bold(
+          'Error'
+        )}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${chalk.bold(
+          'string'
+        )}.`
+      )
+      throw new Error(genericErrorText)
     } else {
       console.error(
         `${chalk.red.bold(

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

@@ -331,6 +331,23 @@ describe('Bad CSS Customization Array (7)', () => {
   })
 })
 
+describe('Bad CSS Customization Array (8)', () => {
+  const appDir = join(fixturesDir, 'bad-custom-configuration-arr-8')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+  })
+
+  it('should fail the build', async () => {
+    const { stderr } = await nextBuild(appDir, [], { stderr: true })
+
+    expect(stderr).toMatch(
+      /A PostCSS Plugin was passed as a function using require\(\), but it must be provided as a string/
+    )
+    expect(stderr).toMatch(/Build error occurred/)
+  })
+})
+
 describe('Bad CSS Customization Function', () => {
   const appDir = join(fixturesDir, 'bad-custom-configuration-func')
 

test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div />
+}

test/integration/css-fixtures/bad-custom-configuration-arr-8/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-trolling')],
+}

test/integration/css-fixtures/bad-custom-configuration-arr-8/styles/global.css

@@ -0,0 +1,14 @@
+/* this should pass through untransformed */
+@media (480px <= width < 768px) {
+  a::before {
+    content: '';
+  }
+  ::placeholder {
+    color: green;
+  }
+}
+
+/* this should be transformed to width/height */
+.video {
+  -xyz-max-size: 400rem 300rem;
+}