Documentation / ProcessImports()

[Jashan Chittesh]

Hi there,

I'm very new to SquishIt and I think it's really awesome - thank you for creating and sharing this!!!

But there's one thing I stumbled over:

We have one CSS-file that includes a lot of other CSS-files. So I thought when I do Bundle.Css().Add("ThatCssFile.css").Render(...) it would just work. But that just minified ThatCssFile.css and would still have all the imports instead of inlining them. So, I looked at the possible methods and found .ProcessImports() which I would have assumed is what's necessary to do what I need.

But that doesn't seem to be the case - with .ProcessImports() before .Render(...), I'm still getting the file with the imports instead of having them inlined in the minified CSS.

I've looked for a little while for some sort of API documentation that would probably explain how precisely to use this ... but so far, I only found the blog posting with the little tutorial (which was very helpful - but just didn't answer this specific question).

So ... am I misunderstanding what this is supposed to do? Or am I doing it wrong? Or is this a bug?

Sunny regards,

Jashan

[Alex Ullrich]

Ok a couple questions.

1. Are you running in release mode?  If not, SquishIt doesn't really do anything.

2. Did you restart the app pool after you added the call to .ProcessImports()?  If not SquishIt is probably using the cached copy, so restarting it might help (if running from visual studio you may need to kill the cassini server from task manager).

Anyway this should be working with ProcessImports (see this test: https://github.com/jetheredge/SquishIt/blob/master/SquishIt.Tests/CSSBundleTests.cs#L733-758) 

If it doesn't work in release mode with an empty bundle cache, post your code and CSS here it may be a bug.

Let me know if you have any questions.

Alex

[K. Adam White]

Jashan -

I think this is a misunderstanding about how @import works within CSS -- the behavior you are seeing is working as designed.

CSS @import is built around providing a URI for additional stylesheets (https://developer.mozilla.org/en-US/docs/CSS/@import), which is designed to be requested by the browser itself as a separate HTTP request. As a result, CSS @import is not recommended for general use, because it increases the number of files your web page requires in order to load (and more files mean slower load speeds). Unfortunately for your case, since this is a native CSS feature there is no way for SquishIt (or any CSS-compliant minifier) to properly use those @import statements to inline your styles. For that, you'd need a custom tool.

There are two ways you can attack this problem, both of which result in a single, combined CSS file and therefore in a faster page load speed:

First, you could include the LESS pre-processor, re-name all your stylesheets from .css to .less, and call it a day. Unlike CSS, LESS will go fetch and include those files into the final document. Since CSS is valid less, just making this change alone would get you what you want---for more information, see the "Importing" section under the LESS language reference here: http://lesscss.org/#-importing

Finally, perhaps the conceptually simplest response to the problem would be to stop using @import, and to use .Add("") statements instead. @import was designed for an age that did not yet have tools like SquishIt, and SquishIt does effectively the same thing through bundling, without any of the performance hit.

Hope that helps, either of those options should get you to where you need to be!

K. Adam White
kadam...@gmail.com
401.575.7829

--
You received this message because you are subscribed to the Google Groups "SquishIt" group.
To unsubscribe from this group and stop receiving emails from it, send an email to squishit+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Alex Ullrich]

While I agree with the recommendation to use .Add(), ProcessImports *should* be working on normal import statements.  If it is not working after checking the things I listed above, it is probably a bug.  Let me know if its still not working, and try to post bundle setup code and your actual CSS if possible - there might be some path weirdness that we aren't handling right.