ThemeBuilder: Rework use customer variables (#25383)

DevExpress · Sep 8, 2023 · ad0126e · ad0126e
1 parent f3b0c51
commit ad0126e
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 200 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/devextreme-themebuilder/package.json b/packages/devextreme-themebuilder/package.json
@@ -19,7 +19,7 @@
     "clean-css": "^5.3.0",
     "less": "^3.13.1",
     "postcss": "^8.2.6",
-    "sass-embedded": "1.62.0"
+    "sass-embedded": "1.66.0"
   },
   "scripts": {
     "test": "jest --coverage --verbose --runInBand",

diff --git a/packages/devextreme-themebuilder/src/metadata/generator.ts b/packages/devextreme-themebuilder/src/metadata/generator.ts
@@ -55,6 +55,11 @@ export default class MetadataGenerator {
     return metaItems;
   }
 
+  static getOverriddenVariables(metaItems: MetaItem[]): string {
+    const result = metaItems.map((item) => `${item.Key}: getCustomVar(("${item.Key}")) !default;`).join('\n');
+    return result;
+  }
+
   static getMapFromMeta(metaItems: MetaItem[]): string {
     const result = metaItems.map((item) => `"${item.Key}": ${item.Key},\n`).join('');
     return `(\n${result})`;
@@ -64,22 +69,10 @@ export default class MetadataGenerator {
     return fileName.includes('bundles');
   }
 
-  static getMainColorsFileTheme(fileName: string): string {
-    const match = /widgets[/\\](material|generic)[/\\]_colors.scss/.exec(fileName);
-
-    if (match === null) return null;
-
-    return match[1];
-  }
-
   static getBundleContent(content: string): string {
     return content.replace(/(..\/widgets\/(material|generic))"/, '$1/tb_index"');
   }
 
-  static getMainColorsFileContent(content: string, theme: string): string {
-    return content.replace(/\.\/variables/g, `tb_${theme}`);
-  }
-
   clean(): void {
     this.metadata = {
       generic: [],
@@ -105,14 +98,8 @@ export default class MetadataGenerator {
     }
 
     let modifiedContent = content;
-    const mainFileTheme = MetadataGenerator.getMainColorsFileTheme(filePath);
-
-    if (mainFileTheme) {
-      modifiedContent = MetadataGenerator.getMainColorsFileContent(content, mainFileTheme);
-    }
 
     const metaItems = MetadataGenerator.getMetaItems(content);
-
     if (!metaItems.length) {
       return modifiedContent;
     }
@@ -121,8 +108,9 @@ export default class MetadataGenerator {
       this.fillMetaData(item, filePath);
     });
 
+    const overriddenVariables = MetadataGenerator.getOverriddenVariables(metaItems);
     const collector = `$never-used: collector(${MetadataGenerator.getMapFromMeta(metaItems)});\n`;
-    modifiedContent += collector;
+    modifiedContent = overriddenVariables + '\n\n' + modifiedContent + collector;
 
     return modifiedContent;
   }