Foren

Avoid parsing CSS files by excluding them

thumbnail
Nicolas Forney, geändert vor 10 Jahren.

Avoid parsing CSS files by excluding them

Junior Member Beiträge: 78 Beitrittsdatum: 23.05.11 Neueste Beiträge
Hello,

I'm developing a theme with a bunch of css files coming from different libraries (twitter-bootstrap for example).

I don't really understand why Liferay build process compile files with *.css extension. I think a better idea will be to only compile *.scss files or at least give a way to exclude specific files from compiling process. For example, to exclude a css file just prefix it with an underscore _myfiles.css, same could be done to exclude the whole content of a folder by prefixing the folder name with an underscore.

It seems there is no similar functionalities built-in Liferay. Am I right?


One workaround is to host *.css files on a static file server (it can be hosted on the same server as where Liferay run) and thus use an url like this one : "http://myserver.com/static/libs/twitter-bootstrap/css/bootstrap.css".

One of the downsides of this solution is that the css files are not included inside the theme plugin but located somewhere else on the server (that's not perfect to correctly manage version controlling...)

So, if you have any other idea or working workaround you can share, I m all ears.


Thank you
Bradley Wood, geändert vor 10 Jahren.

RE: Avoid parsing CSS files by excluding them

thumbnail
Nicolas Forney, geändert vor 10 Jahren.

RE: Avoid parsing CSS files by excluding them

Junior Member Beiträge: 78 Beitrittsdatum: 23.05.11 Neueste Beiträge
Hi Bradley,

Thank you for your interest.

It's not a performance issue. More a conceptual problem. Why parsing files which have already been compiled and minified?

However, I also had a problem with twitter-bootstrap.
Here is an issue I raised to the Liferay team (it has been resolved) :

I added the twitter-bootstrap css file into the _diff/css folder of a liferay theme plugin. When deploying the theme I got a Syntax error generated by the Ruby Gems Compass library : (SyntaxError) Expected a color. Got: transparent.

This error is generated when the library try to compress the bootstrap.css file.

The following lines in the bootstrap.css file raise the error :
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);


To resolve the problem I had to change the compass library to a newer version.

If I was able to exclude the twitter-bootstrap css and min.css files, it would not be necessary to update the compass library.
thumbnail
Ahmed bouchriha, geändert vor 10 Jahren.

RE: Avoid parsing CSS files by excluding them

Junior Member Beiträge: 55 Beitrittsdatum: 04.05.12 Neueste Beiträge
Hello Nicolas

I added the twitter-bootstrap css file into the _diff/css folder of a liferay theme plugin. When deploying the theme I got a Syntax error generated by the Ruby Gems Compass library : (SyntaxError) Expected a color. Got: transparent.

This error is generated when the library try to compress the bootstrap.css file.

The following lines in the bootstrap.css file raise the error :
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);


About that problem you can fix it without any update you have just to replace all transparent occurence on your css with rgba(255,255,255,0)

e.g :

 background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);


became


 background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));


for custom themes feel free to visit https://www.themeray.com.
thumbnail
Nicolas Forney, geändert vor 10 Jahren.

RE: Avoid parsing CSS files by excluding them

Junior Member Beiträge: 78 Beitrittsdatum: 23.05.11 Neueste Beiträge
Hi Ahmed,

Thank you for your response.

Your solution was the first thing I did to resolve this problem with twitter-bootstrap. However I don't really like it. You have to modify the original bootstrap file which is not really a best practice. You will have to do that each time you add a new bootstrap version.

To solve this problem, it's better to use a newer version of compass to avoid the error message.

Here is the option you have to add to your portal-ext.properties file :

Add the following property to your portal-ext.properties file:

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

To work, the correct libraries have to be installed.

The needed libraries are added in the following hot fix : liferay-hotfix-207-6120.
It's for Liferay EE, I don't know if those libraries are present in LIferay CE.
thumbnail
Ahmed bouchriha, geändert vor 10 Jahren.

RE: Avoid parsing CSS files by excluding them

Junior Member Beiträge: 55 Beitrittsdatum: 04.05.12 Neueste Beiträge
Hi Nicolas

Thank you very much for sharing this solution .
thumbnail
alberto rigenti, geändert vor 10 Jahren.

RE: Avoid parsing CSS files by excluding them

New Member Beiträge: 5 Beitrittsdatum: 10.03.12 Neueste Beiträge
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,\
gems/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,\
gems/sass-3.2.7/lib

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

Alberto