Как автоматически улучшать стиль CSS перед коммитом?

Question

[lil_web]

У меня есть проект на React. Если быть точным, я создал его по шаблону gatsby-starter-default.

Перед коммитом изменённые файлы прогоняются через Prettier. Я сделал это с помощью lint-staged, husky и pretty-quick:

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

Теперь я хочу, чтобы изменённые SASS-файлы перед коммитом становились по гайдлайнам (например, с правильным порядком цсс-свойств) — прогонялись через CSScombJS.

Так делают в Яндексе. В своей статье они приложили следующий Гит-хук. Но как его добавить, не сломав Husky с Prettier? Может есть отдельный плагин для Husky?

#!/usr/bin/env bash

PATCH_FILE="working-tree.patch" 
NPM_BIN="./node_modules/.bin"

function cleanup {
    exit_code=$?
    if [ -f "$PATCH_FILE" ]; then
        patch -p0 < "$PATCH_FILE"
        rm "$PATCH_FILE"
    fi
    exit $exit_code
}

#Прибираемся при выходе из скрипта
trap cleanup EXIT SIGINT SIGHUP

# Создаем  патч
git diff > "$PATCH_FILE" --no-prefix
# Сбрасываем не застэйдженный изменения
git checkout -- .

# получаем список файлов в которых были изменения, которые мы хотим закоммитить
git_cached_files=$(git diff --cached --name-only --diff-filter=ACMR | xargs echo)
if [ "$git_cached_files" ]; then
    #Собственно натравливаем CSScomb.js
    $NPM_BIN/csscomb -v -l $git_cached_files || exit 1
fi

Или можно сделать так, чтобы Prettier заодно расставлял цсс-свойства в нужном порядке? А как это настроить?

Подскажите, пожалуйста.

UPD
Спасибо за ответы. В результате, я создал шаблон для Gatsby c Typescript, SCSS and Prettier & Stylelint Pre-commit Hook: github.com/ilyasidorchik/gatsby-starter-default-x

Answer 1

[Алексей Шелементьев]

У меня в проектах это так сделано:

"husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "!(_*).scss": [
            "csscomb --tty-mode",
            "stylelint --fix --color --config ./.stylelintrc",
            "git add"
        ],
        "*.js": [
            "eslint --fix --color",
            "prettier --write",
            "git add"
        ]
    },

И все отлично работает. Файлы с префиксом _, например _filename.scss, csscomb пропускает.

P.S. можно по-порядку указать, какие инструменты использовать перед коммитом, т.к. это просто cli-интерфейс, как будто командная строка.

Comments

[lil_web]

Алексей, спасибо, получилось.

Получается, придётся отказаться от pretty-quick, потому что нельзя два скрипта в pre-commit?

Мой финальный вариант в package.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "!(_*).scss": [
    "csscomb --tty-mode",
    "git add"
  ],
  "src/**/*.{js,jsx,ts,tsx,json}": [
    "prettier --write",
    "git add"
  ]
}

Answer 2

[Максим Морев]

Prettier не умеет расставлять порядок свойств. Это вообще очень простой инструмент, который заботится только о базовом форматировании.

То, что вам нужно, реализуется средствами stylelint и его плагина stylelint-order.
Вот очень толковая статья, после прочтения которой вопросов не должно остаться.

Comments

[Алексей Шелементьев]

Вообще-то автор спрашивал как прикрутить Csscomb, а не Stylelint настроить.

[profesor08]

Алексей, не надо исключать вероятность выбора автором неверного пути

[Максим Морев]

Алексей, обычно нам надо просто решить задачу, и мы считаем, что её надо решать вот этим инструментом. А инструментов целая гора.

CssComb - умер в 2017 (вроде как с мая 2019 снова какие-то коммиты есть, но это капля в море). Домен даже продлить забыли :)
Stylelint обновляется каждый день, размер сообщества вообще несопоставим.
Stylelint в любом случае на проекте уже есть - вряд ли кому-то важен порядок свойств и неважно всё остальное.

Я лично у CssComb перед stylelint ни одного преимущества не вижу (ну кроме того, что у автора может быть уже готовый конфиг, что когда-то его использовали в Яндексе и вообще оно "наше").

В твоём ответе на вопрос ты одну и ту же задачу решаешь двумя разными инструментами, когда она может быть решена одним.
Работает ли? Работает... Правильно ли делать так? Ну такое...

[Алексей Шелементьев]

SeaInside,
1) csscomb хоть и умирает, но он работает. Css-qmpacker тоже умер, но им все пользуются!
2) csscomb изначально создавался для "причёсывания" стилей на проекте, в то время как stylelint - инструмент для линтинга, и ни разу не для форматирования. Вы же, я надеюсь, не сравниваете функционал Prettier и ESLint только потому, что это инструменты для JS?
3) в своих проектах я настроил eslint по назначению - проверять ошибки в файлах стилей и устранять их в случае возникновения, а csscomb настроил по его прямому назначению - форматировать стили так, как изначально задумал. Если бы stylelint создавался для форматирования стилей, то в нем было бы много возможностей по созданию своего конфига, но там этого почему-то нет, так же, как нет возможностей Prettier'а в ESLint.

[Максим Морев]

Алексей, в ответ на (2) - есть два инструмента. Один решает узкую задачу и пилится двумя людьми в свободное время. Другой пилится всем миром и полностью, я подчёркиваю, полностью покрывает функционал первого инструмента. Для меня совершенно очевидно, что первый инструмент должен уйти в небытие, сколько бы к нему не было тёплых чувств. Открой вот node_modules. Вот это происходит в том числе потому, что люди тащат в проект много узкоспециализированных вещей вместо того, чтобы пользоваться хоть иногда чем-то универсальным.

"stylelint - инструмент для линтинга, и ни разу не для форматирования"...
Какая разница, для чего инструменты создавались изначально? Важно, что они из себя представляют сейчас. Сейчас есть флаг --fix, который и ты используешь, и это удобно.
Веб изначально создавался для текстовых документов, куда ты со своими картинками?

Ладно, короче, это никуда не ведёт.
Ты топишь за то, что надо иметь в кармане штопор, три ножа, напильник и открывашку. Я топлю за то, что нужно пользоваться швейцарским ножом, если тебе всё это реально пригождается, тем паче что швейцарский нож острее обычного в данном случае.
У нас каждый при своём останется, а ТС и интересующиеся пусть сами выводы делают. Успехов! :)

[lil_web]

Максим Морев, спасибо вам за ответы. Я создал шаблон для Gatsby со Stylelint, который следит за порядком CSS.

[Максим Морев]

lil_web, я рад, что помогло, и ещё больше рад, что вы приняли оптимальное решение задачи, не привлекая ненужных (и устаревших) решений. :)