Update webpack config to also take next-stylus into account (#9277)

packages/next/build/webpack-config.ts

@@ -995,7 +995,7 @@ export default async function getBaseWebpackConfig(
     }
   }
 
-  // Patch `@zeit/next-sass` and `@zeit/next-less` compatibility
+  // Patch `@zeit/next-sass`, `@zeit/next-less`, `@zeit/next-stylus` for compatibility
   if (webpackConfig.module && Array.isArray(webpackConfig.module.rules)) {
     ;[].forEach.call(webpackConfig.module.rules, function(
       rule: webpack.RuleSetRule
@@ -1008,9 +1008,10 @@ export default async function getBaseWebpackConfig(
         rule.test.source === '\\.scss$' || rule.test.source === '\\.sass$'
       const isLess = rule.test.source === '\\.less$'
       const isCss = rule.test.source === '\\.css$'
+      const isStylus = rule.test.source === '\\.styl$'
 
       // Check if the rule we're iterating over applies to Sass, Less, or CSS
-      if (!(isSass || isLess || isCss)) {
+      if (!(isSass || isLess || isCss || isStylus)) {
         return
       }
 
@@ -1026,8 +1027,8 @@ export default async function getBaseWebpackConfig(
             typeof use.options === 'object' &&
             // The `minimize` property is a good heuristic that we need to
             // perform this hack. The `minimize` property was only valid on
-            // old `css-loader` versions. Custom setups (that aren't next-sass
-            // or next-less) likely have the newer version.
+            // old `css-loader` versions. Custom setups (that aren't next-sass,
+            // next-less or next-stylus) likely have the newer version.
             // We still handle this gracefully below.
             (Object.prototype.hasOwnProperty.call(use.options, 'minimize') ||
               Object.prototype.hasOwnProperty.call(
@@ -1041,12 +1042,12 @@ export default async function getBaseWebpackConfig(
 
         // Try to monkey patch within a try-catch. We shouldn't fail the build
         // if we cannot pull this off.
-        // The user may not even be using the `next-sass` or `next-less`
-        // plugins.
+        // The user may not even be using the `next-sass` or `next-less` or
+        // `next-stylus` plugins.
         // If it does work, great!
         try {
-          // Resolve the version of `@zeit/next-css` as depended on by the Sass
-          // or Less plugin.
+          // Resolve the version of `@zeit/next-css` as depended on by the Sass,
+          // Less or Stylus plugin.
           const correctNextCss = resolveRequest(
             '@zeit/next-css',
             isCss
@@ -1058,6 +1059,8 @@ export default async function getBaseWebpackConfig(
                     ? '@zeit/next-sass'
                     : isLess
                     ? '@zeit/next-less'
+                    : isStylus
+                    ? '@zeit/next-stylus'
                     : 'next'
                 )
           )