Git Hooks and CSS Preprocessors

By  on  

For one of my recent projects, I've decided to use Stylus.  I'm accustomed to using Sass but that would require adding Ruby to our stack -- Stylus is Node.js-based, and since I'm already using Node.js for a few other tasks, I thought I'd give Stylus a try.  Since I'm heavily developing the front-end of the project, I'm either fixing bugs or creating new features, all of which requires heavy CSS edits.  The problem I'm running into is that I'm forgetting to reprocess stylesheets when I switch branches, so pages start to look funky and I start having heart attacks.

Seeing as my memory is faulty, I've been looking for an automated solution to this problem.  Stylus has a "watch" feature but I've found it slow and I'm impatient.  Next I turned to git hooks.  I've always heard about them but never spent much time with them -- big mistake.  To solve my branch-switching, preprocessor blues, I created a post-checkout hook.  Bang!

The first step is placing a file called post-checkout (no extension) in the project's .git/hooks directory:

cd .git/hooks && touch post-checkout

Next up is running my compile script.  The compile script is an external file (it's hooked into our build process) so all I need to do is run it:

#!/bin/sh
./scripts/compile-scripts

In case you want to see my CSS compile script, here it is:

#!/bin/sh

BASEDIR=$(dirname $0)
CSSDIR=$BASEDIR/../media/redesign/css/

if [ ! -d "$CSSDIR" ]; then
	mkdir $BASEDIR/../media/redesign/css/
fi

for file in main print wiki demo-studio profile search zones home
do
	stylus $BASEDIR/../media/redesign/stylus/$file.styl --out $BASEDIR/../media/redesign/css --compress
done

I probably don't need to tell you how awesome git hooks are, but in the case of instant CSS preprocessing, git hooks are a big help!

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Ana Tudor’s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • By
    Generate Dojo GFX Drawings from SVG Files

    One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML...

Discussion

  1. I think you might be doing it the hard way :) If you’re on node.js, use grunt tasks for these compiling on the fly workflow. Check out my boilerplate’s grunt tasks: https://github.com/constantx/basement

  2. Hichem

    That’s awesome constantx , that might be a good idea for another blog post i think :)

  3. Small caveat: The hook script must be executable for git to recognize it:

    chmod +x .git/post-checkout
  4. Carl

    Nice! Hopefully there is something similar for my git workflow. I have one main develop branch and several different branches (projects) in which i usually merge the changes from the develop branch. After a merge in each of the project branches my sass build script should be running and create the individual project styles. But it should only be dine if there are no merge conflicts.
    I know there is a merge hook but how can i be sure there merge was conflict free?

  5. Thanks for sharing! For a moment I’ve wondered how you handle your processed CSS files if you generate them only after checkout… but I guess you don’t version control them, then.

    We keep our generated files in version control and that’s why I’ve put the compilation step in a pre-commit hook. But yes, I’ve also found git hooks the way to go here :-)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!