« Back

Resolve the "Sass::SyntaxError: Invalid CSS" error in Liferay 6.1

General Blogs April 17, 2013 By Kan Zhang

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().

 

Threaded Replies Author Date
hello, where can i get the... Jack W May 6, 2013 2:15 AM
Hi Jack, You can download from sourceforge:... Kan Zhang May 10, 2013 1:13 PM
Hello Kan, I am having issue while building... Pritesh Shah May 13, 2013 12:51 AM
Hi Pritesh, Please check your... Kan Zhang May 13, 2013 7:51 AM
Hello Kan, Thanks for the quick reply. I did... Pritesh Shah May 13, 2013 9:57 PM
Hi Pritesh, I never seen that error in console... Kan Zhang May 14, 2013 9:42 AM
Hi Pritesh, After some thought, I think you... Kan Zhang May 14, 2013 1:42 PM
Ki Kan, Thanks for this information. I ran... Wole Adetiba August 17, 2014 9:07 AM
your solution does not work. Sergio Romero Zayas July 10, 2013 2:04 AM
Thanks for the fix and for posting a new jar.... Ben Chapman October 4, 2013 12:15 PM
[...] As of the responsive design, usually we... Anonymous May 23, 2013 3:27 PM
Hi Kan Zhang, I had do these changes...it... Ramkumar Chandran June 11, 2013 1:43 AM
I never seen this issue. Could you please check... Kan Zhang June 11, 2013 8:33 AM
Sorry I forgot to take error log, i reinstalled... Ramkumar Chandran June 11, 2013 9:30 AM
Yeah it worked... Ramkumar Chandran August 4, 2013 1:04 AM
Hi everybody, it's more simple to override new... Alberto Rigenti June 13, 2013 7:51 AM
Hi, alberto rigenti. How do you override the... John Nguyen June 24, 2013 11:52 AM
Hi, alberto rigenti. How do you override the... John Nguyen June 24, 2013 11:52 AM
simply opening the jar with 7zip and renaming... Alberto Rigenti June 24, 2013 12:27 PM
simply opening the jar with 7zip and renaming... Alberto Rigenti June 24, 2013 12:27 PM
Hi, alberto rigenti. Ah, I finally got it to... John Nguyen June 24, 2013 1:58 PM
your solution does not work. Sergio Romero Zayas July 10, 2013 2:03 AM
Did this works for anybody ????? I think... Ahmed bouchriha July 24, 2013 2:18 AM
Yes it works, U may have missed something. Ramkumar Chandran July 24, 2013 2:21 AM
Thanks for your response i am still getting... Ahmed bouchriha July 24, 2013 2:33 AM
Check the following 1. stop the server and... Ramkumar Chandran July 24, 2013 2:41 AM
Thanks again i followed you instructions but... Ahmed bouchriha July 24, 2013 5:36 AM
The problem was that the plugins sdk while... Ahmed bouchriha July 30, 2013 5:32 AM
Yes it works, U may have missed something. Ramkumar Chandran July 24, 2013 2:21 AM

hello, where can i get the liferay-portal-6.2.0-ce-m4 all i can find is liferay-portal-6.1-ce-ga2, i have the same problem of yours, can u help me and send the 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 ? here is my email zishuang-369@163.com, thank u very much!
Posted on 5/6/13 2:15 AM.
Hi Jack,

You can download from sourceforge:
http://sourceforge.net/projects/lportal/files/Liferay%20Portal/

Or you can download the ruby-gems.jar from my google drive:
https://docs.google.com/file/d/0B7stjZahI-VjZVZtMUNXanA1WnM/edit?usp=shari­ng
Posted on 5/10/13 1:13 PM in reply to Jack W.
Hello Kan,

I am having issue while building theme with bootstrap as described by you.
I followed your step to upgrade compass, but I am getting error while building theme
Below is the error,
org.jruby.embed.EvalFailedException: (LoadError) no such file to load -- compass
at org.jruby.embed.internal.EmbedEvalUnitImpl.run(EmbedEvalUnitImpl.java:127)
at org.jruby.embed.ScriptingContainer.runUnit(ScriptingContainer.java:1231)
at org.jruby.embed.ScriptingContainer.runScriptlet(ScriptingContainer.java:1224)
at com.liferay.portal.scripting.ruby.RubyExecutor.eval(RubyExecutor.java:177)
at com.liferay.portal.scripting.ruby.RubyExecutor.eval(RubyExecutor.java:121)
at com.liferay.portal.tools.SassToCssBuilder._parseSassFile(SassToCssBuilder.java:2­32)
at com.liferay.portal.tools.SassToCssBuilder._parseSassDirectory(SassToCssBuilder.j­ava:194)
at com.liferay.portal.tools.SassToCssBuilder.<init>(SassToCssBuilder.java:132)
at com.liferay.portal.tools.SassToCssBuilder.main(SassToCssBuilder.java:88)
Caused by: org.jruby.exceptions.RaiseException: (LoadError) no such file to load -- compass

Please help me in resolving this issue.
Thanks in advance
Posted on 5/13/13 12:51 AM in reply to Kan Zhang.
Hi Pritesh,

Please check your ${java.io.tmpdir}/liferay folder and delete the "ruby" folder if there is any.
On windows system, the default ${java.io.tmpdir} is C:\Users\${YOUR.USER.NAME}\AppData\Local\Temp.
Posted on 5/13/13 7:51 AM in reply to Pritesh Shah.
Hello Kan,

Thanks for the quick reply. I did the same but still I am getting error in console whereas I am able to get updated style in theme deployed to server.

Do you know why this error in console, or how to resolve it?

Thanks in advance
Posted on 5/13/13 9:57 PM in reply to Kan Zhang.
Hi Pritesh,
I never seen that error in console before.

Normally it should give the full file path like "file:/some/path/compass" instead of just "compass" in the error log:
org.jruby.embed.EvalFailedException: (LoadError) no such file to load -- file:/some/path/compass

Looks like it cannot find the correct path of the compass library.

If you check the source code of the com.liferay.portal.scripting.ruby.RubyExecutor, at line 159, it loads scripting.jruby.load.paths to the ruby context. I will recommend to debug the RubyExecutor to find out what is missing there.

Also if you are using OpenJDK instead of official JDK, it may cause problem too.
Posted on 5/14/13 9:42 AM in reply to Pritesh Shah.
Hi Pritesh,

After some thought, I think you may missed one backward slash "\" in your "scripting.jruby.load.paths" property.

The property should look like this:
scripting.jruby.load.paths=\
classpath:/META-INF/jruby.home/lib/ruby/site_ru­by/1.8,\
classpath:/META-INF/jruby.home/lib/ruby/site_ruby/shared,\
classpath:/gem­s/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

Note the backward slash "\" right after the "=", it is used to escape the new line character. If you missed that, the value of "scripting.jruby.load.paths" property will be empty -- which will cause that exception.
Posted on 5/14/13 1:42 PM in reply to Pritesh Shah.
[...] As of the responsive design, usually we will pick a responsive framework like Twitter Bootstrap as the start point and build our own on top of it. But Liferay 6.1 does not play well with Twitter... [...] Read More
Posted on 5/23/13 3:27 PM.
Hi Kan Zhang,

I had do these changes...it works except control panel.
The control panel of Liferay Portal 6.1 CE GA2 Left Menu is displaying but when i select any of the left menu, the content is not displaying.. or the aui-icon-lightbulb icon is repeated.

Help me out...

Ramkumar
Posted on 6/11/13 1:43 AM.
I never seen this issue. Could you please check if you set
com.liferay.portal.servlet.filters.dynamiccss.DynamicCSSFilter=false
in your portal-ext.properties? It should be set to true.
Also could you please clear your browser cache, the temp and work folder of tomcat and test it again? Is there any error in your log?
Posted on 6/11/13 8:33 AM in reply to Ramkumar Chandran.
Sorry I forgot to take error log, i reinstalled the server it works fine with this blog code ... If i face that same error again i will post the log.

Thank u
Posted on 6/11/13 9:30 AM in reply to Kan Zhang.
Hi everybody,
it's more simple to override new jar path:

gems/chunky_png-1.2.6/lib,\
gems/compass-0.12.2/lib,\
gems/fssm-0.2.9/lib,\
ge­ms/sass-3.2.1/lib

with the old ones:

gems/chunky_png-1.2.1/lib,\
gems/compass-0.11.5/lib,\
gems/fssm-0.2.7/lib,\
ge­ms/sass-3.2.7/lib

and no portal-ext.properties modifications are needed, no temp folder to delete... only numbers replacement.

Alberto
Posted on 6/13/13 7:51 AM.
Hi, alberto rigenti.

How do you override the new jar path like you are?
Posted on 6/24/13 11:52 AM in reply to alberto rigenti.
Hi, alberto rigenti.

How do you override the new jar path like you are?
Posted on 6/24/13 11:52 AM in reply to alberto rigenti.
simply opening the jar with 7zip and renaming folders ... if you need help ask .. I can also give you the j modified ar ..
Posted on 6/24/13 12:27 PM in reply to John Nguyen.
simply opening the jar with 7zip and renaming folders ... if you need help ask .. I can also give you the j modified ar ..
Posted on 6/24/13 12:27 PM in reply to John Nguyen.
Hi, alberto rigenti.

Ah, I finally got it to work; however I had to get on windows. I don't know how to access those files without 7zip on a mac.
Posted on 6/24/13 1:58 PM in reply to alberto rigenti.
your solution does not work.
Posted on 7/10/13 2:03 AM in reply to alberto rigenti.
your solution does not work.
Posted on 7/10/13 2:04 AM in reply to Kan Zhang.
Did this works for anybody ?????
I think there's something wrong with this method
Posted on 7/24/13 2:18 AM.
Yes it works,
U may have missed something.
Posted on 7/24/13 2:21 AM in reply to Ahmed bouchriha.
Yes it works,
U may have missed something.
Posted on 7/24/13 2:21 AM in reply to Ahmed bouchriha.
Thanks for your response
i am still getting this error

org.jruby.embed.EvalFailedException: (LoadError) no such file to load -- compass
at org.jruby.embed.internal.EmbedEvalUnitImpl.run(EmbedEvalUnitImpl.java:127)
at org.jruby.embed.ScriptingContainer.runUnit(ScriptingContainer.java:1231)
at org.jruby.embed.ScriptingContainer.runScriptlet(ScriptingContainer.java:1224)
at com.liferay.portal.scripting.ruby.RubyExecutor.eval(RubyExecutor.java:177)
at com.liferay.portal.scripting.ruby.RubyExecutor.eval(RubyExecutor.java:121)
at com.liferay.portal.tools.SassToCssBuilder._parseSassFile(SassToCssBuilder.java:2­­32)
at com.liferay.portal.tools.SassToCssBuilder._parseSassDirectory(SassToCssBuilder.j­­ava:194)
at com.liferay.portal.tools.SassToCssBuilder.<init>(SassToCssBuilder.java:132)
at com.liferay.portal.tools.SassToCssBuilder.main(SassToCssBuilder.java:88)
Caused by: org.jruby.exceptions.RaiseException: (LoadError) no such file to load -- compass
Can anybody help?
Posted on 7/24/13 2:33 AM in reply to Ramkumar Chandran.
Check the following
1. stop the server and Clear tmp files both in liferay server and computer as mentioned above
2. Check the jar file is correctly placed
3. check the lines copied into portal-ext.properties are correct
Posted on 7/24/13 2:41 AM in reply to Ahmed bouchriha.
Thanks again
i followed you instructions but still the same problem
Posted on 7/24/13 5:36 AM in reply to Ramkumar Chandran.
The problem was that the plugins sdk while building the theme css read the portal properties form
liferay-portal-6.1.1-ce-ga2/tomcat-7.0.27/webapps/ROOT/WEB-INF/lib/portal-im­pl.jar!/portal.properties
and not from portal-ext.properties so it didn't see the new configuration
scripting.jruby.load.paths=\
classpath:/META-INF/jruby.home/lib/ruby/site_ru­by/1­.8,\
classpath:/META-INF/jruby.home/lib/ruby/site_ruby/shared,\
classpath:/gem­s/c­hunky_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/­c­hunky_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
and will use the old one stored under liferay-portal-6.1.1-ce-ga2/tomcat-7.0.27/webapps/ROOT/WEB-INF/lib/portal-impl.j­ar!/portal.properties
so what solved my problem is that i modified scripting.jruby.load.paths directly on portal-impl.jar . i don't if there's anybody else who got this problem?
Posted on 7/30/13 5:32 AM in reply to Ahmed bouchriha.
Yeah it worked
com.liferay.portal.servlet.filters.dynamiccss.DynamicCSSFilter=false
Posted on 8/4/13 1:04 AM in reply to Kan Zhang.
Thanks for the fix and for posting a new jar. It worked perfectly.
Posted on 10/4/13 12:15 PM in reply to Kan Zhang.
Ki Kan,

Thanks for this information.

I ran to same issue also. While checking, I noticed that the versions in my liferay temp folder are different from the defaults recommended in the portal-ext.propoerties file. I changed the version to this:

classpath:/META-INF/jruby.home/lib/ruby/1.8,\
classpath:/gems/chunky_png-1.2.9/lib,\
classpath:/gems/compass-0.12.2/lib,\
classpath:/gems/fssm-0.2.10/lib,\
classpath:/gems/sass-3.2.12/lib,\
file:${liferay.lib.portal.dir}ruby-gems.jar!/gems/chunky_png-1.2.9/lib,\
file:${liferay.lib.portal.dir}ruby-gems.jar!/gems/compass-0.12.2/lib,\
file:${liferay.lib.portal.dir}ruby-gems.jar!/gems/fssm-0.2.10/lib,\
file:${liferay.lib.portal.dir}ruby-gems.jar!/gems/sass-3.2.12/lib

from this:

classpath:/gem­s/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.tmpdi­r}/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

-- and I was able to build the the theme and deploy them.

Regards,
Posted on 8/17/14 9:07 AM in reply to Kan Zhang.