то есть js будет два раза собираться в итоге?

да. еще есть варики:

1. собирать бабелем, потом по dist собирать цсс, но тогда вотч превращается в кошмар и вообще это как то нелепо
2. писать бабель плагин который оставляет только импорты, но это точно не стоит 10 секунд сборки

Да так то ок, просто может тогда и и сборку кода в вебпак унести? (в отдельном пр)

К сожалению нет =( Из вебпака всегда вылезает один бандл (ну точно не по файлам), и тогда не получится три-шейкать цсс (ради чего всё и затевается), потому что это сайд-эффект импорт. Возможно можно придумать какое-то особо хитрое разбиение 1 компонент = 1 чанк, но пока непонятно станет ли лучше и возможно ли это

Это для консистентности кода?

не, это чтобы правильный порядок цсс с одинаковой специфичностью был:

Button.css

.Button {
  border-radius: 3px;
}

Alert.css

.Alert__button {
  border-radius: 0;
}

Alert.tsx

// Button.css первый в CSS-бандле
import { Button } from '../Button/Button'
// Alert.css после всех CSS импортированных компонентов
import './Alert.css'

// Стили для Alert__button оверрайдят базовые стили Button
export const Alert = () => <Button vkuiClass="Alert__button" />