fix(@schematics/angular): add less as a devDependency when selected as the style preprocessor

Ensure `less` is automatically added to `devDependencies` when users choose it as the style preprocessor during application generation.

Closes #30503

Author: alan-agius4

packages/schematics/angular/application/index.ts

@@ -49,12 +49,12 @@ function addTsProjectReference(...paths: string[]) {
 }
 
 export default function (options: ApplicationOptions): Rule {
-  return async (host: Tree, context: SchematicContext) => {
+  return async (host: Tree) => {
     const { appDir, appRootSelector, componentOptions, folderName, sourceDir } =
       await getAppOptions(host, options);
 
     return chain([
-      addAppToWorkspaceFile(options, appDir, folderName),
+      addAppToWorkspaceFile(options, appDir),
       addTsProjectReference('./' + join(normalize(appDir), 'tsconfig.app.json')),
       options.skipTests || options.minimal
         ? noop()
@@ -157,6 +157,14 @@ function addDependenciesToPackageJson(options: ApplicationOptions) {
       });
     }
 
+    if (options.style === Style.Less) {
+      addPackageJsonDependency(host, {
+        type: NodeDependencyType.Dev,
+        name: 'less',
+        version: latestVersions['less'],
+      });
+    }
+
     if (!options.skipInstall) {
       context.addTask(new NodePackageInstallTask());
     }
@@ -165,11 +173,7 @@ function addDependenciesToPackageJson(options: ApplicationOptions) {
   };
 }
 
-function addAppToWorkspaceFile(
-  options: ApplicationOptions,
-  appDir: string,
-  folderName: string,
-): Rule {
+function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rule {
   let projectRoot = appDir;
   if (projectRoot) {
     projectRoot += '/';

packages/schematics/angular/application/index_spec.ts

@@ -282,6 +282,20 @@ describe('Application Schematic', () => {
       expect(pkg.dependencies['zone.js']).toEqual(latestVersions['zone.js']);
     });
 
+    it('should add "less" to devDependencies when Less is selected as the style option', async () => {
+      const tree = await schematicRunner.runSchematic(
+        'application',
+        {
+          ...defaultOptions,
+          style: Style.Less,
+        },
+        workspaceTree,
+      );
+
+      const pkg = JSON.parse(tree.readContent('/package.json'));
+      expect(pkg.devDependencies['less']).toEqual(latestVersions['less']);
+    });
+
     it('should include zone.js if "zoneless" option is not present', async () => {
       const tree = await schematicRunner.runSchematic(
         'application',