/ in URL query makes CSS @import and file paths fail

I am currently implementing CSS file bundling, which uses a virtual path to a PHP file, as such:

   ~/bundle/bundle.css&cssFolders=... => ~/bundle/bundle.php&type=css&cssFolders=...

Since I provide paths to my CSS folders, a bundle URL may look like this:

   ../bundle/bundle.css&cssFolders=css/,shared/css/

My bundle file then builds the resulting CSS content by importing all files that it finds, for instance:

   @import url("../css/x.css");
   @import url("../shared/css/y.css");

Thus solution, however, did only work in some cases, while failing for other. I was confused…then I found the solution.

The / chars in the URL query makes the @import statement fail, since it seems to count all / in the URL, not just all the / in the path excluding the query. This is quite understandable, since .css files are not really meant to handle query variables.

In this case, however, we have  a virtual .css file that handles query variables, which is why we need to solve this problem.

The solution, in this case, is to count the number of / in the query variable cssFolders and add an extra ../ for each / in the import statements. I will not show any code examples here, you will find it in the next post.

Advertisements