Bundling files in different directories?

Question

I recently came across an issue on a website where the styling on a page was really messed up but only in IE. My boss told me it is likely to be because the CSS Bundle being rendered contains CSS files from different directories, so I checked and it did. It was similar to the below:

    bundles.Add(new StyleBundle("~/path/subpath/all").Include(
                 "~/path/subpath/filename.css",
                 "~/path/subpath/filename1.css",
                 "~/path/subpath/filename2.css",
                 "~/path/subpath/filename3.css",
                 "~/path/subpath/anotherSubPath/filename.css",
                 "~/path/subpath/anotherSubPath/filename1.css",
                 "~/path/aDifferentSubPath/filename.css"));

He said Bundling couldnt work like this, you must only have Files of the same directory in a Bundle, so I split them out like the below:

bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             "~/path/subpath/filename.css",
             "~/path/subpath/filename1.css",
             "~/path/subpath/filename2.css",
             "~/path/subpath/filename3.css"));

bundles.Add(new StyleBundle("~/path/subpath/anotherSubPath/all").Include(
             "~/path/subpath/anotherSubPath/filename.css",
             "~/path/subpath/anotherSubPath/filename1.css"));

bundles.Add(new StyleBundle("~/path/aDifferentSubPath/all").Include(
             "~/path/aDifferentSubPath/filename.css"));

This worked and fixed our issue in IE. OK so now onto my questions:

• Was my boss correct? Can you not bundle files from different folders?
• If he was correct, why would this only break in IE? And why must you only Bundle files from the same directory?
• If he was not correct what could have been the issue? And why would splitting out the bundle have fixed it?

Answer 1

There is common issue with bundling name and folder, when your css files use relative path to static files like images, fonts etc.

For example you have:

 bundles.Add(new StyleBundle("~/path/subpath/all").Include(
             ...
             "~/path/subpath/anotherSubPath/filename1.css"));

and in your filename1.css you use background: url(image.jpg) and usually this image is located in same folder as filename1.css which is ~/path/subpath/anotherSubPath/image.jpg. Using bundels like below make browser looks for non-existing file ~/path/subpath/all/image.jpg. Maybe that is the reason for separating bundles.

Answer 2

For older versions of IE, at least < 10 there are some known restrictions

The number of CSS and Script files IE can load - this might be an issue if you're running the site in Debug mode where the bundles don't get bundled.

If that's not the case then do you have more than 4,096 selectors in a file???

Internet Explorer CSS limits

Answer 3

Your boss sounds awesome! Firstly for CSS paths are relative to the CSS file, so I suspect that is why he advised you to change that anyway.

But CSS length can also be an issue and so was probably the root cause in this case.

Unfortunately there's a few quirks in browsers to watch out for, such as this CSS one, or images sizes on Apple devices (ran into to that with sprite sheets before). You boss sounds like the kind of dynamic, switched on guy that would know that.