Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BREAKING CHANGE][SSR]: отказаться от выставления CSS классов в рантайме #7529

Open
inomdzhon opened this issue Sep 6, 2024 · 0 comments · May be fixed by #7739
Open

[BREAKING CHANGE][SSR]: отказаться от выставления CSS классов в рантайме #7529

inomdzhon opened this issue Sep 6, 2024 · 0 comments · May be fixed by #7739
Assignees
@andrey-medvedev-vk
Labels
breaking-change cmp:app-root ssr
Milestone
v7.0.0-beta.2

Comments

@inomdzhon
Copy link
Contributor

Для улучшения поддержки SSR необходимо убрать выставление классов на DOM-элемент компонентом AppRoot

VKUI/packages/vkui/src/components/AppRoot/AppRoot.tsx

Lines 142 to 181 in ba6b605

switch (mode) {
case 'full': {
if (parentElement) {
parentElement.classList.add(...baseClassNames);
}
documentElement.classList.add(...stylesClassNames, 'vkui');
const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, documentElement);
return function cleanup() {
if (parentElement) {
parentElement.classList.remove(...baseClassNames);
}
documentElement.classList.remove(...stylesClassNames, 'vkui');
unsetSafeAreaInsets();
};
}
case 'embedded': {
if (parentElement) {
parentElement.classList.add(...baseClassNames, ...stylesClassNames);
if (!disableParentTransformForPositionFixedElements) {
parentElement.style.setProperty('transform', 'translate3d(0, 0, 0)');
}
const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, parentElement, portalRootRef.current); // prettier-ignore
return function cleanup() {
parentElement.classList.remove(...baseClassNames, ...stylesClassNames);
if (!disableParentTransformForPositionFixedElements) {
parentElement.style.removeProperty('transform');
}
unsetSafeAreaInsets();
};
}
/* istanbul ignore next: node.parentElement может быть null, но такой кейс в теории невозможен */
return;
}
/* istanbul ignore next: не покрывается за счёт теста на <AppRoot mode="partial" /> */
case 'partial': {
return;
}

Сейчас эти классы нужны для выставления того или иного набора токенов из @vkontakte/vkui-tokens.

Вариант решения проблемы

@vkontakte/vkui-tokens отдаёт две версии CSS файла с токенами:

  1. onlyVariablesLocal.css – для определения используется CSS класс
  2. onlyVariables.css – для определения используется :root

Сейчас используется 1-ый вариант, который предполагает выставление класса.

Можно рассмотреть возможность использования 2-го варианта, но в этом случае нужно будет написать CSS Media Query либо на нашей стороне (посредством сборки), либо на стороне @vkontakte/vkui-tokens.

@media (prefers-color-scheme: light) {
  :root { ... } /* node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css */
}

@media (prefers-color-scheme: dark) {
  :root { ... } /* node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariables.css */
}

Если appearance зашит, то пользователь может на уровне сервера выставить, например, <html style="color-scheme: dark".
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andrey-medvedev-vk andrey-medvedev-vk

Labels
breaking-change cmp:app-root ssr
Projects
VKUI
Status: 🔧 In progress
Milestone
v7.0.0-beta.2
Development

Successfully merging a pull request may close this issue.

[BREAKING CHANGE] feat: SSR, AppRoot: get rid of body classes mutations VKCOM/VKUI
2 participants
@inomdzhon @andrey-medvedev-vk