Как добиться полноценной работы SCSS модулей во Vue 3?

Question

[Return Me Void]

Сделал во Vue 3 SCSS модули. Но когда делаешь:

<style module lang="scss">
 .root {
  &__header { 
    ...
  }
}
</style>

TS не видит, что в $styles помимо .root, есть ещё и root__header (а в рантайме он по факту есть и корректно работает).
Если указать не &__header, а явно .root__header, то всё работает и TS видит оба класса. Хотелось бы не дублировать и сохранить синтаксис с "&".

Comments

[Антон Антон]

Думаю, лучше здесь спрашивать https://github.com/vuejs/language-tools

[Aetae]

Сам по себе typescript вообще ничего не знает о Vue или о стилях, он только ts код проверяет.
Чтоб он "на лету" подхватывал виртуальные автосгенерирированные типы для стилей используются разные language service плагины для движка ts или вообще отдельные плагины для твоей IDE.
Это по сути очень замороченный и низкоуровневый костыль.
Тебе надо настроить, чтоб под капотом такого плагина сначала компиллился твой scss в css, а уж потом генрировал тайпинг, чего сейчас не происходит, полагаю, из-за вопросов производительности.
Возможно ли это без сложных телодвижений? Хз, надо изучать материалы по ссылке приведённой выше.:)

P.S. "Классическое" решение - просто отдельно запускать хрень(их несколько разных) которая будет следить за изменением файлов и генерить .d.ts, которые будет подхватываться на лету. Но так у тебя будет куча мусорных .d.ts'ок валяться, которые ещё и врать могут, если хрень забыл запустить или она отвалилась.:)

[Ankhena]

Ещё добавлю, что конкатенация классов элементов очень часто оказывается неудобной - чтобы найти, требуется две итерации поиска.
А обычный нестинг есть в нативном CSS.

[Return Me Void]

Ankhena, webstorm понимает такие классы, сразу переходит к ним

[Return Me Void]

Aetae, да про кучу .d.ts я знаю...) грустно это всё)

[Ankhena]

Return Me Void, прям из браузера? Оч удобно ))
А, нет? Надо сначала найти класс в разметке, а потом Шторм поймет куда перейти?

[Return Me Void]

Ankhena, ну во vue компоненте написан полный класс в атрибуте class, н-р .root__my-class, ctrl+b нажимаем и он переходит к месту, где

.root {
  &__my-class { ... }
}

[Ankhena]

Return Me Void, знаете, когда код свой собственный и свежий, то и ладно.
Вот попал вам чужой проект, открыли вы его в браузере, нашли проблему в стилях.. Идёте искать в проекте...

[Aetae]

Ankhena, по идее это должны решать сорсмапы.

[Ankhena]

Aetae, должны, конечно, если есть.
И все эти аргументы я и сама могу рассказать.
И тем не менее продолжают появляться ситуации, когда их нет и такой поиск не доставляет удовольствия, мягко выражаясь.