feat: migration schematics for 2211.35 to silence sass deprecations i…

…n angular.json (#19970)

fixes https://jira.tools.sap/browse/CXSPA-9375

QA steps:
- create app with ng17 and spa2211.32
 - build and publish libs from this branch to verdaccio

- update Angular and spartacus according to this guide (using libs from verdaccio) https://github.com/SAP/spartacus/blob/develop/docs/migration/2211_35/migration.md
- verify the warning was presented in terminal during migration :
   <img width="1333" alt="image" src="https://github.com/user-attachments/assets/bb83de0f-65a0-4724-a7cb-ea38199ffc78" />

- verify in angular.json the warnings are configured to be supressed:
   <img width="532" alt="image" src="https://github.com/user-attachments/assets/5d1dd7ad-4c69-4a7c-ae1b-87e76643c5c7" />

- run dev server and verify there are no warnings
   <img width="593" alt="image" src="https://github.com/user-attachments/assets/265f8434-dd0a-42c0-9fe2-a3611fd4decb" />

projects/schematics/src/add-spartacus/index.ts

@@ -57,6 +57,7 @@ import {
   getStylesConfigFilePath,
 } from '../shared/utils/styling-utils';
 import {
+  createSassSilenceDeprecations,
   getDefaultProjectNameFromWorkspace,
   getProjectFromWorkspace,
   getProjectTargets,
@@ -359,42 +360,6 @@ Note: Since version 17, Angular's command "ng new" by default creates an app wit
   };
 }
 
-function createSassSilenceDeprecations(
-  context: SchematicContext,
-  originalStylePreprocessorOptions: {
-    sass?: { silenceDeprecations?: string[] };
-    [key: string]: any;
-  } = {}
-): { sass: { silenceDeprecations: string[] } } {
-  const DEFAULT_SILENCE_DEPRECATIONS = [
-    // We need to silence the deprecation warning for the `@import` directive
-    // because `@import` is used in the Spartacus styles and in the Bootstrap 4 styles
-    // (which are imported by the Spartacus styles).
-    // Otherwise, since Angular v19, all apps would have a wall of deprecation warnings
-    // in the console when running `ng serve`.
-    //
-    // CXSPA-447: Eventually we should remove all the `@import` directives from the Spartacus styles
-    // and drop the usage of Bootstrap 4, and then we can remove the `silenceDeprecations` option.
-    'import',
-  ];
-
-  context.logger.warn(
-    `⚠️ Warnings about the Sass '@import' usage were silenced, because Sass '@import' is used in Spartacus and Bootstrap 4 styles. To enable warnings back, in your 'angular.json' file remove the item "import" from the array at section 'architect.build.options.stylePreprocessorOptions.sass.silenceDeprecations'. For more, see: https://sass-lang.com/blog/import-is-deprecated and https://angular.dev/reference/configs/workspace-config#style-preprocessor-options`
-  );
-
-  return {
-    sass: {
-      ...(originalStylePreprocessorOptions.sass || {}),
-      silenceDeprecations: Array.from(
-        new Set([
-          ...(originalStylePreprocessorOptions.sass?.silenceDeprecations || []),
-          ...DEFAULT_SILENCE_DEPRECATIONS,
-        ])
-      ),
-    },
-  };
-}
-
 export function createStylePreprocessorOptions(
   options?: SpartacusOptions
 ): Rule {

projects/schematics/src/migrations/2211_35/silence-sass-deprecations/silence-sass-deprecations.ts

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import {
+  getWorkspace,
+  getDefaultProjectNameFromWorkspace,
+  createSassSilenceDeprecations,
+} from '../../../shared/utils/workspace-utils';
+
+export function migrate(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const { path, workspace: angularJson } = getWorkspace(tree);
+    const projectName = getDefaultProjectNameFromWorkspace(tree);
+    const project = angularJson.projects[projectName];
+    const architect = project.architect;
+
+    const buildOptions = architect?.build?.options as any;
+    const buildStylePreprocessorOptions = buildOptions.stylePreprocessorOptions;
+    buildOptions.stylePreprocessorOptions = {
+      ...buildStylePreprocessorOptions,
+      ...createSassSilenceDeprecations(context, buildStylePreprocessorOptions),
+    };
+
+    const JSON_INDENT = 2;
+
+    tree.overwrite(path, JSON.stringify(angularJson, null, JSON_INDENT));
+  };
+}

projects/schematics/src/migrations/migrations.json

@@ -249,6 +249,11 @@
       "version": "2211.35.0",
       "factory": "./2211_35/bootstrap/bootstrap#migrate",
       "description": "Replace import paths for Bootstrap usages"
+    },
+    "03-migration-v2211_35-silence-sass-deprecations": {
+      "version": "2211.35.0",
+      "factory": "./2211_35/silence-sass-deprecations/silence-sass-deprecations#migrate",
+      "description": "Silence Sass deprecations about the `@import` directive"
     }
   }
 }

projects/schematics/src/shared/utils/workspace-utils.ts

@@ -211,3 +211,48 @@ export function scaffoldStructure(options: SpartacusOptions): Rule {
     ]);
   };
 }
+
+/**
+ * Creates the `silenceDeprecations` option for the `sass` preprocessor options.
+ *
+ * This is needed because Sass `@import` is used in Spartacus and Bootstrap 4 styles,
+ * and since Angular v19, all apps would have a wall of deprecation warnings
+ * in the console when running `ng serve`.
+ *
+ * @param context - The schematic context.
+ */
+export function createSassSilenceDeprecations(
+  context: SchematicContext,
+  originalStylePreprocessorOptions: {
+    sass?: { silenceDeprecations?: string[] };
+    [key: string]: any;
+  } = {}
+): { sass: { silenceDeprecations: string[] } } {
+  const DEFAULT_SILENCE_DEPRECATIONS = [
+    // We need to silence the deprecation warning for the `@import` directive
+    // because `@import` is used in the Spartacus styles and in the Bootstrap 4 styles
+    // (which are imported by the Spartacus styles).
+    // Otherwise, since Angular v19, all apps would have a wall of deprecation warnings
+    // in the console when running `ng serve`.
+    //
+    // CXSPA-447: Eventually we should remove all the `@import` directives from the Spartacus styles
+    // and drop the usage of Bootstrap 4, and then we can remove the `silenceDeprecations` option.
+    'import',
+  ];
+
+  context.logger.warn(
+    `⚠️ Warnings about the Sass '@import' usage were silenced, because Sass '@import' is used in Spartacus and Bootstrap 4 styles. To enable warnings back, in your 'angular.json' file remove the item "import" from the array at section 'architect.build.options.stylePreprocessorOptions.sass.silenceDeprecations'. For more, see: https://sass-lang.com/blog/import-is-deprecated and https://angular.dev/reference/configs/workspace-config#style-preprocessor-options`
+  );
+
+  return {
+    sass: {
+      ...(originalStylePreprocessorOptions.sass || {}),
+      silenceDeprecations: Array.from(
+        new Set([
+          ...(originalStylePreprocessorOptions.sass?.silenceDeprecations || []),
+          ...DEFAULT_SILENCE_DEPRECATIONS,
+        ])
+      ),
+    },
+  };
+}