Hacktoberfest 3: How a one line fix took me a whole week

Discovery

How I found this bug particular bug was a bit different than the previous two: I didn’t set out looking for it on Github. Instead I came about it while working on a project for a family member. In VS Code, I was working with a very large CSS file which made use of a CSS Grid Layout. This meant that the grid-template-areas rule. This rule takes multiple strings separated by a space to form a general layout and position previously defined elements. It’s really awesome. Most devs and designers use the following format:

grid-template-ares:
    "aaa bbb ccc"
    "aaa ddd ddd"
    "fff fff fff";

This allows the rows and columns of the grid to be visible from the code itself, giving a sort of preview of what the layout will look like when rendered.

The issue is VS Code doesn’t actually offer proper CSS formatting out of the box. Instead, you need to install a plugin to enable some sort of CSS formatting or autocomplete. That’s why I had the “CSS Formatter” plugin installed which enables you to SHIFT-ALT-F to auto format and clean up a CSS doc. When I hit this command, I noticed all of my grid-template-areas had been messed up and no longer followed the standard format. This is what I got:

grid-template-areas:"aaa bbb ccc" "aaa ddd ddd" "fff fff fff";

Not so readable and awesome anymore. I needed to fix it.

Digging

A cool feature that VS Code includes is the “Repository” button included on any plugin page which takes your directly to the plugin’s Github repo. After realizing I had no experience whatsoever creating VS plugins I started watching a couple of tutorials and reading the Extension API docs provided by Microsoft which were helpful, but not very helpful in understanding what would be going on inside of a formatter extension. So, I decided to just start looking through the source code on Github.

I discovered that the extension was actually just using a package called JS-Beautify which I then attempted to comb through to find out where things could be going wrong. I quickly discovered how in-depth this package went and how convoluted it actually was. Eventually though I was able to find where exactly the CSS processing was being done but even after days of trying to figure out what was wrong I still wasn’t able to pinpoint where the grid-template-areas mishap was coming from (you’ll see why soon).

I decided to see if anyone else had mentioned this issue in the JS-Beautify repo instead (there was >250 open issues here at the time).

They had.

They had also fixed it. This explained why I couldn’t find the bug, it didn’t actually exist in the code I was looking at. That still didn’t explain how it wasn’t working in the VS extension I was using (which was actually developed by a someone working at Microsoft in Switzerland).

Fixing it and feeling dumber than before

I suddenly realized that this extension hadn’t been updated or maintained in a fairly long time, which I thought made sense initially since it was just using another library / package to actually do the formatting, but I then realized that the version of JS-Beautify being used was hard-coded into the package.json file and it was very out-of-date. This was the problem

The fix itself took me about 20 seconds of Googling to find out the current stable version of JS-beautify and then updating the package.json file to include the newer, fixed version.

What I learned

I was so committed and rushed to find the source of the bug that I completely ignored the simplest possible fixes in favour of endlessly digging through code I barely understood. Instead, if I took my time and thought things through I would have likely come to the conclusion that a simple update would have fixed the issue

Links

Issue here

PR here