From 742b9a1bcbb7bab0efe3e8145231069ab6ccbafe Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Mon, 23 Oct 2023 18:15:30 -0400
Subject: [PATCH] fix(webpack): add back deprecated Stylus support until v18
 (#19810)

---
 packages/webpack/package.json                 |  2 +
 .../utils/webpack/deprecated-stylus-loader.ts | 10 ++++
 packages/webpack/src/utils/with-web.ts        | 51 ++++++++++++++++++-
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 packages/webpack/src/utils/webpack/deprecated-stylus-loader.ts

diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index aa3d8c56f9d14..5537da4831dcc 100644
--- a/packages/webpack/package.json
+++ b/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",
diff --git a/packages/webpack/src/utils/webpack/deprecated-stylus-loader.ts b/packages/webpack/src/utils/webpack/deprecated-stylus-loader.ts
new file mode 100644
index 0000000000000..7804c8de1e499
--- /dev/null
+++ b/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);
+}
diff --git a/packages/webpack/src/utils/with-web.ts b/packages/webpack/src/utils/with-web.ts
index 0bf93ce0211ff..1c46550974f17 100644
--- a/packages/webpack/src/utils/with-web.ts
+++ b/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],
       },
     ];