Page Comparison

The assets in In-Portal are managed by "<inp2:m_Compress .../>" tag (see

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

Asset building process differs radically for website visitors and developers:

...

There are several issues, that can happen:

...

If compression error happens, then empty combined asset file would be

...

created without 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

...

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

...

...

.

...

...

@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

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

...

• Asset Management v3 [5.3.0-B1]
• Inconsistent admin skin asset name [5.2.2-B1]
• [cms] Media queries in CSS files are broken during minification [5.2.2-B1]

Related Tasks