fix: improve performance of styling extractor

package.json

@@ -260,6 +260,7 @@
     "sass": "~1.81.0",
     "sass-loader": "^14.0.0",
     "semver": "^7.5.2",
+    "source-map-js": "^1.2.1",
     "stylelint": "^16.0.2",
     "stylelint-scss": "^6.0.0",
     "ts-jest": "~29.2.0",

packages/@o3r/design/schematics/extract-token/index.ts

@@ -54,12 +54,12 @@ function extractTokenFn(options: ExtractTokenSchematicsSchema): Rule {
       ));
       const sassParser = new CssVariableExtractor();
 
-      tree.visit((file) => {
+      tree.visit(async (file) => {
         if (!filterFunctions.some((filterFunction) => filterFunction(file))) {
           return;
         }
         const content = tree.readText(file);
-        const variables = sassParser.extractFileContent(resolve(tree.root.path, file), content);
+        const variables = await sassParser.extractFileContent(resolve(tree.root.path, file), content);
 
         if (variables.length > 0 && options.includeTags) {
           const newContent = updateFileContent(content);

packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.spec.ts

@@ -3,7 +3,7 @@ import {
 } from 'node:path';
 import {
   Logger,
-} from 'sass';
+} from 'sass-embedded';
 import {
   CssVariableExtractor,
 } from './css-variable.extractor';
@@ -15,20 +15,20 @@ const logger = Logger.silent;
 
 describe('CSS Variable extractor', () => {
   describe('Sass file content parsing', () => {
-    test('should correctly extract variable details', () => {
+    test('should correctly extract variable details', async () => {
       const mock = `@use '${testedFile}' as o3r;
         :root {
           @include o3r.var('my-var', #fff, (category: 'test category'));
         }
       `;
 
       const parser = new CssVariableExtractor({ logger });
-      const variables = parser.extractFileContent(file, mock, { url });
+      const variables = await parser.extractFileContent(file, mock, { url });
       expect(variables).toHaveLength(1);
       expect(variables[0]).toEqual(expect.objectContaining({ name: 'my-var', defaultValue: 'rgba(255, 255, 255, 1)', category: 'test category' }));
     });
 
-    test('should override variable details', () => {
+    test('should override variable details', async () => {
       const mock = `@use '${testedFile}' as o3r;
         :root {
           @include o3r.var('my-var', #fff, (category: 'test category'));
@@ -37,7 +37,7 @@ describe('CSS Variable extractor', () => {
       `;
 
       const parser = new CssVariableExtractor({ logger });
-      const variables = parser.extractFileContent(file, mock, { url });
+      const variables = await parser.extractFileContent(file, mock, { url });
       expect(variables).toHaveLength(1);
       expect(variables[0]).toEqual(expect.objectContaining({ name: 'my-var', defaultValue: 'rgba(255, 255, 255, 1)', category: 'new category' }));
     });

packages/@o3r/styling/builders/style-extractor/helpers/css-variable.extractor.ts

@@ -10,16 +10,22 @@ import {
   O3rCliError,
 } from '@o3r/schematics';
 import {
-  compileString,
-  SassBoolean,
+  AsyncCompiler,
+  CalculationInterpolation,
+  CalculationOperation,
+  CalculationValue,
+  initAsyncCompiler,
+  SassCalculation,
   SassColor,
+  sassFalse,
   SassList,
   SassMap,
   SassNumber,
   SassString,
+  sassTrue,
   StringOptions,
   Value,
-} from 'sass';
+} from 'sass-embedded';
 import type {
   StyleExtractorBuilderSchema,
 } from '../schema';
@@ -30,20 +36,36 @@ import type {
 } from '@o3r/styling';
 
 /**
- * SassCalculation interface
+ * This method will iterate on all characters in str starting from startingPosition and return the substring that is balanced.
+ * @param str
+ * @param startingPosition
  */
-interface SassCalculation extends Value {
-  name: 'calc';
-  $arguments: string[];
-}
+const getBalancedString = (str: string, startingPosition = 0) => {
+  let nbToClose = 0;
+  for (let i = startingPosition; i < str.length; i++) {
+    const char = str[i];
+    if (char === '(') {
+      nbToClose++;
+    } else if (char === ')') {
+      nbToClose--;
+
+      if (nbToClose === 0) {
+        return str.substring(startingPosition, i + 1);
+      }
+    }
+  }
+  return str.substring(startingPosition);
+};
 
 /**
  * CSS Variable extractor
  */
 export class CssVariableExtractor {
+  private static readonly asyncCompiler: Promise<AsyncCompiler> = initAsyncCompiler();
+  private static readonly varRegex = /var\(\s*--(.*?)\s*,\s*(.*)\)/;
   private readonly cache: Record<string, URL> = {};
 
-  constructor(public defaultSassOptions?: StringOptions<'sync'>, private readonly builderOptions?: Pick<StyleExtractorBuilderSchema, 'ignoreInvalidValue'>) {}
+  constructor(public defaultSassOptions?: StringOptions<'async'>, private readonly builderOptions?: Pick<StyleExtractorBuilderSchema, 'ignoreInvalidValue'>) {}
 
   /**
    * Parse the CSS variable as reported
@@ -52,31 +74,29 @@ export class CssVariableExtractor {
    */
   private parseCssVariable(name: string, value = ''): CssVariable {
     const defaultValue = value.trim();
-    const res = defaultValue.match(/^var\(\s*([^\s),]+)\s*(?:,\s*([^(),]+(?:\([^)]*\))?))*\s*\)$/);
-
-    const ret: CssVariable = { name, defaultValue };
-    if (res) {
-      ret.references = [
-        this.parseCssVariable(res[1].replace(/^--/, ''), res[2])
-      ];
-    } else {
-      let findRef = defaultValue;
-      let ref: RegExpExecArray | null;
-      const references: Record<string, CssVariable> = {};
-      do {
-        ref = /var\(\s*([^\s),]+)\s*(?:,\s*([^(),]+(\([^)]*\))?))*\s*\)/.exec(findRef);
-
-        if (ref) {
-          const refName = ref[1].replace(/^--/, '');
-          references[refName] = this.parseCssVariable(refName, ref[2]);
-          findRef = findRef.replace(ref[0], '');
+    const resultingCssVariable: CssVariable = { name, defaultValue };
+    let remainingValue = defaultValue;
+    let referenceMatch: RegExpExecArray | null;
+    const references: Record<string, CssVariable> = {};
+    do {
+      const varIndex = remainingValue.indexOf('var(');
+      if (varIndex === -1) {
+        // No more var() references
+        break;
+      } else {
+        const balancedVarDeclaration = getBalancedString(remainingValue, varIndex);
+        referenceMatch = CssVariableExtractor.varRegex.exec(balancedVarDeclaration);
+        if (referenceMatch) {
+          const refName = referenceMatch[1];
+          references[refName] = this.parseCssVariable(refName, referenceMatch[2]);
+          remainingValue = remainingValue.replace(balancedVarDeclaration, '');
         }
-      } while (ref);
-      if (Object.keys(references).length > 0) {
-        ret.references = Object.values(references);
       }
+    } while (referenceMatch);
+    if (Object.keys(references).length > 0) {
+      resultingCssVariable.references = Object.values(references);
     }
-    return ret;
+    return resultingCssVariable;
   }
 
   /**
@@ -92,7 +112,9 @@ export class CssVariableExtractor {
    * @param color Sass Color
    */
   private static getColorString(color: SassColor) {
-    return color.alpha ? `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha})` : `rgb(${color.red}, ${color.green}, ${color.blue}})`;
+    return color.alpha
+      ? `rgba(${color.channel('red')}, ${color.channel('green')}, ${color.channel('blue')}, ${color.alpha})`
+      : `rgb(${color.channel('red')}, ${color.channel('green')}, ${color.channel('blue')}})`;
   }
 
   /**
@@ -127,16 +149,35 @@ export class CssVariableExtractor {
     return contextTags;
   }
 
+  private static getCalcString(item: CalculationValue, isSubCalc: boolean): string {
+    if (item) {
+      if (item instanceof SassNumber) {
+        const value = item.value;
+        const unit = item.numeratorUnits.get(0) ?? '';
+        return value + unit;
+      } else if (item instanceof SassString) {
+        return item.text;
+      } else if (item instanceof CalculationOperation) {
+        return `${isSubCalc ? '(' : ''}${CssVariableExtractor.getCalcString(item.left, true)} ${item.operator} ${CssVariableExtractor.getCalcString(item.right, true)}${isSubCalc ? ')' : ''}`;
+      } else if (item instanceof CalculationInterpolation) {
+        return item.value;
+      } else {
+        return `calc(${item.arguments.toArray().map((arg) => CssVariableExtractor.getCalcString(arg, false)).join(' ')})`;
+      }
+    }
+    return '';
+  }
+
   /**
    * Extract metadata from Sass Content
    * @param sassFilePath SCSS file URL
    * @param sassFileContent SCSS file content
    * @param additionalSassOptions
    */
-  public extractFileContent(sassFilePath: string, sassFileContent: string, additionalSassOptions?: StringOptions<'sync'>) {
+  public async extractFileContent(sassFilePath: string, sassFileContent: string, additionalSassOptions?: StringOptions<'async'>) {
     const cssVariables: CssVariable[] = [];
 
-    const options: StringOptions<'sync'> = {
+    const options: StringOptions<'async'> = {
       ...this.defaultSassOptions,
       ...additionalSassOptions,
       loadPaths: [path.dirname(sassFilePath)],
@@ -226,9 +267,8 @@ export class CssVariableExtractor {
           if (!(varName instanceof SassString)) {
             throw new O3rCliError('Invalid variable name');
           }
-
           let parsedValue: string | undefined;
-          if (varValue instanceof SassString || varValue instanceof SassNumber || varValue instanceof SassBoolean) {
+          if (varValue instanceof SassString || varValue instanceof SassNumber || varValue === sassTrue || varValue === sassFalse) {
             parsedValue = varValue.toString();
           } else if (varValue instanceof SassColor) {
             parsedValue = CssVariableExtractor.getColorString(varValue);
@@ -237,12 +277,12 @@ export class CssVariableExtractor {
             const parsedValueItems: string[] = [];
             for (let i = 0; i < varValue.asList.size; i++) {
               const item = varValue.get(i);
-              if (item instanceof SassString || item instanceof SassNumber || item instanceof SassBoolean) {
+              if (item instanceof SassString || item instanceof SassNumber || item === sassTrue || item === sassFalse) {
                 parsedValueItems.push(item.toString());
               } else if (item instanceof SassColor) {
                 parsedValueItems.push(CssVariableExtractor.getColorString(item));
               } else if (CssVariableExtractor.isSassCalculation(item)) {
-                parsedValueItems.push(`calc(${item.$arguments[0]})`);
+                parsedValueItems.push(`calc(${item.arguments.toArray().map((arg) => CssVariableExtractor.getCalcString(arg, false)).join(' ')})`);
               } else {
                 invalidIndexes.push(i);
               }
@@ -258,7 +298,7 @@ export class CssVariableExtractor {
               }
             }
           } else if (CssVariableExtractor.isSassCalculation(varValue)) {
-            parsedValue = `calc(${varValue.$arguments[0]})`;
+            parsedValue = `calc(${varValue.arguments.toArray().map((arg) => CssVariableExtractor.getCalcString(arg, false)).join(' ')})`;
           } else if (varValue.realNull) {
             const message = `Invalid value for variable ${varName.text}.`;
             if (this.builderOptions?.ignoreInvalidValue ?? true) {
@@ -305,17 +345,24 @@ export class CssVariableExtractor {
       }
     };
 
-    compileString(sassFileContent, options);
+    await (await CssVariableExtractor.asyncCompiler).compileStringAsync(sassFileContent, options);
     return cssVariables;
   }
 
+  /**
+   * Dispose the async compiler. Must be called once when extraction is done.
+   */
+  public async disposeAsyncCompiler() {
+    await (await CssVariableExtractor.asyncCompiler).dispose();
+  }
+
   /**
    * Extract metadata from Sass file
    * @param sassFilePath SCSS file to parse
    */
-  public extractFile(sassFilePath: string): CssVariable[] {
+  public async extractFile(sassFilePath: string): Promise<CssVariable[]> {
     const sassFileContent = fs.readFileSync(sassFilePath, { encoding: 'utf8' });
-    return this.extractFileContent(sassFilePath, sassFileContent);
+    return await this.extractFileContent(sassFilePath, sassFileContent);
   }
 
   /**
@@ -327,10 +374,7 @@ export class CssVariableExtractor {
     return libraries
       .map((lib) => getLibraryCmsMetadata(lib))
       .filter(({ styleFilePath }) => !!styleFilePath)
-      .map(({ styleFilePath }) => {
-        const libConfig = JSON.parse(fs.readFileSync(styleFilePath!, 'utf8'));
-        return libConfig as CssMetadata;
-      })
+      .map(({ styleFilePath }) => JSON.parse(fs.readFileSync(styleFilePath!, 'utf8')) as CssMetadata)
       .reduce<CssMetadata>((acc, libMetadata) => {
         return Object.keys(libMetadata.variables)
           .filter((key) => !!acc.variables[key])

packages/@o3r/styling/builders/style-extractor/index.ts

@@ -22,7 +22,7 @@ import {
 } from 'globby';
 import type {
   Logger,
-} from 'sass';
+} from 'sass-embedded';
 import * as ts from 'typescript';
 import {
   CssVariableExtractor,
@@ -76,10 +76,10 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
     /** CSS Metadata file to write */
     let cssMetadata = (
       // extract metadata for each file
-      await Promise.all(files.map((file, idx) => {
+      await Promise.all(files.map(async (file, idx) => {
         try {
           context.reportProgress(idx, STEP_NUMBER, `Extracting ${file}`);
-          const variables = cssVariableExtractor.extractFile(file);
+          const variables = await cssVariableExtractor.extractFile(file);
           const themeFileSuffix = '.style.theme.scss';
           if (file.endsWith(themeFileSuffix)) {
             const componentPath = path.join(path.dirname(file), `${path.basename(file, themeFileSuffix)}.component.ts`);
@@ -92,7 +92,10 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
             const componentDeclaration = componentSourceFile.statements.find((s): s is ts.ClassDeclaration => ts.isClassDeclaration(s) && isO3rClassComponent(s));
             const componentName: string | undefined = componentDeclaration?.name?.escapedText.toString();
             if (componentName) {
-              return variables.map((variable) => ({ ...variable, component: { library: libraryName, name: componentName } }));
+              for (const variable of variables) {
+                variable.component = { library: libraryName, name: componentName };
+              }
+              return variables;
             }
           }
           return variables;
@@ -102,19 +105,13 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
         }
       }))
     ).reduce<CssMetadata>((acc, cssVarList) => {
-      // Check duplicate CSS variable
-      cssVarList
-        .filter((cssVar) => !!acc.variables[cssVar.name])
-        .filter((cssVar) => !initialPreviousMetadata.variables[cssVar.name] && acc.variables[cssVar.name].defaultValue !== cssVar.defaultValue)
-        .forEach((cssVar) =>
-          context.logger[options.ignoreDuplicateWarning ? 'debug' : 'warn'](`Duplicate "${cssVar.name}" (${acc.variables[cssVar.name].defaultValue} will be replaced by ${cssVar.defaultValue})`)
-        );
+      for (const cssVar of cssVarList) {
+        if (!!acc.variables[cssVar.name] && !initialPreviousMetadata.variables[cssVar.name] && acc.variables[cssVar.name].defaultValue !== cssVar.defaultValue) {
+          context.logger[options.ignoreDuplicateWarning ? 'debug' : 'warn'](`Duplicate "${cssVar.name}" (${acc.variables[cssVar.name].defaultValue} will be replaced by ${cssVar.defaultValue})`);
+        }
+        acc.variables[cssVar.name] = cssVar;
+      }
 
-      // merge all variables form all the files
-      cssVarList
-        .forEach((item) => {
-          acc.variables[item.name] = item;
-        });
       return acc;
     }, initialPreviousMetadata);
 
@@ -235,6 +232,7 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
       });
 
     context.addTeardown(async () => {
+      await cssVariableExtractor.disposeAsyncCompiler();
       await watcher.close();
       await metadataWatcher.close();
     });
@@ -245,6 +243,8 @@ export default createBuilder(createBuilderWithMetricsIfInstalled<StyleExtractorB
         .on('error', (err) => reject(err))
     );
   } else {
-    return execute(getAllFiles());
+    const result = execute(getAllFiles());
+    void cssVariableExtractor.disposeAsyncCompiler();
+    return result;
   }
 }));