Add variables dark to sass processing (fix T1226973)

packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts

@@ -3,7 +3,7 @@ export default {
   'base-accent': '$primary',
   'base-bg': '$body-bg',
   'base-text-color': '$body-color',
-  'base-border-color': '$table-border-color',
+  'base-border-color': '$border-color',
 
   'base-border-radius': '$border-radius',
   'base-border-radius-large': '$border-radius-lg',

packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts

@@ -1,6 +1,6 @@
 import * as sass from 'sass-embedded';
 import less from 'less';
-import { promises as fs } from 'fs';
+import { promises as fs, existsSync } from 'fs';
 import bootstrap3meta from '../data/bootstrap-metadata/bootstrap3-metadata';
 import bootstrap4meta from '../data/bootstrap-metadata/bootstrap4-metadata';
 import bootstrap5meta from '../data/bootstrap-metadata/bootstrap5-metadata';
@@ -86,16 +86,20 @@ export default class BootstrapExtractor {
   }
 
   async readSassFile(fileName: string): Promise<string> {
-    const path = require.resolve(`bootstrap${this.version}/scss/${fileName}`);
+    const path = this.getFilePath(fileName);
     return fs.readFile(path, 'utf8');
   }
 
   async sassProcessor(): Promise<string> {
     const functions = await this.readSassFile('_functions.scss');
     const variables = await this.readSassFile('_variables.scss');
+
+    const variablesDarkFile = '_variables-dark.scss';
+    const variablesDark = this.version === 5 && existsSync(this.getFilePath(variablesDarkFile)) ? await this.readSassFile(variablesDarkFile) : ''; // TODO: can be removed safely in bootstrap@6
 
     const result = `${functions}
-${variables}
+${variables.replace('@import "variables-dark";', '')}
+${variablesDark}
 ${this.input}
 ${this.getSetterServiceCode('!default')}
 ${this.getCollectorServiceCode()}`;
@@ -111,6 +115,10 @@ ${this.getCollectorServiceCode()}`;
     );
   }
 
+  getFilePath(fileName: string): string {
+    return require.resolve(`bootstrap${this.version}/scss/${fileName}`);
+  }
+
   getSetterServiceCode(postfix = ''): string {
     return Object.keys(this.meta)
       .map((key) => `${this.meta[key]}: dx-empty ${postfix};\n`)

packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts

@@ -55,6 +55,7 @@ describe('BootstrapExtractor', () => {
     expect(await extractor.sassProcessor())
       .toBe(`${functions.toString()}
 ${variables.toString()}
+
 ${testSassString}
 ${setterServiceCode}
 ${collectorServiceCode}`);
@@ -67,14 +68,17 @@ ${collectorServiceCode}`);
     const extractor = new BootstrapExtractor(testSassString, 5);
     const functionsPath = require.resolve('bootstrap5/scss/_functions.scss');
     const variablesPath = require.resolve('bootstrap5/scss/_variables.scss');
+    const variablesDarkPath = require.resolve('bootstrap5/scss/_variables-dark.scss');
     const functions = readFileSync(functionsPath);
     const variables = readFileSync(variablesPath);
+    const variablesDark = readFileSync(variablesDarkPath);
     extractor.getSetterServiceCode = (): string => setterServiceCode;
     extractor.getCollectorServiceCode = (): string => collectorServiceCode;
 
     expect(await extractor.sassProcessor())
       .toBe(`${functions.toString()}
 ${variables.toString()}
+${variablesDark.toString()}
 ${testSassString}
 ${setterServiceCode}
 ${collectorServiceCode}`);