feat(webpack): set default sassImplementation to sass-embedded (#30580)

## Current Behavior
The `sassImplementation` option for Webpack and Rspack is set to `sass`
by default.
`sass-embedded` offers a faster alternative.

## Expected Behavior
Switch the default `sassImplementation` option to `sass-embedded`.

packages/rspack/src/plugins/utils/apply-web-config.ts

@@ -143,9 +143,9 @@ export function applyWebConfig(
           loader: require.resolve('sass-loader'),
           options: {
             implementation:
-              options.sassImplementation === 'sass-embedded'
+              options.sassImplementation === 'sass'
-                ? require.resolve('sass-embedded')
+                ? require.resolve('sass')
-                : require.resolve('sass'),
+                : require.resolve('sass-embedded'),
             api: 'modern-compiler',
             sassOptions: {
               fiber: false,
@@ -209,9 +209,9 @@ export function applyWebConfig(
           options: {
             api: 'modern-compiler',
             implementation:
-              options.sassImplementation === 'sass-embedded'
+              options.sassImplementation === 'sass'
-                ? require.resolve('sass-embedded')
+                ? require.resolve('sass')
-                : require.resolve('sass'),
+                : require.resolve('sass-embedded'),
             sourceMap: !!options.sourceMap,
             sassOptions: {
               fiber: false,
@@ -279,9 +279,9 @@ export function applyWebConfig(
           options: {
             api: 'modern-compiler',
             implementation:
-              options.sassImplementation === 'sass-embedded'
+              options.sassImplementation === 'sass'
-                ? require.resolve('sass-embedded')
+                ? require.resolve('sass')
-                : require.resolve('sass'),
+                : require.resolve('sass-embedded'),
             sourceMap: !!options.sourceMap,
             sassOptions: {
               fiber: false,

packages/rspack/src/plugins/utils/models.ts

@@ -161,10 +161,10 @@ export interface NxAppRspackPluginOptions {
    * Add an additional chunk for the rspack runtime. Defaults to `true` when `target === 'web'`.
    */
   runtimeChunk?: boolean;
-  // TODO(v21): Make Sass Embedded the default in version 21.
   // TODO(v22): Remove in version 22.
   /**
    * The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.
+   * @deprecated Sass option will be removed in Nx 22. This option will also be removed in Nx 22 as it is no longer needed.
    */
   sassImplementation?: 'sass' | 'sass-embedded';
   /**

packages/rspack/src/plugins/utils/plugins/normalize-options.ts

@@ -121,7 +121,8 @@ export function normalizeOptions(
     root: workspaceRoot,
     runtimeChunk: combinedPluginAndMaybeExecutorOptions.runtimeChunk ?? true,
     sassImplementation:
-      combinedPluginAndMaybeExecutorOptions.sassImplementation ?? 'sass',
+      combinedPluginAndMaybeExecutorOptions.sassImplementation ??
+      'sass-embedded',
     scripts: combinedPluginAndMaybeExecutorOptions.scripts ?? [],
     sourceMap: combinedPluginAndMaybeExecutorOptions.sourceMap ?? !isProd,
     sourceRoot,

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

@@ -145,9 +145,9 @@ export function applyWebConfig(
           options: {
             api: 'modern-compiler',
             implementation:
-              options.sassImplementation === 'sass-embedded'
+              options.sassImplementation === 'sass'
-                ? require.resolve('sass-embedded')
+                ? require.resolve('sass')
-                : require.resolve('sass'),
+                : require.resolve('sass-embedded'),
             sassOptions: {
               fiber: false,
               precision: 8,
@@ -210,9 +210,9 @@ export function applyWebConfig(
           options: {
             api: 'modern-compiler',
             implementation:
-              options.sassImplementation === 'sass-embedded'
+              options.sassImplementation === 'sass'
-                ? require.resolve('sass-embedded')
+                ? require.resolve('sass')
-                : require.resolve('sass'),
+                : require.resolve('sass-embedded'),
             sourceMap: !!options.sourceMap,
             sassOptions: {
               fiber: false,
@@ -280,9 +280,9 @@ export function applyWebConfig(
           options: {
             api: 'modern-compiler',
             implementation:
-              options.sassImplementation === 'sass-embedded'
+              options.sassImplementation === 'sass'
-                ? require.resolve('sass-embedded')
+                ? require.resolve('sass')
-                : require.resolve('sass'),
+                : require.resolve('sass-embedded'),
             sourceMap: !!options.sourceMap,
             sassOptions: {
               fiber: false,

packages/webpack/src/plugins/nx-webpack-plugin/lib/normalize-options.ts

@@ -133,7 +133,8 @@ export function normalizeOptions(
     targetName,
     vendorChunk: combinedPluginAndMaybeExecutorOptions.vendorChunk ?? !isProd,
     sassImplementation:
-      combinedPluginAndMaybeExecutorOptions.sassImplementation ?? 'sass',
+      combinedPluginAndMaybeExecutorOptions.sassImplementation ??
+      'sass-embedded',
   };
 }
 

packages/webpack/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options.ts

@@ -221,10 +221,10 @@ export interface NxAppWebpackPluginOptions {
    * Use tsconfig-paths-webpack-plugin to resolve modules using paths in the tsconfig file.
    */
   useTsconfigPaths?: boolean;
-  // TODO(v21): Make Sass Embedded the default in version 21.
   // TODO(v22): Remove in version 22.
   /**
    * The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.
+   * @deprecated Sass option will be removed in Nx 22. This option will also be removed in Nx 22 as it is no longer needed.
    */
   sassImplementation?: 'sass' | 'sass-embedded';
   /**