Использования стандартных CSS переменных в media queries
Всем привет! Возможно ли (и как?) использовать CSS переменные внутри media queries, пример:
:root {
--viewport--small: 358px;
}
@media screen and (min-width: var(--viewport-small)) {
// something
}
P.S. в сборке create-react-app 2020
Находил такую и такую статьи, но так ничего и не вышло, самое интересное это то, чтобы добавить данную настройку (переменные CSS в media queries) без использования npm eject для react приложения, вопрос с SASS/SCSS отпадает, так как использую CSS Modules для описания стилей и вечно импортить в каждый *.scss(sass) файл с переменными или чем-либо ещё - не особо хочется, поэтому пришёл к выводу, что CSS переменные будет лучше использовать, может у кого-нибудь уже есть готовая сборка или кто-либо готов подсказать?
P.S.S. "А почему бы не писать это всё руками?" - Логично, но нет, если дизайнер захочет изменить viewport ноутбука с 1366 до 1440, то будет довольно запарно это всё исправлять, нежели, чем просто поправить 1 переменную в 1 файле за 1сек. Вариант с массовым поиском и заменой всех совпадений 1366px тоже отпадает, т.к. из-за этого может что-нибудь "затронуться", что не нужно было трогать