From ad0126e155332314d5959de14bf9ce20d8efde98 Mon Sep 17 00:00:00 2001 From: Oleg Kipchatov <35765711+OlegKipchatov@users.noreply.github.com> Date: Fri, 8 Sep 2023 18:01:54 +0400 Subject: [PATCH] ThemeBuilder: Rework use customer variables (#25383) --- package-lock.json | 104 +++++++++++------- packages/devextreme-themebuilder/package.json | 2 +- .../src/metadata/generator.ts | 26 ++--- .../src/modules/compiler.ts | 63 ++++------- .../src/modules/parse-value.ts | 29 +++++ .../data/scss/widgets/generic/_colors.scss | 4 +- .../widgets/generic/accordion/_colors.scss | 3 + .../tests/metadata/generator.test.ts | 46 +------- .../tests/modules/compiler-sass.test.ts | 50 --------- .../tests/modules/compiler.test.ts | 11 +- 10 files changed, 138 insertions(+), 200 deletions(-) diff --git a/package-lock.json b/package-lock.json index 197b2b0a2063..ef715b54f572 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38627,9 +38627,9 @@ } }, "node_modules/sass-embedded-darwin-arm64": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.62.0.tgz", - "integrity": "sha512-bYEM6DY7kteOd/aJXUisiavm8B1acRhpIn+rhzKZeTn87kUW5RzZv2nKaSmb1vUd4ZptDGaJ144qz/d20rnogQ==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.66.0.tgz", + "integrity": "sha512-Vuo4+yPbYcrm6CRuugOzw1gQjKqIQ66rEQqwM5w4Mu0hfe+tSRJUndfycGfmoSDJwnHgDdL+8shmP5OoYNQHJw==", "cpu": [ "arm64" ], @@ -38637,14 +38637,17 @@ "os": [ "darwin" ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-darwin-x64": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.62.0.tgz", - "integrity": "sha512-2sBQ4uWjZbf8TKXF8Aq7N0p5V2tKUr4zX9gQAiKvm1NBYwsW22+m8D34heOWu50ikpIxebvt7i/z7hafH5kzKg==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.66.0.tgz", + "integrity": "sha512-aBuhUlrI5TkmGY9q8jae3LOUqIdi1OvtCR9/cdywsAhcXtwYQnM/CodFx/ULp4dcNZGybaJ/Im76SjSNNwIORw==", "cpu": [ "x64" ], @@ -38652,14 +38655,17 @@ "os": [ "darwin" ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-linux-arm": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.62.0.tgz", - "integrity": "sha512-0lz9Ids/OzKiOK+fd5wo/fHBGJ5lCHbcRsjDnU0CIMWkUmMt7yhcFABWB/TUofS5XvrohYbGqs+yKP3X0oGX3g==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.66.0.tgz", + "integrity": "sha512-kzI1w1KfcDeu5860wXv5FWAeB+ZqpzcfQUOy/x/LydY0hUN1sh55H2yOQcTaXllu9DjjA9XKD0bTlFVB68qxmg==", "cpu": [ "arm" ], @@ -38667,14 +38673,17 @@ "os": [ "linux" ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-linux-arm64": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.62.0.tgz", - "integrity": "sha512-FexUt8aE7I7fJub3N6+NsDdbPRP/O8o400qpbEbY7BWgiWEdpr81OBulQZY/2LzZUnz9keUhfpmltNY3SNg3kg==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.66.0.tgz", + "integrity": "sha512-fLxVYSIV84VvdIyzYOk1od1VSH1uUkX6aRcvZ0SiyZfQE2fQ9I98D6TIWMTcJOUQPmNhtmxUcWDHpAFiAhCMPA==", "cpu": [ "arm64" ], @@ -38682,14 +38691,17 @@ "os": [ "linux" ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-linux-ia32": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.62.0.tgz", - "integrity": "sha512-VpDHtMIwcoWqDsiskjhDYAle0SJV4mUiZJTXg5RkMzoX1ZyNiVz+uNaZ88kDqcGXsWpe2i0sIlljD4ryaiMAhA==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.66.0.tgz", + "integrity": "sha512-luMe3tUfhnbQhDGB4n1ZBQb235kt2uxFEWQYtx/OOZZOulUN5amgXPv4aAVLWm/37Wwb4jMNW1Mhf5Jm6DY9kQ==", "cpu": [ "ia32" ], @@ -38697,14 +38709,17 @@ "os": [ "linux" ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-linux-x64": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.62.0.tgz", - "integrity": "sha512-dntYMsu0QonlerFB8VDlzxoJcpMEtN9lPHstKOQ6rk6hbSFPvcI8MqqUomlOjmpakKeVrpyZ04nm9jHrzlFmYg==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.66.0.tgz", + "integrity": "sha512-tUL2Ro+b26JYAchEJfYtwmEcSJiGamWzg7C35BCS9g1T80oWIw8mJXGddaDZmSbK6wyu1CIsU/p+AUC8QCf7SQ==", "cpu": [ "x64" ], @@ -38712,14 +38727,17 @@ "os": [ "linux" ], + "bin": { + "sass": "dart-sass/sass" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-win32-ia32": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.62.0.tgz", - "integrity": "sha512-rTCZCVkQa6XcreyQ8gYqnsEG13HCzqKoN2mCvIuGwJro8IjyT2PzWauouO0M06T0FLH0pc3EvKdKaLdtijf9AQ==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.66.0.tgz", + "integrity": "sha512-t2/rgXTZa/zyRdkvrT3R4u8IpGHdzoel8tNGxqmZBt2xccjkNl+xwIHbBXohAMAFEy9S923FLDedrE3mNjWxZw==", "cpu": [ "ia32" ], @@ -38727,14 +38745,17 @@ "os": [ "win32" ], + "bin": { + "sass": "dart-sass/sass.bat" + }, "engines": { "node": ">=14.0.0" } }, "node_modules/sass-embedded-win32-x64": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.62.0.tgz", - "integrity": "sha512-g6DZBPGfIDKLBarvYRVKJ+7rJAHJXkOQQVrYSWm22klA9ZNZ0CaVyqLqejttZPKGreD8h/xh2uz/s6w/P900Sw==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.66.0.tgz", + "integrity": "sha512-0NHGU8jWplhJy/v/pvznZrDSF6PEAZYOuo0wI3zn3oM/ORi4a34aB5g2m78MSRXfF42T7RUfIiAdwXPsLHg0+w==", "cpu": [ "x64" ], @@ -38742,6 +38763,9 @@ "os": [ "win32" ], + "bin": { + "sass": "dart-sass/sass.bat" + }, "engines": { "node": ">=14.0.0" } @@ -45017,6 +45041,11 @@ "node": ">= 0.10" } }, + "node_modules/varint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", + "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -49199,7 +49228,7 @@ "clean-css": "^5.3.0", "less": "^3.13.1", "postcss": "^8.2.6", - "sass-embedded": "1.62.0" + "sass-embedded": "1.66.0" }, "devDependencies": { "@types/clean-css": "4.2.6", @@ -49357,28 +49386,29 @@ } }, "packages/devextreme-themebuilder/node_modules/sass-embedded": { - "version": "1.62.0", - "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.62.0.tgz", - "integrity": "sha512-SwTIG6UmrMiT94/v8G+2pPf6i+XwY4hOQxm8HZl0ld0st2KdGDj/SBXDznFl7+sJ6tFq6hvVvrB9rW5Nj7EhuQ==", + "version": "1.66.0", + "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.66.0.tgz", + "integrity": "sha512-7PqQW3bNIGadntvPsBy3gwjAVdPf9iG+WmdoN3VcWXLbYtHn/Tl5YqRRhqfTxW2ue9xw1QIlEsxYAQ71zKgfHQ==", "dependencies": { "@bufbuild/protobuf": "^1.0.0", "buffer-builder": "^0.2.0", "immutable": "^4.0.0", "rxjs": "^7.4.0", - "supports-color": "^8.1.1" + "supports-color": "^8.1.1", + "varint": "^6.0.0" }, "engines": { "node": ">=14.0.0" }, "optionalDependencies": { - "sass-embedded-darwin-arm64": "1.62.0", - "sass-embedded-darwin-x64": "1.62.0", - "sass-embedded-linux-arm": "1.62.0", - "sass-embedded-linux-arm64": "1.62.0", - "sass-embedded-linux-ia32": "1.62.0", - "sass-embedded-linux-x64": "1.62.0", - "sass-embedded-win32-ia32": "1.62.0", - "sass-embedded-win32-x64": "1.62.0" + "sass-embedded-darwin-arm64": "1.66.0", + "sass-embedded-darwin-x64": "1.66.0", + "sass-embedded-linux-arm": "1.66.0", + "sass-embedded-linux-arm64": "1.66.0", + "sass-embedded-linux-ia32": "1.66.0", + "sass-embedded-linux-x64": "1.66.0", + "sass-embedded-win32-ia32": "1.66.0", + "sass-embedded-win32-x64": "1.66.0" } }, "packages/devextreme-themebuilder/node_modules/sass-embedded/node_modules/supports-color": { diff --git a/packages/devextreme-themebuilder/package.json b/packages/devextreme-themebuilder/package.json index 7b3a7fcb38e2..b5ae80ef5176 100644 --- 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 index 57226951dd5c..25abce7e58d4 100644 --- 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; } diff --git a/packages/devextreme-themebuilder/src/modules/compiler.ts b/packages/devextreme-themebuilder/src/modules/compiler.ts index 033db84653e8..3c1ad23a497d 100644 --- a/packages/devextreme-themebuilder/src/modules/compiler.ts +++ b/packages/devextreme-themebuilder/src/modules/compiler.ts @@ -1,15 +1,9 @@ import * as sass from 'sass-embedded'; // eslint-disable-next-line import/extensions import { metadata } from '../data/metadata/dx-theme-builder-metadata'; -import { parse } from './parse-value'; +import { parse, parseString } from './parse-value'; import { optimizeCss } from './post-compiler'; -export enum ImportType { - Index, - Color, - Unknown, -} - export default class Compiler { changedVariables: { [key: string]: string } = {}; @@ -17,16 +11,10 @@ export default class Compiler { meta: ThemesMetadata = metadata; - userItems: ConfigMetaItem[] = []; + userItems: { [key: string]: ConfigMetaItem } = {}; indexFileContent: string; - static getImportType = (url: string): ImportType => { - if (url.endsWith('tb_index')) return ImportType.Index; - if (url.startsWith('tb_')) return ImportType.Color; - return ImportType.Unknown; - }; - compile = async ( file: string, items: ConfigMetaItem[], @@ -46,7 +34,13 @@ export default class Compiler { compile: (source: string, options?: sass.Options<'async'>) => Promise, ): Promise => { this.changedVariables = {}; - this.userItems = items || []; + + if (items) { + this.userItems = items.reduce((acc: { [key: string]: ConfigMetaItem }, item) => { + acc[item.key] = item; + return acc; + }, {}); + } let compilerOptions: sass.Options<'async'> = { importers: [{ @@ -56,6 +50,7 @@ export default class Compiler { }], functions: { 'collector($map)': this.collector, + 'getCustomVar($value)': this.getCustomVar, }, }; @@ -76,36 +71,26 @@ export default class Compiler { }); }; - getMatchingUserItemsAsString(theme: string): string { - const meta = theme === 'generic' ? this.meta.generic : this.meta.material; - const themeKeys: string[] = meta.map((item) => item.Key); - - return this.userItems - .filter((item) => themeKeys.includes(item.key)) - .map((item) => `${item.key}: ${item.value};`) - .join(''); - } - // eslint-disable-next-line spellcheck/spell-checker - canonicalize = (url: string): URL => (url.includes('tb_') ? new URL(`db:${url}`) : null); + canonicalize = (url: string): URL => (url.includes('tb_index') ? new URL(`db:${url}`) : null); + + load = (): sass.ImporterResult => ({ + contents: this.indexFileContent, + syntax: 'scss', + } as sass.ImporterResult); - load = (url: URL): sass.ImporterResult => { - const { pathname: path } = url; - const importType = Compiler.getImportType(path); + getCustomVar = (values: sass.Value[]): sass.Value => { + const customVariable = values[0].get(0); + const nameVariable = customVariable.get(0) as sass.SassString; - let content = this.importerCache[path]; - if (!content) { - content = importType === ImportType.Index - ? this.indexFileContent - : this.getMatchingUserItemsAsString(path.replace('tb_', '')); + let result = sass.sassNull; - this.importerCache[path] = content; + const customerVariable = this.userItems[nameVariable.text]; + if (customerVariable) { + result = parseString(customerVariable.value); } - return { - contents: content, - syntax: 'scss', - } as sass.ImporterResult; + return result; }; collector = (maps: sass.SassMap[]): sass.Value => { diff --git a/packages/devextreme-themebuilder/src/modules/parse-value.ts b/packages/devextreme-themebuilder/src/modules/parse-value.ts index 01e7a931f403..b7c9e3da3da5 100644 --- a/packages/devextreme-themebuilder/src/modules/parse-value.ts +++ b/packages/devextreme-themebuilder/src/modules/parse-value.ts @@ -25,3 +25,32 @@ export const parse = (value: sass.Value): string => { return result; }; + +/** + * Parse a string as a Sass object + * cribbed from davidkpiano/sassport + * + * @param {string} str + * @return {Value} + */ +export const parseString = (str: string): sass.Value => { + // eslint-disable-next-line @typescript-eslint/init-declarations + let result: sass.Value; + + try { + sass.compileString(`$_: ___(${str});`, { + functions: { + '___($value)': (args) => { + // eslint-disable-next-line prefer-destructuring + result = args[0]; + return result; + }, + }, + }); + } catch (e) { + // debugger; + return new sass.SassString(str); + } + + return result; +}; diff --git a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss index 2e85f813b45c..0d4656541ab3 100644 --- a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss +++ b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss @@ -1,6 +1,6 @@ -@forward "tb_generic"; +$base-font-family: getCustomVar(("$base-font-family")) !default; +$base-accent: getCustomVar(("$base-accent")) !default; -@use "tb_generic" as *; @use "sass:color"; $color: null !default; diff --git a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss index d824f4df5f5d..d671f1015680 100644 --- a/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss +++ b/packages/devextreme-themebuilder/tests/data/scss/widgets/generic/accordion/_colors.scss @@ -1,3 +1,6 @@ +$accordion-title-color: getCustomVar(("$accordion-title-color")) !default; +$accordion-item-title-opened-bg: getCustomVar(("$accordion-item-title-opened-bg")) !default; + @use "sass:color"; @use "../sizes" as *; @use "../colors" as *; diff --git a/packages/devextreme-themebuilder/tests/metadata/generator.test.ts b/packages/devextreme-themebuilder/tests/metadata/generator.test.ts index de17d6f23872..ebca7f63023a 100644 --- a/packages/devextreme-themebuilder/tests/metadata/generator.test.ts +++ b/packages/devextreme-themebuilder/tests/metadata/generator.test.ts @@ -182,8 +182,7 @@ describe('Metadata generator - collectMetadata', () => { test('collectMetadata for file with comments modify file content and add data to metadata', () => { const path = '/scss/widgets/generic/toolbar/_colors.scss'; - const content = ` -@use "colors"; + const content = `@use "colors"; /** * $name Slide out background * $type color @@ -191,7 +190,8 @@ describe('Metadata generator - collectMetadata', () => { $slideout-background: #000 !default; `; - const expected = ` + const expected = `$slideout-background: getCustomVar(("$slideout-background")) !default; + @use "colors"; /** * $name Slide out background @@ -253,22 +253,6 @@ $slideout-background: #000 !default; }); }); - test('collectMetadata - "./variables" imports change in main index file', () => { - const path = '/scss/widgets/material/_colors.scss'; - const content = ` -@forward "./variables"; -@use "./variables" as *; -`; - - const expected = ` -@forward "tb_material"; -@use "tb_material" as *; -`; - const result = generator.collectMetadata(path, content); - - expect(result).toBe(expected); - }); - test('collectMetadata - right content for bundle', () => { const path = '/scss/bundles/dx.light.scss'; const content = ` @@ -294,16 +278,6 @@ describe('Metadata generator - generate files content', () => { expect(MetadataGenerator.isBundleFile('base/accordion/_index.scss')).toBe(false); }); - test('getMainColorsFileTheme', () => { - expect(MetadataGenerator.getMainColorsFileTheme('/widgets/generic/_colors.scss')).toBe('generic'); - expect(MetadataGenerator.getMainColorsFileTheme('widgets\\generic\\_colors.scss')).toBe('generic'); - expect(MetadataGenerator.getMainColorsFileTheme('widgets/material/_colors.scss')).toBe('material'); - expect(MetadataGenerator.getMainColorsFileTheme('/scss/widgets/material/_colors.scss')).toBe('material'); - expect(MetadataGenerator.getMainColorsFileTheme('bundles/dx.light.scss')).toBe(null); - expect(MetadataGenerator.getMainColorsFileTheme('path/widgets/generic/accordion/_index.scss')).toBe(null); - expect(MetadataGenerator.getMainColorsFileTheme('base/accordion/_index.scss')).toBe(null); - }); - test('getBundleContent', () => { const genericBundleContent = ` @use "../widgets/generic/colors" with ($color: "carmine"); @@ -339,18 +313,4 @@ describe('Metadata generator - generate files content', () => { expect(MetadataGenerator.getBundleContent(commonBundleContent)) .toBe(commonBundleContent); }); - - test('getMainColorsFileContent', () => { - const content = ` -@forward "./variables"; -@use "./variables" as *; -`; - - const expected = ` -@forward "tb_material"; -@use "tb_material" as *; -`; - - expect(MetadataGenerator.getMainColorsFileContent(content, 'material')).toBe(expected); - }); }); diff --git a/packages/devextreme-themebuilder/tests/modules/compiler-sass.test.ts b/packages/devextreme-themebuilder/tests/modules/compiler-sass.test.ts index 0db3a02e19ab..77f3482deafe 100644 --- a/packages/devextreme-themebuilder/tests/modules/compiler-sass.test.ts +++ b/packages/devextreme-themebuilder/tests/modules/compiler-sass.test.ts @@ -94,54 +94,4 @@ describe('Sass features', () => { $var7: '200px', }); }); - - test('getMatchingUserItemsAsString - return right string for the url', () => { - const compiler = new Compiler(); - - compiler.userItems = [{ - key: '$var2', - value: 'rgba(0,0,0,0)', - }, { - key: '$var0', - value: '10px', - }]; - const expected = '$var2: rgba(0,0,0,0);$var0: 10px;'; - - const content = compiler.getMatchingUserItemsAsString('generic'); - - expect(content).toEqual(expected); - }); - - test('setter function (custom importer)', () => { - const compiler = new Compiler(); - compiler.userItems = [{ - key: '$var2', - value: 'rgba(0,0,0,0)', - }, { - key: '$var0', - value: '10px', - }]; - - const url = new URL('db:tb_generic'); - const expectedContent = '$var2: rgba(0,0,0,0);$var0: 10px;'; - - const setterResult = compiler.load(url); - expect(setterResult).toEqual({ - contents: expectedContent, - syntax: 'scss', - }); - expect(compiler.importerCache[url.pathname]).toBe(expectedContent); - }); - - test('setter call getMatchingUserItemsAsString once for every url', () => { - const url = new URL('db:tb_generic'); - const compiler = new Compiler(); - compiler.getMatchingUserItemsAsString = jest.fn().mockImplementation(() => 'content'); - compiler.load(url); - compiler.load(url); - compiler.load(url); - - expect(compiler.getMatchingUserItemsAsString).toHaveBeenCalledTimes(1); - expect(compiler.importerCache[url.pathname]).toBe('content'); - }); }); diff --git a/packages/devextreme-themebuilder/tests/modules/compiler.test.ts b/packages/devextreme-themebuilder/tests/modules/compiler.test.ts index 7f29fb32010f..b81af35fdc5e 100644 --- a/packages/devextreme-themebuilder/tests/modules/compiler.test.ts +++ b/packages/devextreme-themebuilder/tests/modules/compiler.test.ts @@ -4,7 +4,7 @@ import fs from 'fs'; import { metadata } from '../data/metadata'; import noModificationsMeta from '../data/compilation-results/no-changes-meta'; -import Compiler, { ImportType } from '../../src/modules/compiler'; +import Compiler from '../../src/modules/compiler'; jest.mock('../../src/data/metadata/dx-theme-builder-metadata', () => ({ __esModule: true, @@ -104,19 +104,12 @@ describe('compile', () => { }); describe('compile with widgets', () => { - test('getImportType', () => { - expect(Compiler.getImportType('tb_generic')).toBe(ImportType.Color); - expect(Compiler.getImportType('../widgets/generic/tb_index')).toBe(ImportType.Index); - expect(Compiler.getImportType('colors')).toBe(ImportType.Unknown); - }); - test('setter return indexFileContent for index file', () => { const compiler = new Compiler(); const contentOfIndexFile = 'some content'; - const indexFileUrl = new URL('db:../widgets/generic/tb_index'); compiler.indexFileContent = contentOfIndexFile; - expect(compiler.load(indexFileUrl)).toEqual({ + expect(compiler.load()).toEqual({ contents: contentOfIndexFile, syntax: 'scss', });