Git Merges Gone Wild: When Sass Compiler Settings Diverge

Here's one of those problems you can file away under the umbrella of DevOps problems nobody really wants to think about. In my case, I stumbled accross this problem while looking at two branches with respective SASS changes--although, this can logically happen with any code that needs to be compiled to an output file and has different standards for how to do that. Today I hit a merge conflict, and my merge tool was telling me that every line of local and remote were completely different. It turned out my coworker and I were compiling our SASS to different output standards; the end result was that my merge tool (GitKraken) crashed and I was effectively unable to see which lines of code had actually diverged. Here's how to stop this from happening to you!

Background: Git Merge Gone Awry

There's not a lot to this: my coworker has been working on her branch; I've been working on my own. The time has come for me to merge my branch into my coworker's. I checkout my coworker's branch to run a git merge and this is what happens: the _overrides.scss file merges successfully but the output files fail. Those output files are compiled by a little program I run called Koala--a SASS compiler. Normally, a failed merge isn't a big deal: I'd open up GitKraken (which has a highly intuitive merge tool), fix the conflict and move on with my day.

a git merge conflice
Arrrrrrrgggghhhhh...

Unfortunately, I wasn't able to resolve the conflict in the output files because opening GitKraken's resolution tool caused the application to crash. Despite all it's awesome glory, this has been a pretty consistent bug in GitKraken's versioning for as long as I've been using it: diffing long files with long changes can basically kill the app. After banging my head against a wall for longer than I'd care to admit, I decided to hit the command line and run git mergetool. My default merge tool is Meld (which also has a somewhat intuitive UI). It didn't take me long to see what the problem was. I didn't capture the diff in Meld before resolving the issue, but here are a few snapshots from the command line. The problem was in how my coworker was compiling her style.css file with Koala. Here's a look at a few lines from the end of the file on her branch with the help of the tail command (the $_is shorthand for the argument from a previous command, in this case style.css). Take careful note of the closing brackets:

using head to look at code in a file
"Strange things are afoot at the Circle K"

Now let's have a look at the same file on my branch--note again the closing brackets.

using tail to look at the last few lines of code in a file
... *smh* ...

My CSS is getting compiled with the closing bracket on its own line; this basically means that my style.css file will be a couple thousand lines longer than my coworker's, and also means there's literally no possible way for our versions to line up in a diff. This also means that looking for the actual code changes that might need remedying is like finding a needle in a haystack -- any merge tool will indicate that every single line is different.

The Fix: Aligning Output Style

It's obvious what needs to happen. I need to use the same output style as my coworker. We both use Koala, but we obviously didn't check to see whether our output settings matched. After playing around with output styles, I can see that my coworker was using a "compact" output style:

settings in Koala SASS compiler for style.css output
Success!

I initially aborted the merge, recompiled my own _overrides.scss with the updated settings, committed those changes on my own branch and then tried the merge again: nothing but smooth sailing from there on!

Tags