From 3d297c1f7f7390583891e55688b04323a028cba8 Mon Sep 17 00:00:00 2001 From: dxvladslavvolkov Date: Fri, 10 May 2024 17:03:59 +0400 Subject: [PATCH 1/2] Fix T1226973 --- .../src/data/bootstrap-metadata/bootstrap5-metadata.ts | 2 +- .../src/modules/bootstrap-extractor.ts | 4 +++- .../tests/modules/bootstrap-extractor.test.ts | 4 ++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts b/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts index 624d77743632..930cdded1255 100644 --- a/packages/devextreme-themebuilder/src/data/bootstrap-metadata/bootstrap5-metadata.ts +++ b/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', diff --git a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts index 7ac98db4bd68..ad1526c7d211 100644 --- a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts +++ b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts @@ -93,9 +93,11 @@ export default class BootstrapExtractor { async sassProcessor(): Promise { const functions = await this.readSassFile('_functions.scss'); const variables = await this.readSassFile('_variables.scss'); + const variablesDark = this.version === 5 ? await this.readSassFile('_variables-dark.scss') : ''; // 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()}`; diff --git a/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts b/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts index 3272213bb710..3819d6601a6a 100644 --- a/packages/devextreme-themebuilder/tests/modules/bootstrap-extractor.test.ts +++ b/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}`); From 7cef43514e1edcfa1fbe9f220e5e2c09d0c7ac09 Mon Sep 17 00:00:00 2001 From: dxvladslavvolkov Date: Fri, 10 May 2024 17:47:50 +0400 Subject: [PATCH 2/2] Fix for bootstrap >5.0.* and <5.3.* --- .../src/modules/bootstrap-extractor.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts b/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts index ad1526c7d211..de11b8b180a2 100644 --- a/packages/devextreme-themebuilder/src/modules/bootstrap-extractor.ts +++ b/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,14 +86,16 @@ export default class BootstrapExtractor { } async readSassFile(fileName: string): Promise { - const path = require.resolve(`bootstrap${this.version}/scss/${fileName}`); + const path = this.getFilePath(fileName); return fs.readFile(path, 'utf8'); } async sassProcessor(): Promise { const functions = await this.readSassFile('_functions.scss'); const variables = await this.readSassFile('_variables.scss'); - const variablesDark = this.version === 5 ? await this.readSassFile('_variables-dark.scss') : ''; // TODO: can be removed safely in bootstrap@6 + + 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.replace('@import "variables-dark";', '')} @@ -113,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`)