Стили и UI

Extension frontend не несёт собственный CSS-фреймворк. Визуал строится на стилях и теме хоста.

PrimeVue

Хост регистрирует PrimeVue с темой (@primeuix/themes) и глобальными стилями. Extension импортирует только компоненты:

<script setup lang="ts">
import Card from 'primevue/card';
import Button from 'primevue/button';
</script>

Нельзя:

import 'primevue/resources/themes/...';  // ❌
import 'primeicons/primeicons.css';       // ❌ в extension bundle

PrimeIcons доступны через host — классы pi pi-* работают, если хост подключил icons.

Tailwind

Хост использует Tailwind v4 (@tailwindcss/vite). Классы в template extension резолвятся CSS хоста:

<template>
  <div class="flex gap-2 p-4 rounded-lg border border-surface-200">
    …
  </div>
</template>

Нельзя добавлять @tailwindcss/vite или свой tailwind.config в extension — классы не попадут в production CSS хоста.

Используйте semantic tokens хоста: text-surface-700, bg-primary, border-surface-200 и т.д.

Тёмная тема

Переключение dark/light — на стороне хоста. Extension не управляет theme provider; достаточно Tailwind/PrimeVue классов, совместимых с обеими темами.

Scoped styles

<style scoped> в SFC extension работает — стили попадают в JS bundle и инжектятся при mount компонента. Используйте для layout, специфичного для extension, не для переопределения PrimeVue.

Рекомендации

1. Переиспользуйте PrimeVue-компоненты вместо custom HTML где возможно
2. Не копируйте design tokens хоста в hardcoded hex — используйте utility classes
3. Проверяйте UI в light и dark mode
4. При «голых» PrimeVue-компонентах см. Troubleshooting: PrimeVue без стилей

Размер bundle

После правильной настройки shims типичный frontend bundle extension — 10–20 KB (gzip), не сотни KB. Если bundle раздут — проверьте Host-модули.