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

Подключение плагина

Vite

import { defineConfig } from 'vite';
import ecss from '@ecss/vite-plugin';

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

Плагин не принимает опции напрямую — всё настраивается через файл ecss.config.ts.

ecss.config.ts

Создайте файл в корне проекта. Конфиг обязательно экспортируется через defineConfig:

Vite

import { defineConfig } from '@ecss/config';

export default defineConfig({
  enableDebug: true,
});

Поддерживаемые форматы: .ts, .js, .mts, .mjs, .cts, .cjs.

Опции

generateDeclarations

generateDeclarations: boolean; // по умолчанию: true

Генерирует .d.ts-файлы в .ecss/types/ для каждого .ecss-файла. Добавьте в tsconfig.json:

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

enableDebug

enableDebug: boolean; // по умолчанию: false

При true директивы @debug компилируются в console.log. При false — полностью вырезаются из бандла.

minifyNames

minifyNames: boolean; // по умолчанию: false

При true сокращает имена сгенерированных классов и атрибутов до коротких хэшей. Рекомендуется включать для production-сборок.

runtimeValidation

runtimeValidation: boolean; // по умолчанию: false

При true выводит предупреждения в консоль, если переданы некорректные или отсутствующие параметры. Полезно на этапе разработки.

aliases

aliases: Record<string, string>;

Псевдонимы путей для импортов внутри .ecss-файлов:

aliases: {
  '#/*': './src/*',
}

globalImports

globalImports: string[]

Файлы, автоматически подключаемые в начало каждого .ecss-файла. Удобно для глобальных токенов:

globalImports: ['./src/tokens.ecss'],

adapters

adapters: EcssAdapter[]

Подключённые адаптеры для генерации компонентов фреймворков. Можно подключить несколько — см. Несколько адаптеров в одном проекте.

defaultAdapter

defaultAdapter: string | null; // по умолчанию: null

Адаптер, используемый по умолчанию при импорте .ecss-файла без суффикса. Например, 'react' активирует React-компоненты без явного указания. Для не-дефолтного адаптера используйте суффикс ?<id> при импорте — см. Несколько адаптеров.

Функциональная форма

defineConfig принимает функцию — в неё прокидывается объект от сборщика, из которого можно получить информацию об окружении:

Vite

import { defineConfig } from '@ecss/config';

export default defineConfig(({ command, mode }) => ({
  enableDebug: command === 'serve',
  minifyNames: command === 'build',
  runtimeValidation: command === 'serve',
}));

См. также

• @debug — опция enableDebug