L
L
lil_web2020-01-08 19:43:49
css
lil_web, 2020-01-08 19:43:49

How to automatically improve CSS style before commit?

I have a React project. To be precise, I created it from a template gatsby-starter-default.
Changed files are run through Prettier. I did it with lint-staged, huskyand pretty-quick:

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

Now I want the modified SASS files to become according to the guidelines before the commit (for example, with the correct order of the css properties) - run through CSScombJS.
This is how they do it in Yandex. In their article , they attached the following Git Hook. But how to add it without breaking Huskywith Prettier? Is there a separate plugin for 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

Or is it possible to make Prettier arrange the css properties in the right order at the same time? And how to set it up?
Tell me please.
UPD
Thanks for the replies. As a result, I created a template for Gatsby with Typescript, SCSS and Prettier & Stylelint Pre-commit Hook: github.com/ilyasidorchik/gatsby-starter-default-x

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey, 2020-01-09
@lil_web

In my projects it's done like this:

"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"
        ]
    },

And everything works great. Files prefixed with _, such as _filename.scss, are ignored by csscomb.
PS You can specify in order which tools to use before the commit, because it's just a cli interface, like a command line.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question