Separating app and vendor css in Brunch

Question

My Brunch template compiles all my code into app.js and all third party dependencies into vendor.js (a pretty standard approach). I'd like to do the same with CSS and it used to work but as I moved to using Bower something stopped working and I now get the following error:

Error: couldn't load config /path-to-root/config.coffee. SyntaxError: unexpected { at Object.exports.loadConfig (/usr/local/share/npm/lib/node_modules/brunch/lib/helpers.js:448:15)

from a configuration file (config.cofee) that looks like this:

files:
    javascripts:
      joinTo: 
        'javascripts/app.js': /^app/
        'javascripts/vendor.js': /^(bower_components|vendor)/
        'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/

    stylesheets:
      joinTo:
        'stylesheets/app.css': /^app/
        'stylesheets/vendor.css': /^(bower_components|vendor)/

If I instead just strip out the two lines for stylesheets and put this single line in its place it works without error:

'stylesheets/vendor.css': /^(app|bower_components|vendor)/

I've been sort of living with this but this is causing more and more problems and I'd like to get it sorted. Any help would be greatly appreciated.

In case the question comes up ... the version of brunch I'm using is 1.7.6.

Answer 1

I am baffled but I think Paul's suggestion that maybe a special character had gotten into the file seems likely. I now have it working with a configuration that appears to be identical to what was NOT working earlier. Here's the full configuration file:

sysPath = require 'path'

exports.config =
  # See http://brunch.io/#documentation for documentation.
  files:
    javascripts:
      joinTo:
        'javascripts/app.js': /^app/
        'javascripts/vendor.js': /^(bower_components|vendor)/
        'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/

    stylesheets:
      joinTo: 
        'stylesheets/app.css': /^app/
        'stylesheets/vendor.css': /^(bower_components|vendor)/

    templates:
      precompile: true
      root: 'templates'
      joinTo: 'javascripts/app.js' : /^app/

      modules:
        addSourceURLs: true

  # allow _ prefixed templates so partials work
  conventions:
    ignored: (path) ->
      startsWith = (string, substring) ->
        string.indexOf(substring, 0) is 0
      sep = sysPath.sep
      if path.indexOf("app#{sep}templates#{sep}") is 0
        false
      else
        startsWith sysPath.basename(path), '_'

Answer 2

It's pretty weird but I had to do the following (add / at the end) for the same case

stylesheets: {
    joinTo: {
        'css/vendor.css': /^(vendor|bower_components)\//,
        'css/styles.css': /^app\/css\//
    }
}