How do I configure MVC's style bundling order?

Question

My web app is using a large icon set with jquery-ui and jqgrid.
In order to easily maintain the changes to the CSS to accommodate the larger icons when upgrading jquery-ui or jqgrid I have a separate CSS file where I have a bunch of overrides.

As you can imagine this override file MUST be included after the jquery-ui stylesheet and the jqgrid style sheet.

I put all my stylesheets into a bundle like so

bundles.Add(new StyleBundle("~/Content/dark-hive/allstyles").Include(     "~/Content/dark-hive/jquery-ui-1.8.23.custom.css",     "~/Content/ui.jqgrid.css",     "~/Content/jquery-ui-fixes.css",     "~/Content/icons.css",     "~/Content/site.css")); 

But it is being rendered like so!

<link href="/Content/dark-hive/jquery-ui-1.8.23.custom.css" rel="stylesheet"/> <link href="/Content/jquery-ui-fixes.css" rel="stylesheet"/> <link href="/Content/ui.jqgrid.css" rel="stylesheet"/> <link href="/Content/icons.css" rel="stylesheet"/> <link href="/Content/site.css" rel="stylesheet"/> 

How can I configure my bundle to render in the correct order?

Update
Ok, this is dumb but it worked.

No matter what I did the files would always render incorrectly. So I tried something stupid and added jquery-ui-fixes.css first and jquery-ui-1.8.23.custom.css last.

Suddenly my order is

<link href="/Content/jquery-ui-fixes.css" rel="stylesheet"/> <link href="/Content/dark-hive/jquery-ui-1.8.23.custom.css" rel="stylesheet"/> <link href="/Content/ui.jqgrid.css" rel="stylesheet"/> <link href="/Content/icons.css" rel="stylesheet"/> <link href="/Content/site.css" rel="stylesheet"/> 

I renamed my javascript file to jqueryuifixes.css and now it's order is preserved in the lower js files.

I'm thinking that if a stylesheet has a - in the name it gets prioritized first for some reason and it's order is maintained with other files with a - in it.

If anyone can explain this I'll give them the check.

Answer 1

If you include each file individually, the bundle will respect your order...

var bundle = new Bundle("~/Content/dark-hive/allstyles", new StyleBundle());            bundle.Include("~/Content/dark-hive/jquery-ui-1.8.23.custom.css"); bundle.Include("~/Content/ui.jqgrid.css"); bundle.Include("~/Content/jquery-ui-fixes.css"); bundle.Include("~/Content/icons.css"); bundle.Include("~/Content/site.css"); bundles.Add(bundle); 

UPDATE

Even using explicit order, you'll find that there is a rather handy built-in ordering system that orders specifically named files first over all others. To completely clear this out, you can use:

bundles.FileSetOrderList.Clear(); 

And you can add your own custom ordering using:

BundleFileSetOrdering ordering = new BundleFileSetOrdering("My Order"); ordering.Files.Add("jquery.js");  bundles.FileSetOrderList.Clear(); bundles.FileSetOrderList.Add(ordering); 

Essentially, there is a massive built-in list of files that will get put in a certain order before any file that isn't in the list - but these options let you take control.

Answer 2

You can create your custom bundler and override OrderFiles method

public class CustomBundleOrderer : IBundleOrderer {     public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)     {         return files;     } } 

then pass your css files in the order you would like them to be bundled

var bundle = new StyleBundle("~/Content/dark-hive/allstyles") {     Orderer = new CustomBundleOrderer() };  bundle.Include(     "~/Content/dark-hive/jquery-ui-1.8.23.custom.css",     "~/Content/ui.jqgrid.css",     "~/Content/jquery-ui-fixes.css",     "~/Content/icons.css",     "~/Content/site.css");  bundles.Add(bundle);