diff --git a/README.md b/README.md index 8fb5ba6ba1..3fe2f2f098 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,15 @@ or add specific CSS-classes to the root node: ``` +it is possible to generate initial CSS-classes during SSR: + +```js +import {getInitialRootClassName} from '@gravity-ui/uikit'; + +const theme = 'light'; +const rootClassName = getInitialRootClassName(theme); +``` + ```js // index.js import {createRoot} from 'react-dom/client'; diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx index 3a2a8e8b78..506c4cde01 100644 --- a/src/components/theme/ThemeProvider.tsx +++ b/src/components/theme/ThemeProvider.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {ThemeContext} from './ThemeContext'; import {ThemeSettingsContext} from './ThemeSettingsContext'; import {DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, DEFAULT_THEME} from './constants'; -import {getBodyRootClassName, getDeprecatedBodyRootClassName} from './getBodyClassName'; +import {getDeprecatedRootClassName, getRootClassName} from './getBodyClassName'; import type {RealTheme, Theme} from './types'; import {updateBodyClassName} from './updateBodyClassName'; import {useSystemTheme} from './useSystemTheme'; @@ -62,10 +62,10 @@ export function ThemeProvider({ {scoped ? (
, ) { return b(modifier); } -export function getBodyRootClassName( +export function getRootClassName( modifier?: Partial, addition?: string[], ) { return bNew(modifier, addition); } -export function getBaseBodyRootClassName(theme?: RealTheme) { - return getBodyRootClassName({theme}); +export function getInitialRootClassName(theme?: RealTheme) { + return getRootClassName({theme}); } diff --git a/src/components/theme/index.ts b/src/components/theme/index.ts index b20f30c848..baa894abfd 100644 --- a/src/components/theme/index.ts +++ b/src/components/theme/index.ts @@ -8,5 +8,5 @@ export * from './useThemeType'; export * from './withTheme'; export * from './withThemeValue'; export * from './getThemeType'; -export {getBaseBodyRootClassName} from './getBodyClassName'; +export {getInitialRootClassName} from './getBodyClassName'; export type {Theme, RealTheme, ThemeType} from './types'; diff --git a/src/components/theme/updateBodyClassName.ts b/src/components/theme/updateBodyClassName.ts index 135cbd084a..02d3ffbf3f 100644 --- a/src/components/theme/updateBodyClassName.ts +++ b/src/components/theme/updateBodyClassName.ts @@ -1,10 +1,10 @@ import {modsClassName} from '../utils/cn'; -import {getBodyRootClassName, getDeprecatedBodyRootClassName} from './getBodyClassName'; +import {getDeprecatedRootClassName, getRootClassName} from './getBodyClassName'; import type {RealTheme} from './types'; -const rootClassName = getDeprecatedBodyRootClassName(); -const rootNewClassName = getBodyRootClassName(); +const rootClassName = getDeprecatedRootClassName(); +const rootNewClassName = getRootClassName(); export type BodyClassNameModifiers = { 'native-scrollbar': boolean; @@ -39,22 +39,19 @@ export function updateBodyClassName( } [...bodyEl.classList].forEach((cls) => { - if (cls.startsWith(modsClassName(getDeprecatedBodyRootClassName({theme: true})))) { + if (cls.startsWith(modsClassName(getDeprecatedRootClassName({theme: true})))) { bodyEl.classList.remove(cls); } - if (cls.startsWith(modsClassName(getBodyRootClassName({theme: true})))) { + if (cls.startsWith(modsClassName(getRootClassName({theme: true})))) { bodyEl.classList.remove(cls); } }); - bodyEl.classList.add(modsClassName(getDeprecatedBodyRootClassName({theme: newTheme}))); - bodyEl.classList.add(modsClassName(getBodyRootClassName({theme: newTheme}))); + bodyEl.classList.add(modsClassName(getDeprecatedRootClassName({theme: newTheme}))); + bodyEl.classList.add(modsClassName(getRootClassName({theme: newTheme}))); for (const [key, value] of Object.entries({...defaultModifiers, ...modifiers})) { - bodyEl.classList.toggle( - modsClassName(getDeprecatedBodyRootClassName({[key]: true})), - value, - ); - bodyEl.classList.toggle(modsClassName(getBodyRootClassName({[key]: true})), value); + bodyEl.classList.toggle(modsClassName(getDeprecatedRootClassName({[key]: true})), value); + bodyEl.classList.toggle(modsClassName(getRootClassName({[key]: true})), value); } }