django-pipeline: Why do these JS lines cause yui-compressor to crash?

Question

I have a Django app, and within the app I'm trying to bundle and minify all Javascript files and CSS files.

To do this, I'm using django-pipeline 1.2.6, and I have configured my settings file such that it uses the default YUICompressor to compress JS and CSS files. My settings file is configured like this:

...

# PIPELINE SETTINGS (for compressing/bundling css and js files)
STATICFILES_STORAGE = "pipeline.storage.PipelineCachedStorage"

PIPELINE_YUI_BINARY = "/usr/bin/yui-compressor"

PIPELINE_JS = {
    'min': {
        'source_filenames': (              
            "js/*.js",
        ),
        'output_filename': 'js/min.js'
    }
}

PIPELINE_CSS = {
    ...
}

PIPELINE = True

When I ran the command python src/foo_app/manage.py collectstatic, I got the "broken pipe" exception. I quickly realized that yui-compressor was crashing because of an issue with the JS. So I began the process of isolating the file and line of code that was causing yui-compressor to crash.

I eventually narrowed it down to two lines that define the class attribute for the buttons on a jquery popup:

    $('#some-modal').dialog({
        ...
        buttons: [
            {
                text  : 'Print',
                click : function() {
                    ...
                },
                class : 'foo-class bar-class' // <- this line
            },
            {
                text  : 'Close',
                click : function() {
                    ...
                },
                class : 'foo-class bar-class' // <- this line
            }
        ],
    });

When I remove these class definitions, yui-compressor compresses my JS just fine. However with these lines included, yui-compressor crashes.

Why would these lines cause the compressor to crash? This is valid Javascript, and this does set the class of these buttons correctly.

Answer 1

Maybe this is related with yui-compressor ES6 class keywords processing. Try to wrap class key in quotes:

change this:

class : 'foo-class bar-class' // <- this line

to:

'class' : 'foo-class bar-class' // <- this line