title: Separating app and vendor css in Brunch
body: <p>My Brunch template compiles all my code into <code>app.js</code> and all third party dependencies into <code>vendor.js</code> (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:</p>
  
  <blockquote>
    <p>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)</p>
  </blockquote>
  
  <p>from a configuration file (config.cofee) that looks like this:</p>
  
  <pre><code>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)/
  </code></pre>
  
  <p>If I instead just strip out the two lines for stylesheets and put this single line in its place it works without error:</p>
  
  <blockquote>
    <p>'stylesheets/vendor.css': /^(app|bower_components|vendor)/</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>In case the question comes up ... the version of brunch I'm using is 1.7.6.</p>