fix(webpack): add back deprecated Stylus support until v18

packages/webpack/package.json

@@ -52,6 +52,8 @@
     "sass-loader": "^12.2.0",
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.0",
+    "stylus": "^0.59.0",
+    "stylus-loader": "^7.1.0",
     "terser-webpack-plugin": "^5.3.3",
     "ts-loader": "^9.3.1",
     "tsconfig-paths-webpack-plugin": "4.0.0",

packages/webpack/src/utils/webpack/deprecated-stylus-loader.ts

@@ -0,0 +1,10 @@
+import { logger } from '@nx/devkit';
+// @ts-ignore
+import * as stylusLoader from 'stylus-loader';
+// TOOD(v18): Remove this file and stylus support.
+export default function (source: string): string {
+  logger.warn(
+    `Stylus is support is deprecated and will be removed in Nx 18. We recommend that you migrate to Sass by renaming \`.styl\` files to \`.scss\` and ensuring that the content is valid Sass.`
+  );
+  return stylusLoader.call(this, source);
+}

packages/webpack/src/utils/with-web.ts

@@ -106,7 +106,7 @@ export function withWeb(pluginOptions: WithWebOptions = {}): NxWebpackPlugin {
     if (stylesOptimization) {
       minimizer.push(
         new CssMinimizerPlugin({
-          test: /\.(?:css|scss|sass|less)$/,
+          test: /\.(?:css|scss|sass|less|styl)$/,
         })
       );
     }
@@ -199,6 +199,21 @@ export function withWeb(pluginOptions: WithWebOptions = {}): NxWebpackPlugin {
           },
         ],
       },
+      {
+        test: /\.module\.styl$/,
+        exclude: globalStylePaths,
+        use: [
+          ...getCommonLoadersForCssModules(mergedOptions, includePaths),
+          {
+            loader: join(__dirname, 'webpack/deprecated-stylus-loader.js'),
+            options: {
+              stylusOptions: {
+                include: includePaths,
+              },
+            },
+          },
+        ],
+      },
     ];
 
     const globalCssRules: RuleSetRule[] = [
@@ -244,6 +259,22 @@ export function withWeb(pluginOptions: WithWebOptions = {}): NxWebpackPlugin {
           },
         ],
       },
+      {
+        test: /\.styl$/,
+        exclude: globalStylePaths,
+        use: [
+          ...getCommonLoadersForGlobalCss(mergedOptions, includePaths),
+          {
+            loader: join(__dirname, 'webpack/deprecated-stylus-loader.js'),
+            options: {
+              sourceMap: !!mergedOptions.sourceMap,
+              stylusOptions: {
+                include: includePaths,
+              },
+            },
+          },
+        ],
+      },
     ];
 
     const globalStyleRules: RuleSetRule[] = [
@@ -289,11 +320,27 @@ export function withWeb(pluginOptions: WithWebOptions = {}): NxWebpackPlugin {
           },
         ],
       },
+      {
+        test: /\.styl$/,
+        include: globalStylePaths,
+        use: [
+          ...getCommonLoadersForGlobalStyle(mergedOptions, includePaths),
+          {
+            loader: require.resolve('stylus-loader'),
+            options: {
+              sourceMap: !!mergedOptions.sourceMap,
+              stylusOptions: {
+                include: includePaths,
+              },
+            },
+          },
+        ],
+      },
     ];
 
     const rules: RuleSetRule[] = [
       {
-        test: /\.css$|\.scss$|\.sass$|\.less$/,
+        test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
         oneOf: [...cssModuleRules, ...globalCssRules, ...globalStyleRules],
       },
     ];