Some assets are empty in non Debug Mode [5.2.2-B1]

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

create some assets "*.js" or ".css" files
instead of referencing assets directly specify their relative path in "m_Compress" tag

<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"/>

Asset building process differs radically for website visitors and developers:

	For Regular Visitors	For Developers
1	only, when combined asset is missing	when any of assets is changed
2	combine all specified assets into single file
3	compress result using "CSS/JS Compression Engine" setting
4	store result in "/system/cache" path
5	return URL to asset like "/system/cache/asset_name?ts=timestamp"

There are several issues, that can happen:

developers can't see if any compression errors were present for regular visitors (because their asset version isn't compressed to allow debugging)
if compression error happens, then combined asset would be empty with no indication about the fact, that compression error happened

When the need for asset management araised in 2010 there was no alternatives on the market (the https://github.com/kriswallsmith/assetic was developed in 2011) and we had to write something ourselves. This unfortunately forced us to copy/paste specific (latest at the time) versions of "JsMin" and "CssMin" into In-Portal. As a result we're not receiving any updates/fixes from these libraries as well.

Fixtures

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

Compressed File Using YUICompressor

@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}}

Turns out that YUICompressor is awfully bad in compression of CSS, that uses media queries, because it transforms "and (" into "and(" and that immediately makes CSS non-working.

Solution

use https://github.com/kriswallsmith/assetic library for asset file creation (internals of "m_Compress" tag)
use JsMin and CssMin from Composer
deprecate "JsMinifyHelper" and "CssMinifyHelper" classes in favor of "MinifyHelper::compressString" method
store compiled assets in "/system/cache/assets/" folder instead of "/system/cache/" folder

Related Discussions

Related Tasks

INP-1687 - Getting issue details... STATUS