Лучше использовать style строку и пихать туда переменные из JS. Если тащить переменные в CSS из скрипта, то придется для каждого инстанса компонента генерировать разный набор CSS.
<Component style="—some-var: {var};" />
Ну или тот сахар с пулей в ногу "невидимым" div использовать.
кому-то импорты не нравятся, хотя я их уже лет 5 не писал их IDE сама делает, но конечно же не в свелт потому что свелт особенный ему нужно 10 прослоек написать чтобы базовый функционал в IDE заработал)
в том препроцессоре творится шлак, он эти переменные прописывает в document.documentElement что соответственно устанавливает одинаковые значения всем инстансам компонентов, даже если они должны быть разными