🍋 lemonj

Инструмент автоматической рефакторизации CSS/LESS/SCSS и проверки качества кода.

💡 Возможности:

• Рефакторизация
  • Автоматическое выделение цветов в переменные
• Недочеты
  • Шрифт
  • Нечётная ширина
  • important
  • position: absolute
  • mediaQueries

📦 Установка

npm install lemonj -g

или

yarn global add lemonj

🌰 Демо

Автоматическое выделение цветов в переменные

Мы будем рефакторизировать файлы стилей LESS в папке _fixtures:

1. Анализ файла

lemonj analysis _fixtures

Выдает плохие практики кода:

Code Smell:  {
  colors: 24,
  importants: 4,
  issues: 8,
  mediaQueries: 1,
  absolute: 0,
  oddWidth: 1
}

2. Каждый цвет преобразуется в отдельную переменную в файле mappings.less, который можно модифицировать:

// _fixtures/less/color/border.less
@color1: #ddd;
// _fixtures/less/color/border.less
@color2: green;
// _fixtures/less/color/rgba.less
@color3: rgba(255, 0, 0, 0.3);
// _fixtures/less/color/sample.less
@color4: #ff7f50;
// _fixtures/less/color/sample.less
// _fixtures/less/color/sample2.less
@color5: #800080;
// _fixtures/less/color/sample.less
@color6: red;
// _fixtures/less/color/sample.less
// _fixtures/less/color/sample.less
@color7: #428bca;
// _fixtures/less/color/sample.less
@color8: #fff;
// _fixtures/less/color/sample2.less
@color9: #000000;

3. Выполнение команды рефакторизации:

lemonj refactor _fixtures

Теперь каждый жёстко заданный цвет был выведен в переменную.

🛣️ План развития:- [x] Рефакторизация цветов

• Анализ цветов
• Автоматическая рефакторизация цветов
• Рефакторизация вложенных классов более чем третьего уровня
  • Анализ вложений более чем третьего уровня
  • Обработка вложений более чем третьего уровня
• Автоматическое сворачивание селекторов. .level1.level2{} в .level1{.level2}}
  • Анализ необходимости объединения селекторов
  • Рефакторизация селекторов
• Сортировка colors.less по цветам
• Подведение итогов
  • Шрифт
  • Цвета
  • important
  • mediaQueries
  • нечетная ширина
  • absolute
• Разделение команд
  • Разделение команд рефакторизации цветов как подкоманды
• Преобразование в TypeScript
  • разделение пакетов AST
  • использование Lerna
  • использование esbuild