CSScomb 3

Цього тижня вийшла нова версія CSScomb — інструменту, який робить CSS-код красивим. Про те, як «гребінець» використовують в Яндексі, нещодавно писав Beyondtheclouds. Я ж розповім, що нового з'явилося у третій версії та що робити, якщо базової функціональності не вистачає. Наприклад, як написати свій плагін чи навіть постпроцесор. Спочатку про нове.

Підтримка Sass

Любителі відступів тепер можуть упорядковувати sass-файли.

Stylus так і не з'явився і найближчим часом не передбачається. Складнощі виникли не так з написанням коду, як з його підтримкою: не знайшлося людини, яка була б готова стежити за новинками в мові та оновлювати парсер. Подробиці можна прочитати у відповідному таску.

«Залишки» у сортуванні

Для порядку сортування з'явилося нове ключове слово: “. Використовувати його зручно у двох випадках:

  1. для алфавітного сортування (див. нижче)
  2. для вибіркового сортування
Приклад вибіркового сортування:

Сортування за абеткою

Сперечатись про те, який порядок властивостей кращий, можна нескінченно. Ми вирішили полегшити роботу і додали властивість sort-order-fallback . Ця опція сортує за алфавітом властивості, позначені у списку ключовим словом ".".

Цю властивість можна також поєднувати з вибірковим сортуванням.

Нові налаштування

У третій версії покращено роботу з пробілами. Деякі налаштування ми видалили ( rule-indent , stick-brace ). Деякі розбили та перейменували. Так, combinator-space перетворилася на space-before-combinator і space-after-combinator, а colon-space - в space-before-colon і space-after-colon. А ще мидодали низку нових опцій:

  • tab-size
  • space-before-selector-delimiter
  • space-after-selector-delimiter
  • space-before-opening-brace
  • space-after-opening-brace
  • space-before-closing-brace
  • space-after-declaration
Повний список та приклади використання можна подивитися на гітхабі.

Як оновитись

CSScomb можна отримати кількома способами:

  1. npm-модуль
  2. CLI
  3. плагін для Grunt
  4. плагін для Sublime Text
Крім цього є плагіни для Gulp, Brunch і Brackets, але вони ще не підтримують версію 3.0. Якщо ви використовуєте CSScomb 2.0 і хочете перейти на третю версію, дуже важливо оновити конфіг. Зі старим, на жаль, не злетить. Щоб вам не довелося витрачати час на переробку файлу руками, ми зробили сервіс з генерації конфігів. Все, що потрібно зробити - це покликати на ті варіанти коду, які вам подобаються. На виході вийде готовий для роботи файл налаштувань.

Як розширити функціональність

CSScomb — чудовий інструмент, але іноді хочеться щось додати. Тому ми постаралися зробити код максимально модульним і легко розширюваним. Ви можете доповнити «гребінець» потрібною функцією, не морочачися з форком. Для цього є три способи:

  1. підключити сторонній плагін
  2. написати свій плагін
  3. зробити на базі CSScomb свій постпроцесор

Сторонні плагіни

Найпростіше використовувати чийсь плагін. Наприклад, ось опція, яка прибирає порожній рядок між групами декларацій, якщо декларацій у групі замало. Підключити плагін досить просто, для цього є метод use() :

Бо можливість писати плагіни тільки-но з'явилася, особливої ​​різноманітності поки немає.Тому, якщо ви точно знаєте, чого вам не вистачає, можете написати свою опцію.

Написати свій плагін
Написати свій постпроцесор

Якщо плагіна недостатньо і потрібно щось більше, чому б не написати свій постпроцесор? Ми винесли ядро ​​CSScomb в окремий модуль, щоб будь-хто міг застосувати його для свого проекту. Тому якщо вам до душі принцип роботи «гребінця», система плагінів та файлів налаштувань, зверніть увагу на CSScomb Core. Усередині цього модуля є все, що потрібно:

  • Парсер із підтримкою препроцесорів
  • API для роботи з конфігами
  • API для створення та підключення плагінів
  • API для обробки файлів/рядків/директорій
Швидко розібратися допоможе спеціальний шаблон Flip Comb. Це маленький постпроцесор, нічого лишого. Код можна форкнути та змінити під свої потреби.

Плани на майбутнє

Основний напрямок подальших покращень – лінтер та CLI. Ми постаралися, щоб опції можна було писати самим, не чекаючи їхньої появи в ядрі. Тому нових налаштувань у найближчому майбутньому чекати не варто. Але якщо ви написали плагін і вважаєте, що іншим він теж стане в нагоді, це дуже круто, відправляйте ПР. Якщо вам цікаво взяти участь у проекті, зверніть увагу на завдання з тегом «help wanted». Stylus, наприклад, як і раніше чекає на свого героя.

Всі посилання в одному місці

P.S. Хостинг для csscomb.com нам безкоштовно надає компанія Nodejitsu у рамках програми підтримки опенсорсу. Там не так багато ресурсів, тому якщо сайт раптом стане недоступним, поставтеся з розумінням, будь ласка.

Хардкорна конфа за С++. Ми запрошуємо лише профі.