This got CssTidy false working with CssPreprocessing

[kijanawoodard]

Walked through the code to investigate. #15

Line 44 in Function.cs was blowing up with an NRE.

I wasn't sure whether to null check, check t.Type == TermType.String like a couple lines below or some other refactor. I took the easy way that got it working for me.

Let me know if you can fix this in the nuget release and I'll go back to the official version and get off my hack. :-)

Thanks again for working on Moth. I hope this helps.

Kijana

[kijanawoodard]

Rats. I moved a little too quickly. The page rendered with cssTidy = false and CssPreprocessing = true, so the hang was fixed.

But, the media queries are removed, so when I squeeze the page width. It doesn't change.

So (CssTidy/CssPreprocessing):
false/false gives us working media queries, but the css images are pointing at the resources directory.
false/true removes the media query styles entirely so we just get the "normal" css all the time.
true/true removes the media query directive, so the media query styles apply since they are at the bottom of the file.

I think that both CssTidy and the BoneSoft parser need updating to support media queries.

I hope this helps.

[kijanawoodard]

Did a little more investigation. It seems it's the BoneSoft Parser that's at fault.

My media query looks like this:
@media only screen and (max-width: 850px) {

If I change it to:
@media screen {

The parser grabs everything within the brackets and does it's thing.

I can see that "screen" is known and alters Token.kind value to 19.

It's as if it when it sees the "only" or the "and (max-width: 850px)", the parser chokes and empties skips the rest of the media query. I can see it going to a SynErr method.

[kijanawoodard]

It looks as though CssTidy plays it's role too.

@media only screen and (max-width: 850px) {

into

@media only screen and max-width 850px {

which I see StackOverflow posts about this saying that it breaks in various browsers.

[kijanawoodard]

With Preprocessing turned off, the css relative image urls 404 because they are pointing relative to the "resources" url of the moth request.

I used route magic to fix this:

http://haacked.com/archive/2011/02/02/redirecting-routes-to-maintain-persistent-urls.aspx

In nuget:
Install-Package RouteMagic

In RegisterRoutes (within global.asax.cs):

        var images = routes.MapRoute("content_images", "content/images/{file}");
        routes.Redirect(r => r.MapRoute("moth_images", "resources/images/{file}"))
            .To(images);

[kijanawoodard]

FYI, As a workaround, I put my media query css into a separate file (which I kind of like anyway) and don't use moth on that file. Everything else is humming away now.