feat(misc)!: handle v20 deprecations in plugins (#28222)

This PR removes these from v20 since they were deprecated and slated for
removal:

- `executeWebpackDevServerBuilder` export from `@nx/angular/executors`,
users should use `executeDevServerBuilder`
- `withStylus` util from `@nx/next/plugins/with-stylus` since it was
deprecated in v17 and has just throw an error that users need to use
SASS with Next.js

The `getRollupOptions` function from `@nx/react/plugins/bundle-rollup`
has been deprecated as mention previously and slated for removal in v22.
New users are using inferred targets from Rollup, and existing projects
using this module should run `nx g @nx/rollup:convert-to-inferred` or
manually update rollup config to use `withNx` function.

Also, bumped some deprecation for later in v21:

- Remove inline builds from tsc/swc 
- Changes to SVGR to align with Webpack v5 (e.g. `import ReactComponent
from './img.svg?svgr'`)
- Remove `isolatedConfig` from Webpack executor -- requires a migration
that extracts to a standard webpack config just in case (different from
the original one that extracts to `withNx`)

The ESLint TODOs were rescoped to `TODO(eslint)` and we'll look at it in
further flat config work rather than tying it to an Nx release.

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

docs/shared/mental-model/large-tasks.json

@@ -18495,11 +18495,6 @@
             "hash": "d750a6f13f1172e9c033370ead717b3f16d9f93b",
             "deps": ["npm:next", "devkit", "npm:@nrwl/next"]
           },
-          {
-            "file": "packages/next/plugins/with-stylus.ts",
-            "hash": "f3a6bbd478d02c0e9940e4ebe3ab662456b53ebe",
-            "deps": ["npm:webpack-merge", "npm:next"]
-          },
           {
             "file": "packages/next/project.json",
             "hash": "171f3c8158b2682525ffb65dac39edf04578460c"

packages/angular/executors.ts

@@ -9,13 +9,4 @@ export * from './src/executors/application/application.impl';
 export * from './src/executors/extract-i18n/extract-i18n.impl';
 export * from './src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl';
 
-import { executeDevServerBuilder } from './src/builders/dev-server/dev-server.impl';
+export { executeDevServerBuilder } from './src/builders/dev-server/dev-server.impl';
-
-export {
-  // TODO(v20): remove this alias
-  /**
-   * @deprecated Use executeDevServerBuilder instead. It will be removed in Nx v20.
-   */
-  executeDevServerBuilder as executeWebpackDevServerBuilder,
-  executeDevServerBuilder,
-};

packages/eslint-plugin/src/configs/javascript.ts

@@ -55,7 +55,7 @@ export default {
      * previously defined v5 of `@typescript-eslint`. v6 of `@typescript-eslint`
      * changed how configurations are defined.
      *
-     * TODO(v20): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
+     * TODO(eslint): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
      */
     '@typescript-eslint/no-non-null-assertion': 'warn',
     '@typescript-eslint/adjacent-overload-signatures': 'error',
@@ -70,7 +70,7 @@ export default {
      * During the migration to use ESLint v9 and typescript-eslint v8 for new workspaces,
      * this rule would have created a lot of noise, so we are disabling it by default for now.
      *
-     * TODO(v20): we should make this part of what we re-evaluate in v20
+     * TODO(eslint): we should make this part of what we re-evaluate in v20
      */
     '@typescript-eslint/no-require-imports': 'off',
   },

packages/eslint-plugin/src/configs/typescript.ts

@@ -38,7 +38,7 @@ export default {
      * previously defined v5 of `@typescript-eslint`. v6 of `@typescript-eslint`
      * changed how configurations are defined.
      *
-     * TODO(v20): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
+     * TODO(eslint): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
      */
     '@typescript-eslint/no-non-null-assertion': 'warn',
     '@typescript-eslint/adjacent-overload-signatures': 'error',
@@ -53,7 +53,7 @@ export default {
      * During the migration to use ESLint v9 and typescript-eslint v8 for new workspaces,
      * this rule would have created a lot of noise, so we are disabling it by default for now.
      *
-     * TODO(v20): we should make this part of what we re-evaluate in v20
+     * TODO(eslint): we should make this part of what we re-evaluate in v20
      */
     '@typescript-eslint/no-require-imports': 'off',
   },

packages/eslint-plugin/src/flat-configs/javascript.ts

@@ -59,7 +59,7 @@ export default tseslint.config(
        * previously defined v5 of `@typescript-eslint`. v6 of `@typescript-eslint`
        * changed how configurations are defined.
        *
-       * TODO(v20): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
+       * TODO(eslint): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
        */
       '@typescript-eslint/no-non-null-assertion': 'warn',
       '@typescript-eslint/adjacent-overload-signatures': 'error',
@@ -74,7 +74,7 @@ export default tseslint.config(
        * During the migration to use ESLint v9 and typescript-eslint v8 for new workspaces,
        * this rule would have created a lot of noise, so we are disabling it by default for now.
        *
-       * TODO(v20): we should make this part of what we re-evaluate in v20
+       * TODO(eslint): we should make this part of what we re-evaluate in v20
        */
       '@typescript-eslint/no-require-imports': 'off',
     },

packages/eslint-plugin/src/flat-configs/typescript.ts

@@ -43,7 +43,7 @@ export default tseslint.config(
        * previously defined v5 of `@typescript-eslint`. v6 of `@typescript-eslint`
        * changed how configurations are defined.
        *
-       * TODO(v20): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
+       * TODO(eslint): re-evalute these deviations from @typescript-eslint/recommended in v20 of Nx
        */
       '@typescript-eslint/no-non-null-assertion': 'warn',
       '@typescript-eslint/adjacent-overload-signatures': 'error',
@@ -58,7 +58,7 @@ export default tseslint.config(
        * During the migration to use ESLint v9 and typescript-eslint v8 for new workspaces,
        * this rule would have created a lot of noise, so we are disabling it by default for now.
        *
-       * TODO(v20): we should make this part of what we re-evaluate in v20
+       * TODO(eslint): we should make this part of what we re-evaluate in v20
        */
       '@typescript-eslint/no-require-imports': 'off',
     },

packages/js/babel.ts

@@ -37,7 +37,7 @@ module.exports = function (api: any, options: NxWebBabelPresetOptions = {}) {
 
   // Determine settings  for `@babel//babel-plugin-transform-class-properties`,
   // so that we can sync the `loose` option with `@babel/preset-env`.
-  // TODO(v20): Remove classProperties since it's no longer needed, now that the class props transform is in preset-env.
+  // TODO(v21): Remove classProperties since it's no longer needed, now that the class props transform is in preset-env.
   const loose = options.classProperties?.loose ?? options.loose ?? true;
   if (options.classProperties) {
     logger.warn(

packages/js/src/utils/schema.d.ts

@@ -54,6 +54,6 @@ export interface NormalizedSwcExecutorOptions
   swcCliOptions: SwcCliOptions;
   tmpSwcrcPath: string;
   sourceRoot?: string;
-  // TODO(v20): remove inline feature
+  // TODO(v21): remove inline feature
   inline?: boolean;
 }

packages/js/src/utils/swc/compile-swc.ts

@@ -21,7 +21,7 @@ function getSwcCmd(
 ) {
   const swcCLI = require.resolve('@swc/cli/bin/swc.js');
   let inputDir: string;
-  // TODO(v20): remove inline feature
+  // TODO(v21): remove inline feature
   if (inline) {
     inputDir = originalProjectRoot.split('/')[0];
   } else {

packages/next/plugins/with-nx.ts

@@ -363,7 +363,7 @@ export function getNextConfig(
 
         const svgrOptions =
           typeof nx?.svgr === 'object' ? nx.svgr : defaultSvgrOptions;
-        // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+        // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
         // It should be:
         // use: [{
         //   test: /\.svg$/i,

packages/next/plugins/with-stylus.ts

@@ -1,16 +0,0 @@
-import { NextConfigFn } from '../src/utils/config';
-import { WithNxOptions } from './with-nx';
-
-// TODO(v20): Remove file, it is here until users migrate over to SASS manually.
-export function withStylus(
-  configOrFn: WithNxOptions | NextConfigFn
-): NextConfigFn {
-  return async (phase: string) => {
-    throw new Error(
-      `Stylus support has been removed and you should use the built-in SASS support. Remove the "withStylus" plugin from your Next.js config, and rename your files from .styl to .scss.`
-    );
-  };
-}
-
-module.exports = withStylus;
-module.exports.withStylus = withStylus;

packages/react/index.ts

@@ -1,6 +1,6 @@
 import { NxReactWebpackPlugin as _NxReactWebpackPlugin } from './plugins/nx-react-webpack-plugin/nx-react-webpack-plugin';
 
-// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+// TODO(v21): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
 /** @deprecated Use '@nx/react/webpack-plugin' instead. */
 export const NxReactWebpackPlugin = _NxReactWebpackPlugin;
 

packages/react/plugins/bundle-rollup.ts

@@ -1,6 +1,9 @@
 import * as rollup from 'rollup';
 
-// TODO(v20): This should be deprecated and removed in v22.
+// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.js files.
+/**
+ * @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.js file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.js file if it does not exist.
+ */
 function getRollupOptions(options: rollup.RollupOptions) {
   const extraGlobals = {
     react: 'React',

packages/react/plugins/component-testing/index.ts

@@ -283,7 +283,7 @@ function buildTargetWebpack(
 
   return async () => {
     customWebpack = await customWebpack;
-    // TODO(v20): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
+    // TODO(v21): Component testing need to be agnostic of the underlying executor. With Crystal, we're not using `@nx/webpack:webpack` by default.
     // We need to decouple CT from the build target of the app, we just care about bundler config (e.g. webpack.config.js).
     // The generated setup should support both Webpack and Vite as documented here: https://docs.cypress.io/guides/component-testing/react/overview
     // Related issue: https://github.com/nrwl/nx/issues/21546

packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts

@@ -21,7 +21,7 @@ export function applyReactConfig(
     const svgrOptions =
       typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
 
-    // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+    // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
     // It should be:
     // use: [{
     //   test: /\.svg$/i,

packages/webpack/index.ts

@@ -14,7 +14,7 @@ export {
 /** @deprecated Use `configurationGenerator` instead. */
 export const webpackProjectGenerator = configurationGenerator;
 
-// TODO(v20): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
+// TODO(v21): Remove this in favor of deep imports in order to load configs faster (150-200ms faster).
 /** @deprecated Use NxAppWebpackPlugin from `@nx/webpack/app-plugin` instead. */
 export const NxWebpackPlugin = NxAppWebpackPlugin;
 /** @deprecated Use NxTsconfigPathsWebpackPlugin from `@nx/webpack/tsconfig-paths-plugin` instead. */

packages/webpack/src/executors/webpack/schema.d.ts

@@ -47,7 +47,7 @@ export interface WebpackExecutorOptions {
   extractLicenses?: boolean;
   fileReplacements?: FileReplacement[];
   generatePackageJson?: boolean;
-  // TODO(v20): Remove this option
+  // TODO(v21): Remove this option
   /** @deprecated set webpackConfig and provide an explicit webpack.config.js file (See: https://nx.dev/recipes/webpack/webpack-config-setup) */
   isolatedConfig?: boolean;
   standardWebpackConfigFunction?: boolean;