Changing the order of concatenation of stylus files in Brunch

Question

I have Brunch compiling Stylus for a Backbone.js app and I can't seem to figure out how to manipulate the order. I've read the documentation, but I haven't been able to get any further. The files always get concatenated in alphabetical order, and what's worse, if I use an @import command in a given stylus file, that file will get concatenated both where I've added it as well as where it would appear alphabetically.

My config.coffee file looks like this:

stylesheets:
  joinTo:
    'assets/stylesheets/app.css'
  order:
    before: [
      'vendor/styles/bootstrap.less'
    ]
    after: [ 
      'vendor/styles/helpers.css'
    ]

My folder structure looks like this:

|__details.styl
|__footer.styl
|__global.styl
|__header.styl

How can I

1. Omit certain files that I'm manually importing?
2. Specify my file order, e.g. global, details, header, footer?

I've tried to change the order in the config file by trying

  order:
    before: [
      'app/styles/global'
      'vendor/styles/bootstrap.less'
    ]

but this yielded no change.

I know I could just rename the files to be something like a_global and z_footer, but that's obviously hacky and it also doesn't solve my file omission problem. I'd also like to take advantage of the stylus index import ability so I can better organize my styles. However, if I were to do that now, while it works from a stylus perspective, those files are also getting concatenated to app.css in the alphabetical order of their parent directory.

Answer 1

Files that start with _ are ignored by compilers.

Which means, you can do

@import _first
@import _second
@import _third

in your main stylus file and _first etc will be added only once to result.