CSS-Minifier dos not parse media-queries properly

• Type: Bug
• Status: Closed
• Priority: Minor
• Resolution: Fixed
• Affects Version/s: 6.1.0 CE GA1, 6.1.10 EE GA1
• Fix Version/s: 6.1.20 EE GA2, 6.0.X EE, 6.2.0 CE M2
• Component/s: Theme Dev
• Labels:
  • QA-R
  • community-verifier
• Environment: Tomcat Bundle
• Branch Version/s:
  6.1.x, 6.0.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Similar Issues: Show 5 results ; ;

  LPS-1800	CSS Minifier does not import relative URLs correctly
  LPS-27842	CSS minified error for custom theme - org.jruby.embed.EvalFailedException: (SyntaxError) Expected a color. Got: transparent
  LPS-17227	CSS minifier improperly aggregates @imports within comments
  LPS-4046	Themes do not have their CSS minified in Tomcat
  LPS-25344	CSS minifier does not consider more than one style definition with the same CSS selector

The CSS-Minifier does not properly minify media queries that contain AND-conditions.

The following statement
— cut —
@media (max-width: 750px) and (min-width: 520px) {
.mydiv

{ background-color:red; }

}
— cut —

gets parsed as follows:
— cut —
@media(max-width:750px) and(min-width:520px){.mydiv{background-color:red;}}
— cut —

which renders the entire media query useless (see the removed blank between "and" and the opening bracket).
When I use firebug to manually (re-)inject the space character the query is working fine.

Deactivating the minifier ("minifier.inline.content.cache.size=0" in portal-ext.properties) works around the issue. However, this is not suitable for a production environment.

[Drew Blessing]

Hi Dennis,

Thank you for your report. As part of the community verifier program I am taking a look at this issue.

[Drew Blessing]

I am able to reproduce this on 6.1 GA1.

Steps to reproduce:
(You can reproduce this by using a custom theme with CSS files, but I found it easiest to reproduce using the interface as so)

1. Go to Manage -> Page
2. Select "Look and Feel"
3. Scroll to the bottom and insert custom CSS in the text box (Use the query Dennis inserted in the description)
4. Save the changes
5. Refresh the page
6. Resize the window or otherwise attempt to trigger the media query CSS that you added previously.
   It will not trigger no matter what.
7. Using developer tools or other method of modifying the CSS in the browser, find the media query in the page source. Edit and add a space after "and".

The media trigger should immediately trigger as expected. The minified should leave the space after "and" for proper parsing.

[Michael Saechang]

Updated ticket as per Drew's comment. Thank you for verifying.

[Byran Zaugg]

I traced this bug into the YUI Compressor.

It appears that the bug was fixed in YUI Compressor 2.4.4:
https://github.com/yui/yuicompressor/commit/0e290b8e05392f19bccc2f7d524725a87739e6d6

I believe we are at YUI Compressor 2.4.2 in 6.1.0 GA1:
[portal]\tools\yuicompressor-2.4.2.zip

I'm unsure if we would update the whole YUI Compressor or just this piece of code in 6.1.x.

As for 6.2.x, I guess I have the same question. Do we fix just this bit of code or upgrade to the latest YUI Compressor? It looks like we are still using YUI Compressor 2.4.2
[portal]\tools\yuicompressor-2.4.2.jar

[Byran Zaugg]

YUI Compressor Change Log
https://github.com/yui/yuicompressor/blob/master/doc/CHANGELOG

[Byran Zaugg]

Rhino may also need to be updated. It should come with YUI Compressor.
LPS-3169
http://developer.yahoo.com/yui/compressor/ (Search for Rhino on page)
https://github.com/liferay/liferay-portal/commit/0689653f39cbc699caca7cc12955f9f975b01fd6
https://github.com/liferay/liferay-portal/commit/826cd4b0374e6c3d23efc9d72db301c882c2443d
https://github.com/liferay/liferay-portal/commit/c895e94633699cd134bc0b668d5cea88e911edd7

[Byran Zaugg]

Also Rhino related.
LPS-25836

[Byran Zaugg]

The implementations of YUI Compressor and Rhino have changed between 6.1.x, and ee-6.1.x and 6.2.x.
See: LPS-25836

[Byran Zaugg]

6.1.x: https://github.com/jonmak08/liferay-portal/pull/41
6.2.x: https://github.com/jonmak08/liferay-portal/pull/42

[Nate Cavanaugh]

This one can be backported across the board.

Thanks guys,

[Lawrence Lee]

Committed on:
Portal 6.1.x EE GIT ID: 168e70c280004be2902f9f01f161bc01c16d41ca.
Portal 6.2.x GIT ID: dc9b5fe49a7dc2c9f02af415c529b338856be464.

[Albert Lee]

PASSED Manual Testing following the steps in the comment by Drew using a slightly modified statement.

@media (max-width: 750px) and (min-width: 520px) {
body

{ background-color:red; }

}

Reproduced on:
Tomcat 7.0 + MySQL 5. Portal 6.1.x GIT ID: 6dbfe00ad713e11040a2e12891ae859fad0de081.

After adding the css media query, when I resized the browser to a width between 520 and 750 pixels, the body background color did not change.

Fixed on:
Tomcat 7 + MySQL 5. Portal 6.1.x GIT ID: 844a9390cfc57ce5d12770d26ac9f09f42a9afd4.
Tomcat 7 + MySQL 5. Portal 6.2.x GIT ID: e1fdb0fa6c7cbad2f8f322d24fe872766257aff0.

After adding the css media query, when I resized the browser to a width between 520 and 750 pixels, the body background color changed to red.

[Albert Lee]

PASSED Manual Testing following the steps outlined in my previous comment on 07/25/2012.

Tomcat 6 + MySQL 5. Portal 6.0.x GIT ID: 99341ed5f91ba1b9eb3ee2c50752b4b864f06841.

[Edward Gonzales]

Hello everyone! We are in the process of moving component "Theme" to "Theme > Dev" in LPS. Please make the necessary adjustments to your filters. Thanks!