// vite.config.ts
import ecss from '@mart-dev-test-1/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [ecss(), react()],
});

📦 Установка

npm i -D @mart-dev-test-1/vite-plugin

pnpm add -D @mart-dev-test-1/vite-plugin

yarn add -D @mart-dev-test-1/vite-plugin

🚀 Подключение

Добавьте плагин в vite.config.ts — ecss импортируется как default export. Регистрируйте его перед плагином фреймворка, чтобы .ecss-файлы успевали скомпилироваться до того, как их подхватит, например, React:

// vite.config.ts
import ecss from '@mart-dev-test-1/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [ecss(), react()],
});

Сами адаптеры и defaultAdapter задаются в ecss.config.ts через defineConfig из @mart-dev-test-1/config. Конфиг не привязан к сборщику — плагин читает его из корня проекта. defaultAdapter указывает, какой адаптер применяется к .ecss-файлам по умолчанию (id React-адаптера — 'react'):

// ecss.config.ts
import { defineConfig } from '@mart-dev-test-1/config';
import { reactAdapter } from '@mart-dev-test-1/react-adapter';

export default defineConfig({
  adapters: [reactAdapter()],
  defaultAdapter: 'react',
});

🛠 Использование

Импортируйте сгенерированные компоненты или базовые blocks напрямую из .ecss-файла — что именно экспортируется, зависит от активного адаптера:

// с активным React-адаптером
import { EButton } from './Button.ecss';

function App() {
  return <EButton params={{ variant: 'primary' }}>Нажми меня</EButton>;
}

// без адаптера (defaultAdapter: null) экспортируется только базовый `blocks`
import { blocks } from './Button.ecss';

CSS подключается автоматически: плагин добавляет к JS виртуальный CSS-импорт, который Vite инжектирует через свой нативный CSS-пайплайн.

HMR

.ecss-файлы поддерживают горячую перезагрузку. При сохранении плагин пере-компилирует изменённый файл, инвалидирует связанный виртуальный CSS-модуль и обновляет страницу без полной перезагрузки. Все импортёры изменённого файла пересобираются транзитивно, а ошибки компиляции показываются в overlay Vite.

TypeScript

Плагин записывает точные .d.ts для каждого .ecss-файла в <projectRoot>/.ecss/types/, зеркаля структуру исходного дерева. Чтобы TypeScript разрешал import './Button.ecss', добавьте этот каталог в rootDirs:

{
  "compilerOptions": {
    "rootDirs": [".", "./.ecss/types"]
  }
}

Папка перегенерируется при каждом vite dev / vite build, поэтому добавьте .ecss в .gitignore.

⚙️ Конфигурация

ecss() не принимает аргументов — вся настройка задаётся в ecss.config.ts через defineConfig из @mart-dev-test-1/config (см. «Подключение» выше). Основные поля:

| Поле | Тип | По умолчанию | Описание | | ---------------- | ---------------- | ------------ | ----------------------------------------------------------------------------------- | | adapters | EcssAdapter[] | — | Адаптеры фреймворков, генерирующие обёртки для ECSS-блоков. | | defaultAdapter | string \| null | null | Адаптер по умолчанию для .ecss-файлов. При null экспортируется только blocks. |

Полный список полей конфига — в документации.

👨‍💻 Автор

Разработка и поддержка: Руслан Мартынов

Если нашёл баг или есть предложение — открывай issue или отправляй pull request.

📄 Лицензия

Распространяется под лицензией MIT.