From c106c16692f922dfa93878b9ac5cc655163d9b2c Mon Sep 17 00:00:00 2001 From: Arman Jivanyan Date: Thu, 11 Sep 2025 01:22:04 +0400 Subject: [PATCH 1/2] add sass embedded to avoid ci problems in template --- packages/devextreme-schematics/src/install/index.ts | 10 ++++++++++ .../src/utility/latest-versions.ts | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/devextreme-schematics/src/install/index.ts b/packages/devextreme-schematics/src/install/index.ts index ef8de914a..af043d013 100644 --- a/packages/devextreme-schematics/src/install/index.ts +++ b/packages/devextreme-schematics/src/install/index.ts @@ -22,6 +22,7 @@ export default function(options: any): Rule { return chain([ (host: Tree) => addDevExtremeDependency(host, { dxversion: options.dxversion }), + (host: Tree) => addSassEmbeddedDependency(host), (host: Tree) => addDevExtremeCSS(host, { project: options.project }), (host: Tree) => reqisterJSZip(host), (_, context: SchematicContext) => { @@ -55,6 +56,15 @@ function addDevExtremeDependency(host: Tree, options: any) { return host; } +function addSassEmbeddedDependency(host: Tree) { + addPackageJsonDependency(host, { + type: NodeDependencyType.Dev, + name: 'sass-embedded', + version: latestVersions['sass-embedded'] + }); + return host; +} + async function addDevExtremeCSS(host: Tree, options: any) { const projectName = await getProjectName(host, options.project); modifyJSONFile(host, './angular.json', config => { diff --git a/packages/devextreme-schematics/src/utility/latest-versions.ts b/packages/devextreme-schematics/src/utility/latest-versions.ts index da0b553e0..d3f3be2b1 100644 --- a/packages/devextreme-schematics/src/utility/latest-versions.ts +++ b/packages/devextreme-schematics/src/utility/latest-versions.ts @@ -2,5 +2,6 @@ export const latestVersions = { 'devextreme': '25.1.4', 'devextreme-angular': '25.1.4', - 'devextreme-cli': 'latest' + 'devextreme-cli': 'latest', + 'sass-embedded': '1.66.0' }; From af68d598c065bee885dcff43257206a6d9f01d6f Mon Sep 17 00:00:00 2001 From: Arman Jivanyan Date: Thu, 11 Sep 2025 02:53:25 +0400 Subject: [PATCH 2/2] Update swatch class location --- .../src/templates/nextjs/application/src/theme.tsx | 9 ++++----- .../src/templates/react/application/src/theme.tsx | 9 ++++----- .../templates/vue-v3/application/src/theme-service.js | 8 ++++---- .../files/src/app/shared/services/theme.service.ts | 9 ++++----- 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx b/packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx index 3123f707c..562ea40e0 100644 --- a/packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx +++ b/packages/devextreme-cli/src/templates/nextjs/application/src/theme.tsx @@ -18,7 +18,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) { const newTheme = getNextTheme(prevTheme); if (typeof window !== 'undefined') { - document.body.classList.replace( + document.querySelector('.app')?.classList.replace( themeClassNamePrefix + prevTheme, themeClassNamePrefix + newTheme ); @@ -27,8 +27,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) { const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : ''; const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}` - document.body - .querySelector(`.${additionalClassName}`)?.classList + document.querySelector('.app')?.querySelector(`.${additionalClassName}`)?.classList .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark')); currentTheme = newTheme; @@ -45,8 +44,8 @@ export function useThemeContext() { }, []); useLayoutEffect(() => { - if (typeof window !== 'undefined' && !document.body.className.includes(themeClassNamePrefix)) { - document.body.classList.add(themeClassNamePrefix + theme); + if (typeof window !== 'undefined' && !document.querySelector('.app')?.className.includes(themeClassNamePrefix)) { + document.querySelector('.app')?.classList.add(themeClassNamePrefix + theme); } }, [theme]); diff --git a/packages/devextreme-cli/src/templates/react/application/src/theme.tsx b/packages/devextreme-cli/src/templates/react/application/src/theme.tsx index c2170d64e..e941343e2 100644 --- a/packages/devextreme-cli/src/templates/react/application/src/theme.tsx +++ b/packages/devextreme-cli/src/templates/react/application/src/theme.tsx @@ -16,7 +16,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) { const isCurrentThemeDark = prevTheme === 'dark'; const newTheme = getNextTheme(prevTheme); - document.body.classList.replace( + document.getElementById('root')?.classList.replace( themeClassNamePrefix + prevTheme, themeClassNamePrefix + newTheme ); @@ -25,8 +25,7 @@ function toggleTheme(prevTheme<%=#isTypeScript%>: string<%=/isTypeScript%>) { const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : ''; const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}` - document.body - .querySelector(`.${additionalClassName}`)?.classList + document.getElementById('root')?.querySelector(`.${additionalClassName}`)?.classList .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark')); currentTheme = newTheme; @@ -41,8 +40,8 @@ export function useThemeContext() { return currentTheme === 'dark'; }, []); - if (!document.body.className.includes(themeClassNamePrefix)) { - document.body.classList.add(themeClassNamePrefix + theme); + if (!document.getElementById('root')?.className.includes(themeClassNamePrefix)) { + document.getElementById('root')?.classList.add(themeClassNamePrefix + theme); } return useMemo(()=> ({ theme, switchTheme, isDark }), [theme, switchTheme, isDark]); diff --git a/packages/devextreme-cli/src/templates/vue-v3/application/src/theme-service.js b/packages/devextreme-cli/src/templates/vue-v3/application/src/theme-service.js index f7ace9696..e0d2b23d5 100644 --- a/packages/devextreme-cli/src/templates/vue-v3/application/src/theme-service.js +++ b/packages/devextreme-cli/src/templates/vue-v3/application/src/theme-service.js @@ -7,10 +7,10 @@ class ThemeService { isDark = ref(false); constructor() { - if (!document.body.className.includes(this.themeClassNamePrefix)) { + if (!document.getElementById('app').className.includes(this.themeClassNamePrefix)) { this.currentTheme.value = this.themes[0]; - document.body.classList.add(this.themeClassNamePrefix + this.currentTheme.value); + document.getElementById('app').classList.add(this.themeClassNamePrefix + this.currentTheme.value); } } @@ -20,7 +20,7 @@ class ThemeService { this.currentTheme.value = this.themes[prevTheme === this.themes[0] ? 1 : 0]; - document.body.classList.replace( + document.getElementById('app').classList.replace( this.themeClassNamePrefix + prevTheme, this.themeClassNamePrefix + this.currentTheme.value ); @@ -29,7 +29,7 @@ class ThemeService { const additionalClassNamePostfix = isCurrentThemeDark ? '-' + prevTheme : ''; const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}` - document.body + document.getElementById('app') .querySelector(`.${additionalClassName}`)?.classList .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark')); diff --git a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/services/theme.service.ts b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/services/theme.service.ts index 6ae826f32..4b7acd6c7 100644 --- a/packages/devextreme-schematics/src/add-layout/files/src/app/shared/services/theme.service.ts +++ b/packages/devextreme-schematics/src/add-layout/files/src/app/shared/services/theme.service.ts @@ -18,8 +18,8 @@ export class ThemeService { currentTheme: Theme = getNextTheme(); constructor(@Inject(DOCUMENT) private document: Document) { - if (!this.document.body.className.includes(themeClassNamePrefix)) { - this.document.body.classList.add(themeClassNamePrefix + this.currentTheme); + if (!this.document.querySelector('.app')?.className.includes(themeClassNamePrefix)) { + this.document.querySelector('.app')?.classList.add(themeClassNamePrefix + this.currentTheme); } } @@ -30,7 +30,7 @@ export class ThemeService { const newTheme = getNextTheme(this.currentTheme); const isCurrentThemeDark = currentTheme === 'dark'; - this.document.body.classList.replace( + this.document.querySelector('.app')?.classList.replace( themeClassNamePrefix + currentTheme, themeClassNamePrefix + newTheme ); @@ -39,8 +39,7 @@ export class ThemeService { const additionalClassNamePostfix = isCurrentThemeDark ? '-' + currentTheme : ''; const additionalClassName = `${additionalClassNamePrefix}${additionalClassNamePostfix}` - this.document.body - .querySelector(`.${additionalClassName}`)?.classList + this.document.querySelector('.app')?.querySelector(`.${additionalClassName}`)?.classList .replace(additionalClassName, additionalClassNamePrefix + (isCurrentThemeDark ? '' : '-dark')); this.currentTheme = newTheme;