SP4.5 wro4j minified CSS feature

Question

What changes were made to CSS in SP4.5? Where are the old CSS files?

Answer

A new feature called wro4j was introduced in Primo 4.5, to improve Production-environment page load time. The feature itself creates a minified (or compiled) virtual CSS "file" which contains all relevant CSS files. The minified "file" contains only the CSS files specified under the CSS Mapping Table and a number of OTB Exlibris files. No files can be excluded, but files can be added by adding them to the CSS Mapping Table using the semicolon (;) between filenames for each CSS Set.

This feature should not require any changes to be made to the existing CSS files or their location.

Exlibris has created a Development Mode parameter which allows for easier development on the Sandbox environment.
There is also a button which can be added for convenience:
javascript:var%20gotoLocation=window.location.toString()+'&wroDevMode=true';window.location=gotoLocation;

Our recommended workflow is:
1. Make any necessary changes to the usual CSS files
2. Open a browser and add the &wroDevMode=true parameter to the URL and the individual CSS files will be re-loaded (the unified CSS file will not be created with the DevMode)
3. Now any changes you make to the files should be viewable
4. Save changes and remove all cookies
5. When the browser is reopened the changes should appear

If you are making any changes to the file hierarchy (in the mapping table) then you will of course need to deploy the CSS Mapping Table and relevant view.

Also worth noting is that this new feature utilizes much stricter rules for the validation of the CSS files.
Therefore, we would recommend ensuring that all CSS files being loaded pass validation, otherwise they will not be loaded into the minified virtual CSS "file" at all.

Additional Information

A limitation of the CSS compiler does not allow urls to be used in @import statements of css files.
The CSS compiler is expecting a filename or path that is relative to primo_library/libweb/css, and not a url, and actually pre-pends "/primo_library/libweb/css/" to the value that appears in an @import statement of a CSS file.

This new feature is documented in the section titled "Debugging CSS and JavaScript" in Chapter 6 of the Primo Technical Guide.

Please also see article on the File Uploader

• Article last edited: 6/5/2014