У нас кастомный шаблонизатор(для HTML) на Typescript.
Для СSS используем CSS модули.
Когда в .ts генерируеш classname по БЕМ неймингу то приходится использовать конструкцию типа :
style['block'] + style['__element'] + style['--modificator']что не есть удобно каждый раз писать + вебпаковский CSS loader все классы с дефисом превращает в CamelCase что услоняет чтение кода и не понятно где блок где елемент и где модификатор. При этом генерируется файл file.css.d.ts в которой прописаны типы для класов в виде одноуровневого объекта:
styles {
block: "string",
block—modificator: "string"
}
В сети нашли статью:
https://medium.com/trabe/using-bem-conventions-in-css-modules-leveraging-custom-webpack-loaders-fd985f72bcb2где люди улучшили DX:
styles.block.element.$modificator - > block__element—modificator
styles.block.$modificator - > block—modificator
Но при этом нам надо чтобы file.css.d.ts генерировал многоуровневую структуру:
styles {
block {
element {
modificator {
}
}
}
}
Надеюсь объяснил.