GIT and merge conflicts with CSS. Why does this cause a conflict?

Question

We seem to run into a lot of merge conflicts with our scss files on our project. What's odd is that these are often not apparently in conflict. For example, I just added some new CSS to a file, created a pull request, and we get this error:

<<<<<<< develop
=======
    ...the new css...
>>>>>>> bugfix/OurBranch...

I'm confused as to why git thinks there's a conflict here. It's just additional CSS, not anything being replaced. As the conflict error shows, there's not even code to show that's in conflict. Not even a blank line.

Is this an issue with our configuration? Is GIT just really bad at merging css?

Answer 1

There was likely something at that location originally, so it's reading a deletion on one branch and an addition on the other, but can't quite resolve them.

If you run this while you are in the conflicted state:

git checkout --conflict=diff3 <path>

It will check out a version of the file with the conflict markers showing the source, destination, and the common ancestor, so you can see what happened.

This will output something like:

<<<<<<< develop
||||||| merged common ancestors
    ...the old css...
=======
    ...the new css...
>>>>>>> bugfix/OurBranch...

You can also make diff3 your default conflict style formatting by running:

git config --global merge.conflictstyle diff3

Answer 2

I was having that problem with CSS specifically. Best guess was different line endings or tab vs spacing in multiple IDEs was the cause of the problem.

However, we found using GIT Rebase on a Pull instead of GIT Merge (default) solved the problem.

This may not be a great solution for ALL your GIT content but it did solve lots of problems with CSS.

You can do this time by time git pull --rebase

Or set every pull to use rebase git config --global pull.rebase true

Just be sure you understand what GIT Rebase does before using this.