core-ds/arui-scripts

Проблема с keepCssVars и componentsTheme в 15.5.2

Closed this issue · 9 comments

sanityFair commented

При обновлении забыли подтянуть postcss конфиг из версии 15.0.0.

heymdall-legal commented

"проблема" звучит очень абстрактно. В 15.0.0 были баги с postcss конфигурацией, поправленные например тут
#64

Про какие именно проблемы идет речь?

sanityFair commented

@heymdall-legal
Я полагал, что keepCssVars использует медиа переменные из файла (для глобального доступа без импорта) и аналогично переменных из componentsTheme.
После обновления изменился механизм добавления, чтобы не импортировать определения пользовательских свойств в каждый файл используется PostCSS Global Datа, который идет перед custom-properties.
( config.componentsTheme || config.keepCssVars ) && '@csstools/postcss-global-data', config.keepCssVars && 'postcss-custom-media', config.componentsTheme && 'postcss-custom-properties',

Получается keepCssVars не имеет отношения к mq, а медиа запросы по умолчанию добавляются. Верно?

heymdall-legal commented

Так. Вообще надо конечно тесты какие то сделать, но я не очень понимаю как. Распишу кейсы, дальше можно будет подумать как сделать так, чтоб оно так и работало, а потом еще и подумать как это тестировать
CSS на входе:

/*style.css*/
@import '~@alfalab/core-components/vars/bundle/corp.css';
.root {
    padding: var(--gap-xl);
}

.title {
    color: var(--button-accent-base-bg-color);
}

/*node_modules/@alfalab/core-components/button/index.css*/

:root {
    --button-accent-base-bg-color: #ef3124;
}
.accent {
    background-color: var(--button-accent-base-bg-color);
}

Настройки: keepCssVars: true, componentsTheme: undefined, выход:

/*main.css*/
:root { /*импорты подтянулись, подтянулось то, что импортировали*/
    --gap-xl: 32px;
    --button-accent-base-bg-color: #202022;
}
.root {
    padding: var(--gap-xl);
}

.title {
    color: var(--button-accent-base-bg-color);
}

/*vendor.css*/

:root {
    --button-accent-base-bg-color: #ef3124;
}
.accent {
    background-color: var(--button-accent-base-bg-color);
}

Настройки keepCssVars: true, componentsTheme: './node_modules/@alfalab/core-components/themes/corp.css', выход (в целом это бессмысленно):

/*main.css*/
:root { /*импорты подтянулись, подтянулось то, что импортировали*/
    --gap-xl: 32px;
    --button-accent-base-bg-color: #202022;
}
.root {
    padding: var(--gap-xl);
}

.title {
    color: var(--button-accent-base-bg-color);
}

/*vendor.css*/
:root { /*Добавились переменные из темы*/
    --gap-xl: 32px;
    --button-accent-base-bg-color: #202022;
}
:root {
    --button-accent-base-bg-color: #ef3124;
}
.accent {
    background-color: var(--button-accent-base-bg-color);
}

Настройки keepCssVars: false, componentsTheme: undefined:

/*main.css*/
.root {
    padding: 32px;
}

.title {
    color: #202022; /*значение из файла, который импортировался*/
}

/*vendor.css*/
.accent {
    background-color: #ef3124; /*значение из дефолтной темы, то что импортировали в main - не имеет значения*/
}

Настройки keepCssVars: false, componentsTheme: './node_modules/@alfalab/core-components/themes/corp.css':

/*main.css*/
.root {
    padding: 32px;
}

.title {
    color: #202022; /*значение из файла, который импортировался*/
}

/*vendor.css*/
.accent {
    background-color: #202022; /*значение из corp темы*/
}

При этом все эти настройки не имееют никакого эффекта на custom-media запросы. Для всех вариантов настроек код типа:

@media (--tablet) {
    .root {
        padding: 10px;
    }
}

Должен превращаться в

@media (min-width:600px) and (max-width:1023px) {
    .root {
        padding: 10px;
    }
}
khidirbekov commented

@heymdall-legal приветствую! Я правильно понимаю, что keepCssVars: false (postcss-custom-properties: { preserve: false }) означает, что из бандла должны выпилиться вообще все переменные, в том числе из core-components?

heymdall-legal commented

да, предполагается что это для случаев, когда css-переменные не поддерживаются. К сожалению все еще есть ряд проектов, в которых надо поддерживать ie11

  • 👍1
khidirbekov commented

сейчас получается, что этот параметр не работает. На выходе остаются переменные
image
и причем они дублируются (проблема с дублированием уже скорее решается другим плагином)

sanityFair commented

сейчас получается, что этот параметр не работает. На выходе остаются переменные image и причем они дублируются (проблема с дублированием уже скорее решается другим плагином)

Это плагин не решает проблему с дублированием переменных - postcss-discard-duplicates. Чтобы не дублировались root переменные, лучше добавлять тему для глобального доступа global data

khidirbekov commented

сейчас получается, что этот параметр не работает. На выходе остаются переменные image и причем они дублируются (проблема с дублированием уже скорее решается другим плагином)

Это плагин не решает проблему с дублированием переменных - postcss-discard-duplicates. Чтобы не дублировались root переменные, лучше добавлять тему для глобального доступа global data

Я про сам параметр keepCssVars, сейчас он не работает как должно работать

heymdall-legal commented

Исправлено в arui-scripts версии 15.7.1

  • 🎉1