Kombinierte Ansicht Flache Ansicht Baumansicht
Threads [ Zurück | Nächste ]
toggle
Nicolas Forney
Avoid parsing CSS files by excluding them
5. April 2013 01:51
Antwort

Nicolas Forney

Rang: Junior Member

Nachrichten: 78

Eintrittsdatum: 23. Mai 2011

Neue 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
Anonym
RE: Avoid parsing CSS files by excluding them
5. April 2013 08:50
Antwort

Anonym

Is your goal to speed up compile time for themes?
Nicolas Forney
RE: Avoid parsing CSS files by excluding them
8. April 2013 03:28
Antwort

Nicolas Forney

Rang: Junior Member

Nachrichten: 78

Eintrittsdatum: 23. Mai 2011

Neue 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.
Ahmed bouchriha
RE: Avoid parsing CSS files by excluding them
9. April 2013 14:10
Antwort

Ahmed bouchriha

Rang: Junior Member

Nachrichten: 25

Eintrittsdatum: 4. Mai 2012

Neue 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 :

1 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

1
2 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.
Nicolas Forney
RE: Avoid parsing CSS files by excluding them
10. April 2013 00:21
Antwort

Nicolas Forney

Rang: Junior Member

Nachrichten: 78

Eintrittsdatum: 23. Mai 2011

Neue 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.
Ahmed bouchriha
RE: Avoid parsing CSS files by excluding them
10. April 2013 02:07
Antwort

Ahmed bouchriha

Rang: Junior Member

Nachrichten: 25

Eintrittsdatum: 4. Mai 2012

Neue Beiträge

Hi Nicolas

Thank you very much for sharing this solution .
Alberto Rigenti
RE: Avoid parsing CSS files by excluding them
13. Juni 2013 07:50
Antwort

Alberto Rigenti

Rang: New Member

Nachrichten: 5

Eintrittsdatum: 10. März 2012

Neue 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