CSS code breaking when bundled by RR

[tadeumaia]

After some investigation I found that the following code break my website when bundled by RR. Have you seen this problem before? without the following code it works perfectly, and with it and RR off it's also fine.

I just noticed thar RR removes the ending ";" from the second block, no idead if this would break the code.

@-webkit-keyframes greenBt { from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #7e7e7e; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #7e7e7e; } }

@-webkit-keyframes orangeBt { from { background-color: #FF5C00; -webkit-box-shadow: 0 0 9px #7e7e7e; } 50% { background-color: #D45500; -webkit-box-shadow: 0 0 18px #D45500; } to { background-color: #FF5C00; -webkit-box-shadow: 0 0 9px #7e7e7e; }

--RR code-- @-webkit-keyframes greenBt{from{background-color:#749a02;-webkit-box-shadow:0 0 9px #7e7e7e;}50%{background-color:#91bd09;-webkit-box-shadow:0 0 18px #91bd09;}to{background-color:#749a02;-webkit-box-shadow:0 0 9px #7e7e7e;}}@-webkit-keyframes orangeBt{from{background-color:#ff5c00;-webkit-box-shadow:0 0 9px #7e7e7e}50%{background-color:#d45500;-webkit-box-shadow:0 0 18px #d45500}to{background-color:#ff5c00;-webkit-box-shadow:0 0 9px #7e7e7e}} }

[mwrock]

Hmm. Should be valid css to leave off the last semicolon before the closing brace. The ajax minifier is probably doing that on its own. When you say the website is breaking, are you getting any kind of error or are things just not rendering correctly? Can you provide some more details on what's going wrong? Definitely want to get this fixed for you. Thanks!

[tadeumaia]

Hey Matt,

I uploaded to the dev env, the version using RR that I'm seeing the problem.

here is the develop server where the problem is happening: http://dev.helpsaude.com/ You could see the website with no problem here : www.helpsaude.com

there is 2 css being reduced together common.css and home.css, the snipet that causes the problem is at the common.css

[mwrock]

Thanks very helpful. Hopefully I'll have a fix after work tonight or tomorrow morning. Thanks!!

[mwrock]

Just pushed the fix to this (v1.7.105). The issue was thatthere was a media rule inside of a css file whose link tag already had a media type. common.css has a media type of "all" and contains a media rule @media screen { ... } I believe that technically this is not supported. RequestReduce, in order to bundle CSS with different media types together will wrap the contents of the css file in a media rule. So common was getting wrapped in @media all { ... }. The MS Ajax Minifier was then dropping the final closing brace of the @media all which pretty much broke everything. If the media type is all, there is really no need to wrap the css and I save a few bytes as well so I simply added logic to forego the wrapping if the media type is all.

[tadeumaia]

Hey, thanks for the explanation and the fix ;) I'm going live with the website with request reduce this week, it's not msdn heavy traffic but we have some traction.

[mwrock]

Good to hear and congrats/good luck with your launch!