Issue:
Liferay 6.1 uses the dynamic CSS filter to parse Sass CSS. The dynamic CSS filter will validate the SASS/CSS and compile the SASS into regular CSS and put them into .sass-cache folder.
But in Liferay 6.1, The dynamic CSS filter always give "Sass::SyntaxError: Invalid CSS" exception on many VAILD CSS files. For example, If you want to use the twitter bootstrap CSS in to your custom theme, you will get the following ERROR:
| ERROR [MinifierFilter:421] Unable to parse SASS on CSS /opt/liferay/liferay-portal-6.1.0-ce-ga1/tomcat-7.0.23/${YOUR_CUSTOM_THEME}/css/bootstrap.css org.jruby.embed.EvalFailedException: (SyntaxError) Expected a color. Got: transparent |
Cause:
The issue is caused by the old campass library (compass-0.11.5) which has an issue in handling the transparent keyword: https://github.com/chriseppstein/compass/pull/715#issuecomment-4186662
It got fixed in the latest campass library.
Solution:
We need to upgrade the campass library to the newer version. You can find the newer version of ruby-gems.jar (which contains the campass library) in Liferay 6.2 M4 under liferay-portal-6.2.0-ce-m4/tomcat-7.0.34/webapps/ROOT/WEB-INF/lib folder.
Copy the ruby-gems.jar from Liferay 6.2 M4 then put it to webapps/ROOT/WEB-INF/lib of your Liferay 6.1 server.
Add the following to your portal-ext.properties (Note: Don't miss the backslash in the end of the first line):
| scripting.jruby.load.paths=\ classpath:/META-INF/jruby.home/lib/ruby/site_ruby/1.8,\ classpath:/META-INF/jruby.home/lib/ruby/site_ruby/shared,\ classpath:/gems/chunky_png-1.2.6/lib,\ classpath:/gems/compass-0.12.2/lib,\ classpath:/gems/fssm-0.2.9/lib,\ classpath:/gems/sass-3.2.1/lib,\ ${java.io.tmpdir}/liferay/ruby/gems/chunky_png-1.2.6/lib,\ ${java.io.tmpdir}/liferay/ruby/gems/compass-0.12.2/lib,\ ${java.io.tmpdir}/liferay/ruby/gems/fssm-0.2.9/lib,\ ${java.io.tmpdir}/liferay/ruby/gems/sass-3.2.1/lib |
Delete the "ruby" folder under your {java.io.tmpdir}/liferay folder to ensure Liferay to use the newest campass library.
Note:
You may wondering why we are using ${java.io.tmpdir} here. This is because JRuby has some problem loading the files inside a jar file. To overcome the problem, Liferay implemented a workaround: extract the ruby-gems.jar to ${java.io.tmpdir}/liferay/ruby/ folder and tell the JRuby to load the files there as a backup plan. You can find the logic in com.liferay.portal.scripting.ruby.RubyExecutor.initRubyGems().

