feat(migration): add stylePreprocessorOptions migration #12439 (#12459)

Author: Lipata

projects/igniteui-angular/migrations/migration-collection.json

@@ -130,6 +130,11 @@
             "version": "15.0.0",
             "description": "Updates Ignite UI for Angular from v14.1.x to v15.0.0",
             "factory": "./update-15_0_0"
+        },
+        "migration-27": {
+            "version": "15.0.4",
+            "description": "Updates Ignite UI for Angular from v15.0.x to v15.0.4",
+            "factory": "./update-15_0_4"
         }
     }
 }

projects/igniteui-angular/migrations/update-15_0_4/index.spec.ts

@@ -0,0 +1,41 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '15.0.4';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                root: '/',
+                sourceRoot: '/testSrc',
+                architect: {
+                    build: {
+                      options: {
+                      }
+                    }
+                }
+            }
+        },
+        version: 1
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-27';
+
+    it(`should add igniteui-theming to pacakage json and configure it`, async () => {
+        const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(JSON.parse(JSON.stringify(tree.readContent('angular.json')))).toContain("stylePreprocessorOptions");
+    });
+});

projects/igniteui-angular/migrations/update-15_0_4/index.ts

@@ -0,0 +1,57 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { workspaces } from '@angular-devkit/core';
+import { UpdateChanges } from '../common/UpdateChanges';
+import { includeStylePreprocessorOptions } from '../../schematics/utils/dependency-handler';
+import { createHost } from '../../schematics/utils/util';
+
+const version = '15.0.4';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+
+    const workspaceHost = createHost(host);
+    const { workspace } = await workspaces.readWorkspace(host.root.path, workspaceHost);
+    await includeStylePreprocessorOptions(workspaceHost, workspace, context, host);
+    await workspaces.writeWorkspace(workspace, workspaceHost);
+
+    // replace CSS custom properties prefix from --igx to --ig and grays to gray
+    const CUSTOM_CSS_PROPERTIES = [
+        '--igx-primary-',
+        '--igx-secondary-',
+        '--igx-grays-',
+        '--igx-surface-',
+        '--igx-info-',
+        '--igx-success-',
+        '--igx-warn-',
+        '--igx-error-',
+        '--igx-radius-factor',
+        '--igx-elevation',
+        '--igx-font-family',
+        '--igx-h(\\d)-',
+        '--igx-subtitle-(\\d)-',
+        '--igx-body-(\\d)-',
+        '--igx-button-',
+        '--igx-caption-',
+        '--igx-overline-'
+    ];
+    for (const entryPath of update.sassFiles) {
+        let content = host.read(entryPath).toString();
+        CUSTOM_CSS_PROPERTIES.forEach(cssProperty => {
+            const regex = new RegExp(cssProperty, 'g');
+            if (regex.test(content)) {
+                let newCssProperty = cssProperty.replace(/igx/g, 'ig');
+                newCssProperty = newCssProperty.replace(/grays/g, 'gray');
+                newCssProperty = newCssProperty.replace('(\\d)', '$1');
+                content = content.replace(regex, newCssProperty);
+                host.overwrite(entryPath, content);
+            }
+        });
+    }
+};

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -99,7 +99,7 @@ export const addDependencies = (options: Options) => async (tree: Tree, context:
 
     await includeDependencies(workspaceHost, workspace, pkgJson, context, tree);
 
-    await includeStylePreprocessorOptions(workspaceHost, workspace, context, tree)
+    await includeStylePreprocessorOptions(workspaceHost, workspace, context, tree);
 
     addPackageToPkgJson(tree, schematicsPackage, pkgJson.igxDevDependencies[schematicsPackage], PackageTarget.DEV);
 };
@@ -157,7 +157,7 @@ const addHammerToConfig =
         }
     };
 
-const includeStylePreprocessorOptions = async (workspaceHost: workspaces.WorkspaceHost, workspace: workspaces.WorkspaceDefinition, context: SchematicContext, tree: Tree): Promise<void> => {
+export const includeStylePreprocessorOptions = async (workspaceHost: workspaces.WorkspaceHost, workspace: workspaces.WorkspaceDefinition, context: SchematicContext, tree: Tree): Promise<void> => {
     await Promise.all(Array.from(workspace.projects.values()).map(async (project) => {
         await addStylePreprocessorOptions(project, tree, "build", context);
         await addStylePreprocessorOptions(project, tree, "test", context);
@@ -169,6 +169,13 @@ const includeStylePreprocessorOptions = async (workspaceHost: workspaces.Workspa
 const addStylePreprocessorOptions =
     async (project: workspaces.ProjectDefinition, tree: Tree, config: string, context: SchematicContext): Promise<void> => {
         const projectOptions = getTargetedProjectOptions(project, config, context);
+        const warn = `Could not find a matching stylePreprocessorOptions includePaths array property under ${config} options. ` +
+            `It could require you to manually update it to "stylePreprocessorOptions": { "includePaths": ["node_modules"] }`;
+
+        if (!projectOptions) {
+            context.logger.warn(warn);
+            return;
+        }
 
         // if there are no elements in the architect[config]options.stylePreprocessorOptions.includePaths that contain node_modules
         const stylePrepropPath = 'node_modules';
@@ -178,8 +185,7 @@ const addStylePreprocessorOptions =
             } else if (!projectOptions?.stylePreprocessorOptions) {
                 projectOptions["stylePreprocessorOptions"] = { includePaths: [stylePrepropPath]};
             } else {
-                context.logger.warn(`Could not find a matching stylePreprocessorOptions includePaths array property under ${config} options. ` +
-                    `It could require you to manually update it to "stylePreprocessorOptions": { "includePaths": ["node_modules"] }`);
+                context.logger.warn(warn);
             }
         }
     };