10

Careers is looking bad right now. No errors in the console, but the following files have no content:

The CSS on another subdomain works fine though:

11

So we just pushed a fix, sorry about that! Here's a breakdown of what went wrong...

We upgraded our local version of lesscss from 1.7 to 2.2. Everything worked just fine. This just uses the in-browser version of LESS.

Next up we updated the version in our build process. We use a custom nodejs build tool called capn-crunch that compiles and minifies our LESS and JS using a heavily parallelised engine. We use lesscss to compile LESS followed by clean-css to minify the result.

It seemed to work just fine - the build tool executed successfully with no errors. We checked out the development environment and it looked all good. Then we pushed to production. Oh noes! Everything is broken! Why is it OK on dev?

Turns out an old friend Monsieur Le Cache bit us; dev was not in a good way either.

So what was the problem?

Between 1.7 and 2.2 there was a minor breaking change in the lesscss API:

From this:

        less.render(fileData, options, function (e, css) {
            if (e) {
                throw e;
            }

            file.data = new Buffer(css);
            next(null, file);
        });

To this:

        less.render(fileData, options, function (e, output) {
            if (e) {
                throw e;
            }

            file.data = new Buffer(output.css);
            next(null, file);
        });

Note the change to the second argument in the event handler. When we instantiated the Buffer to pass the result to the next item in the pipeline it passed in an object. Turns out Buffer doesn't throw in this case and even then we wouldn't have handled the error correctly.

To fix this issue we've taken a two-pronged approach.

Firstly, improve the error handling in the LESS handler:

        var error = null;
        less.render(fileData, options, function (e, output) {
            if (e) {
                error = e;
                return;
            }
            try {
                file.data = new Buffer(output.css);
            }
            catch (e) {
                error = e;
                return;
            }

            if (error != null) {
                throw error;
            }

            next(null, file);
        });

        if (error != null) {
            throw error;
        }

This ensures errors bubble out of the pipeline correctly.

Secondly, add an integration test that verifies whether some common CSS and JS has been generated correctly (in this case checking for a zero-length file). This will prevent breaking changes like this making it out to production.

11

All over it, will be fixed shortly.

  • 1
    Time for a spin of the Wheel of Blame? ;-) – Shadow The Curly Braced Wizard Jan 14 '15 at 14:50
  • 1
    It's been spinning for 10 minutes, keeps coming up with the same person :) – Nick Larsen Jan 14 '15 at 14:51
  • uh oh. Not me again? – Shadow The Curly Braced Wizard Jan 14 '15 at 14:53
  • As an information, external job buttons also has no css style :) – BendEg Jan 14 '15 at 14:55
  • @Sha I blame you cuz you provided the unofficial wheel of blame. It will give borked results, use the original one :D – nicael Jan 14 '15 at 15:09
  • I will keep on spinning till it's the comunity's fault, guess everybody does that :-) – BRHSM Jan 14 '15 at 16:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .