[sass] Update logging, serialize writes

Author: dmichon-msft

heft-plugins/heft-sass-plugin/src/SassPlugin.ts

@@ -57,9 +57,7 @@ export default class SassPlugin implements IHeftPlugin {
   public apply(taskSession: IHeftTaskSession, heftConfiguration: HeftConfiguration): void {
     const { numberOfCores, slashNormalizedBuildFolderPath } = heftConfiguration;
     const { logger, tempFolderPath } = taskSession;
-
     const { terminal } = logger;
-
     const { accessor } = this;
 
     let sassProcessorPromise: Promise<SassProcessor> | undefined;
@@ -115,18 +113,31 @@ export default class SassPlugin implements IHeftPlugin {
         };
 
         const sassProcessor: SassProcessor = new SassProcessor(sassProcessorOptions);
-
         await sassProcessor.loadCacheAsync(tempFolderPath);
 
         return sassProcessor;
       })());
     }
 
+    const compileFilesAsync = async (
+      sassProcessor: SassProcessor,
+      files: Set<string>,
+      changed: boolean
+    ): Promise<void> => {
+      if (files.size === 0) {
+        terminal.writeLine(`No SCSS files to process.`);
+        return;
+      }
+
+      await sassProcessor.compileFilesAsync(files);
+      terminal.writeLine(`Finished compiling.`);
+    };
+
     taskSession.hooks.run.tapPromise(PLUGIN_NAME, async (runOptions: IHeftTaskRunHookOptions) => {
-      terminal.writeLine(`Initializing SASS compiler...`);
+      terminal.writeLine(`Starting...`);
       const sassProcessor: SassProcessor = await initializeSassProcessorAsync();
 
-      terminal.writeLine(`Scanning for SCSS files...`);
+      terminal.writeVerboseLine(`Scanning for SCSS files...`);
       const files: string[] = await runOptions.globAsync(sassProcessor.inputFileGlob, {
         absolute: true,
         ignore: sassProcessor.ignoredFileGlobs,
@@ -139,17 +150,16 @@ export default class SassPlugin implements IHeftPlugin {
         fileSet.add(path.resolve(file));
       }
 
-      await sassProcessor.compileFilesAsync(fileSet);
-      terminal.writeLine(`Finished compiling.`);
+      await compileFilesAsync(sassProcessor, fileSet, false);
     });
 
     taskSession.hooks.runIncremental.tapPromise(
       PLUGIN_NAME,
       async (runOptions: IHeftTaskRunIncrementalHookOptions) => {
-        terminal.writeLine(`Initializing SASS compiler...`);
+        terminal.writeLine(`Starting...`);
         const sassProcessor: SassProcessor = await initializeSassProcessorAsync();
 
-        terminal.writeLine(`Scanning for SCSS files...`);
+        terminal.writeVerboseLine(`Scanning for changed SCSS files...`);
         const changedFiles: Map<string, IWatchedFileState> = await runOptions.watchGlobAsync(
           sassProcessor.inputFileGlob,
           {
@@ -165,10 +175,8 @@ export default class SassPlugin implements IHeftPlugin {
             modifiedFiles.add(file);
           }
         }
-        terminal.writeLine(`Compiling ${modifiedFiles.size} changed SCSS files...`);
 
-        await sassProcessor.compileFilesAsync(modifiedFiles);
-        terminal.writeLine(`Finished compiling.`);
+        await compileFilesAsync(sassProcessor, modifiedFiles, true);
       }
     );
   }

heft-plugins/heft-sass-plugin/src/SassProcessor.ts

@@ -171,43 +171,26 @@ interface IFileContentAndVersion {
  * @public
  */
 export class SassProcessor {
+  public readonly ignoredFileGlobs: string[] | undefined;
   public readonly inputFileGlob: string;
   public readonly sourceFolderPath: string;
-  public readonly ignoredFileGlobs: string[] | undefined;
 
   // Map of input file path -> record
   private readonly _fileInfo: Map<string, IFileRecord>;
   private readonly _resolutions: Map<string, SyncOrAsyncResolution>;
 
   private readonly _isFileModule: (filePath: string) => boolean;
   private readonly _options: ISassProcessorOptions;
-  private readonly _scssOptions: Options<'async'>;
   private readonly _realpathSync: (path: string) => string;
+  private readonly _scssOptions: Options<'async'>;
 
   private _configFilePath: string | undefined;
 
   public constructor(options: ISassProcessorOptions) {
     const { silenceDeprecations, excludeFiles } = options;
 
-    this._configFilePath = undefined;
-
-    this._fileInfo = new Map();
-    this._resolutions = new Map();
-
-    this._options = options;
-
-    this._realpathSync = new RealNodeModulePathResolver().realNodeModulePath;
-
     const { isFileModule, allFileExtensions } = buildExtensionClassifier(options);
 
-    this.inputFileGlob = `**/*+(${allFileExtensions.join('|')})`;
-    this.sourceFolderPath = options.srcFolder;
-    this.ignoredFileGlobs = excludeFiles?.map((excludedFile) =>
-      excludedFile.startsWith('./') ? excludedFile.slice(2) : excludedFile
-    );
-
-    this._isFileModule = isFileModule;
-
     const deprecationsToSilence: DeprecationOrId[] | undefined = silenceDeprecations
       ? Array.from(silenceDeprecations, (deprecation) => {
           if (!Object.prototype.hasOwnProperty.call(deprecations, deprecation)) {
@@ -239,6 +222,18 @@ export class SassProcessor {
       };
     };
 
+    this.ignoredFileGlobs = excludeFiles?.map((excludedFile) =>
+      excludedFile.startsWith('./') ? excludedFile.slice(2) : excludedFile
+    );
+    this.inputFileGlob = `**/*+(${allFileExtensions.join('|')})`;
+    this.sourceFolderPath = options.srcFolder;
+
+    this._configFilePath = undefined;
+    this._fileInfo = new Map();
+    this._isFileModule = isFileModule;
+    this._resolutions = new Map();
+    this._options = options;
+    this._realpathSync = new RealNodeModulePathResolver().realNodeModulePath;
     this._scssOptions = {
       style: 'expanded', // leave minification to clean-css
       importers: [
@@ -776,13 +771,13 @@ export class SassProcessor {
       ensureFolderExists: true
     };
 
-    const promises: Promise<void>[] = dtsOutputFolders.map((dtsOutputFolder: string) => {
-      return FileSystem.writeFileAsync(
+    for (const dtsOutputFolder of dtsOutputFolders) {
+      await FileSystem.writeFileAsync(
         path.resolve(dtsOutputFolder, `${relativeFilePath}.d.ts`),
         dtsContent,
         writeFileOptions
       );
-    });
+    }
 
     const filename: string = path.basename(relativeFilePath);
     const extensionStart: number = filename.lastIndexOf('.');
@@ -798,17 +793,15 @@ export class SassProcessor {
         const { folder, shimModuleFormat } = cssOutputFolder;
 
         const cssFilePath: string = path.resolve(folder, relativeCssPath);
-        promises.push(FileSystem.writeFileAsync(cssFilePath, css, writeFileOptions));
+        await FileSystem.writeFileAsync(cssFilePath, css, writeFileOptions);
 
         if (shimModuleFormat && !filename.endsWith('.css')) {
           const jsFilePath: string = path.resolve(folder, `${relativeFilePath}.js`);
           const jsShimContent: string = generateJsShimContent(shimModuleFormat, cssPathFromJs);
-          promises.push(FileSystem.writeFileAsync(jsFilePath, jsShimContent, writeFileOptions));
+          await FileSystem.writeFileAsync(jsFilePath, jsShimContent, writeFileOptions);
         }
       }
     }
-
-    await Promise.all(promises);
   }
 
   private _createDTS(moduleMap: JsonObject | undefined): string {