Merge branch 'canary' into conformance-plugin

vercel · Jan 23, 2020 · 74d5b60 · 74d5b60
2 parents 3324374 + 127f707
commit 74d5b60
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 8 deletions.
diff --git a/errors/no-cache.md b/errors/no-cache.md
@@ -75,6 +75,17 @@ cache:
     - '.next/cache/**/*' # Cache Next.js for faster application rebuilds
 ```
 
+**GitHub Actions**
+
+Using GitHub's [actions/cache](https://github.com/actions/cache), add the following step in your workflow file:
+
+```yaml
+uses: actions/cache@v1
+with:
+  path: ${{ github.workspace }}/.next/cache
+  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}
+```
+
 **Bitbucket Pipelines**
 
 Add or merge the following into your `bitbucket-pipelines.yml` at the top level (same level as `pipelines`):

diff --git a/errors/postcss-function.md b/errors/postcss-function.md
@@ -0,0 +1,30 @@
+# PostCSS Configuration Is a Function
+
+#### Why This Error Occurred
+
+The project's custom PostCSS configuration exports a function instead of an object.
+
+#### Possible Ways to Fix It
+
+Adjust the custom PostCSS configuration to not export a function.
+Instead, return a plain object—if you need environment information, read it from `process.env`.
+
+**Before**
+
+```js
+module.exports = ({ env }) => ({
+  plugins: {
+    'postcss-plugin': env === 'production' ? {} : false,
+  },
+})
+```
+
+**After**
+
+```js
+module.exports = {
+  plugins: {
+    'postcss-plugin': process.env.NODE_ENV === 'production' ? {} : false,
+  },
+}
+```
diff --git a/errors/postcss-ignored-plugin.md b/errors/postcss-ignored-plugin.md
@@ -0,0 +1,20 @@
+# Ignored PostCSS Plugin
+
+#### Why This Error Occurred
+
+The project's custom PostCSS configuration attempts to configure unnecessary plugins:
+
+- postcss-modules-values
+- postcss-modules-scope
+- postcss-modules-extract-imports
+- postcss-modules-local-by-default
+- postcss-modules
+
+#### Possible Ways to Fix It
+
+Remove the plugin specified in the error message from your custom PostCSS configuration.
+
+#### How do I configure CSS Modules?
+
+CSS Modules are supported in [Next.js' built-in CSS support](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
+You can [read more](https://nextjs.org/docs/advanced-features/customizing-postcss-config) about how to use them [here](https://nextjs.org/docs/advanced-features/customizing-postcss-config).
diff --git a/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts
@@ -37,7 +37,8 @@ function isIgnoredPlugin(pluginPath: string): boolean {
     `${chalk.yellow.bold('Warning')}: Please remove the ${chalk.underline(
       plugin
     )} plugin from your PostCSS configuration. ` +
-      `This plugin is automatically configured by Next.js.`
+      `This plugin is automatically configured by Next.js.\n` +
+      'Read more: https://err.sh/next.js/postcss-ignored-plugin'
   )
   return true
 }
@@ -118,7 +119,8 @@ export async function getPostCssPlugins(
 
   if (typeof config === 'function') {
     throw new Error(
-      `Your custom PostCSS configuration may not export a function. Please export a plain object instead.`
+      `Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n` +
+        'Read more: https://err.sh/next.js/postcss-function'
     )
   }
 

diff --git a/test/integration/export-serverless/pages/index.js b/test/integration/export-serverless/pages/index.js
@@ -40,7 +40,7 @@ export default () => (
         <a id="level1-about-page">Level1 about page</a>
       </Link>
       <Link href="/dynamic-imports">
-        <a id="dynamic-imports-page">Dynamic imports page</a>
+        <a id="dynamic-imports-link">Dynamic imports page</a>
       </Link>
     </div>
     <p>This is the home page</p>

diff --git a/test/integration/export-serverless/test/browser.js b/test/integration/export-serverless/test/browser.js
@@ -133,12 +133,12 @@ export default function(context) {
     it('should render dynamic import components in the client', async () => {
       const browser = await webdriver(context.port, '/')
       await browser
-        .elementByCss('#dynamic-imports-page')
+        .elementByCss('#dynamic-imports-link')
         .click()
         .waitForElementByCss('#dynamic-imports-page')
 
       await check(
-        () => browser.elementByCss('#dynamic-imports-page p').text(),
+        () => getBrowserBodyText(browser),
         /Welcome to dynamic imports/
       )
 

diff --git a/test/integration/export/pages/index.js b/test/integration/export/pages/index.js
@@ -40,7 +40,7 @@ export default () => (
         <a id="level1-about-page">Level1 about page</a>
       </Link>
       <Link href="/dynamic-imports">
-        <a id="dynamic-imports-page">Dynamic imports page</a>
+        <a id="dynamic-imports-link">Dynamic imports page</a>
       </Link>
     </div>
     <p>This is the home page</p>

diff --git a/test/integration/export/test/browser.js b/test/integration/export/test/browser.js
@@ -140,12 +140,12 @@ export default function(context) {
     it('should render dynamic import components in the client', async () => {
       const browser = await webdriver(context.port, '/')
       await browser
-        .elementByCss('#dynamic-imports-page')
+        .elementByCss('#dynamic-imports-link')
         .click()
         .waitForElementByCss('#dynamic-imports-page')
 
       await check(
-        () => browser.elementByCss('#dynamic-imports-page p').text(),
+        () => getBrowserBodyText(browser),
         /Welcome to dynamic imports/
       )