Вставьте комментарии с помощью CSScomb (используя Sublime Text)

Question

Мой клиент попросил, чтобы в коде было много комментариев, включая CSS-файлы.

Поэтому я подумал об использовании CSScomb для реорганизации кода CSS и автоматического добавления комментариев. Это не имеет смысла, но почему бы и нет.

Так что идея состоит в том, чтобы изменить конфигурационный файл, который гласит:

[
    "font",
    "font-family"
],
[
    "padding",
    "margin"
]
...

но получить вывод, который пишет:

/* FONT STYLE */
font: ....;
font-family: ....;

Есть идеи?

Answer 1

DIY Group Комментарии

Вы можете добавить эту функцию самостоятельно, отредактировав sort-order.js файл в пакете CSScomb.

1. При открытом Sublime Text, в меню выберите Preferences > Browse Packages…; Откроется папка Packages.
2. В папке "Пакеты" перейдите к CSScomb/node_modules/csscomb/lib/options/sort-order.js,
3. Создайте копию этого файла для поиска, если вы хотите отменить изменения. Я дал моей копии имя sort-order-original.js,
   Создайте копию этого файла в другом каталоге для поиска, если вы хотите отменить изменения. Я переместил свою копию на один уровень вверх в новый каталог ../originals/options/sort-order.js,
   Примечание. Если вы просто переименуете копию в существующий каталог, она может быть включена и запущена модулем; поэтому безопаснее просто переместить его на новое место.
4. открыто sort-order.js в Sublime Text для редактирования.
5. Консультируйтесь с этим diff для необходимых изменений, которые будут сделаны.
   Консультируйтесь с этим diff для необходимых изменений, которые будут сделаны. (Эта последняя версия добавляет новую логику для предотвращения дублирования комментариев группы при многократном запуске CSScomb.)
6. Если вы чувствуете себя комфортно с этими изменениями, скопируйте и вставьте их полностью, чтобы заменить содержимое sort-order.js, Вы можете редактировать дальше, чтобы удовлетворить ваши потребности. Сохранить.
   Примечание. По сути, эти изменения расширяют каждый отсортированный объект дополнительным свойством, которое содержит комментарий CSS, необязательно предоставленный вами в настройках пользователя. Я покажу вам, где добавить комментарии на следующем шаге.
7. Теперь вы готовы добавлять комментарии по группе. В меню Sublime Text выберите Preferences > Package Settings > CSScomb > Settings – User, Если вы еще не настроили свои собственные настройки, вы можете начать с копирования содержимого Settings – Default в Settings – User,
8. В файле настроек пользователя найдите "sort-order" имущество. Это либо массив имен свойств, либо массив массивов имен свойств. По умолчанию CSScomb добавит пустую строку между вложенными группами массивов, но мы изменили файл, который делает это.
9. Теперь вы можете при желании добавить комментарий в качестве первого свойства любого вложенного массива. sort-order.js Файл обнаружит это и выведет в начало группы. Если комментарий не определен, вместо него выводится пустая строка по умолчанию.

Пример настроек пользователя:

"sort-order": [
    [
        "/* LAYOUT */",
        "position",
        "z-index",
        "top",
        "right",
        "bottom",
        "left"
    ],
    [
        "/* DISPLAY */",
        "display",
        …
        "flex-align"
    ],
    [
        "/* TYPOGRAPHY */",
        "font",
        …
        "line-height"
    ],
    [
        …
    ]
]

Перед запуском CSScomb:

.selector {
    font-family: Arial;
    line-height: 1;
    position: relative;
    display: block;
    background-color: red;
}

После запуска CSScomb:

.selector {

    /* LAYOUT */
    position: relative;

    /* DISPLAY */
    display: block;

    /* TYPOGRAPHY */
    font-family: Arial;
    line-height: 1;

    background-color: red;
}