Child pages
  • [cms] Media queries in CSS files are broken during minification [5.2.2-B1]
Skip to end of metadata
Go to start of metadata

The assets in In-Portal are managed by "<inp2:m_Compress .../>" tag (see  INP-382 - Getting issue details... STATUS ). It works like this:

  1. create some assets "*.js" or ".css" files
  2. instead of referencing assets directly specify their relative path in "m_Compress" tag (example below)
  3. internally a combined minified file of all specified assets is created and it's url is used in HTML
<script type="text/javascript" src="<inp2:m_Compress files='js/script.js|js/calendar/calendar-setup.js'/>"></script>
<link rel="stylesheet" href="<inp2:m_Compress files='js/jquery/thickbox/thickbox.css|js/calendar/calendar-blue.css'/>" type="text/css" media="screen"/>

The minification can be done via YUICompressor or JsMin (administrator chooses this upon In-Portal installation). Turns out, that YUICompressor v2.4.2 (version used in In-Portal 5.2.2-B1 and below) has an issue, that results in compressed file has all media queries (the "@media ..." constructs) broken.

VALID

Non-Minified File
@media screen and (min-width: 480px) and (max-width: 639px) {
	body {
		background: #000 url(/themes/advanced/img/header-bg.png) no-repeat top left;
	}
}

@media screen and (max-width: 640px) {
	body {
		background: #000 url(/themes/advanced/img/header-bg.png) no-repeat top left;
	}
} 

INVALID - Known issue reported in https://davidwalsh.name/yui-compressor-media-query-error where space between "and (" gets removed making CSS invalid.

Compressed File Using YUICompressor v2.4.2
@media screen and(min-width:480px) and(max-width:639px){body{background:#000 url(/themes/advanced/img/header-bg.png) no-repeat top left;}}@media screen and(max-width:640px){body{background:#000 url(/themes/advanced/img/header-bg.png) no-repeat top left;}}

VALID

Compressed File Using YUICompressor v2.4.8
@media screen and (min-width:480px) and (max-width:639px){body{background:#000 url(/themes/advanced/img/header-bg.png) no-repeat top left;}}@media screen and (max-width:640px){body{background:#000 url(/themes/advanced/img/header-bg.png) no-repeat top left;}}

VALID

Minified using PHPMin
@media screen and (min-width: 480px) and (max-width: 639px){body{background:#000 url(/themes/advanced/img/header-bg.png) no-repeat top left}}@media screen and (max-width: 640px){body{background:#000 url(/themes/advanced/img/header-bg.png) no-repeat top left}}

Solution

Upgrade to YUICompressor v2.4.8.

Related Discussions

Related Tasks

INP-1694 - Getting issue details... STATUS

1 Comment

  1. Another place, where YUI Compressor (also v2.4.8) fails is preserving spaces in "calc(...)" expressions.