#{greenscript.css} tag does not keep the sequence of files if multiple is passed in

[wangyizhuo]

I am trying to use greenscript in my application. I am using 960gs which has 4 css files, reset, text, grid which need to be loaded in the exact sequence.

So I used #{greenscript.css "reset, text, grid", media:'screen', output:'all'/} without declaring dependency in configuration.

The generated result is text, grid, reset instead of reset, text, grid which cause styling problem.

Thanks for the module again.

[wangyizhuo]

From your previous post I understood you are using a Set instead of List and that's why the sequence is not kept.

But for me it is a show stopper to use greenscript because I am looking for something can get working without configuration (minimal configuration).

Being able to use greenscript.conf to manage dependency is good, but I think there should be an easier way for beginner to get started.

[greenlaw110]

I think you can do:

#{greenscript.css "reset", output: 'true'/}
#{greenscript.css "text", output: 'true'/}
#{greenscript.css "grid", output: 'true'/}

This is still simpler than

<link href="/css/reset.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/css/text.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/css/grid.css" media="screen" rel="stylesheet" type="text/css" /> 

[greenlaw110]

BTW, If if you use the raw html

<link ref... / >

, your css and js file will get compressed transparently (in prod mode) if you use greenscript, that is true zero configuration.

[wangyizhuo]

What is the difference between
#{greenscript.css "reset", output: 'true'/}
#{greenscript.css "text", output: 'true'/}
#{greenscript.css "grid", output: 'true'/}

And
#{stylesheet media:'screen', src: 'reset.css' /}
#{stylesheet media:'screen', src: 'text.css' /}
#{stylesheet media:'screen', src: 'grid.css' /}

Beside, my motivation to use greenscript is to merge these css files in order to reduce no. of requests. So your solution is not valid.

[greenlaw110]

As I said even you don't use greenscript explicitly in your view file, you gain the benefit of transparent compress for each relevant files (without merge though) if you declare greenscript in your application.conf file.

At the moment I don't have straight solution to your requirements, I am not sure whether press (http://www.playframework.org/modules/press) can help you.

BTW, I don't quite understand why you can't use greenscript.conf to configure the dependencies, it's just another conf file which is much simpler than application.conf.

[wangyizhuo]

I do not want to use greenscript.conf for 2 reasons:

1. It may introduce confusion among the team, and steeper learning curve (though not very steep)
2. If I need to modify something, I may end up modify two places, the template and the greenscript.conf.

It is just from a lazy user's point of view and what I hope greenscript can achieve. If there is no better option, I will use greenscript.

Thanks for your module again.

[greenlaw110]

A good practice in common program design is to modularize your source code files, however this practice is not well respected in javascript/css, because there is concern of too many small files would impact the performance of the web site.

Greenscript is created to address this issue. The dependency configuration file is the core value of the tool. The good point of it is

1. you and your team has a concentrated place to view the relationships among your css and javascript files.
2. you can build up a tree of css and javascript files without worry how to merge them together, how to scatter them to proper web pages instead of adding all css/javascript to all pages.
3. your css/javascript modularity is greatly improved in that you can create many small js/css file specifically for a specific features of a specific pages. You are encouraged to build up reusable javascript/css libraries for your company. And you might do version control of the default greenscript.conf for your company js/css libraries.

My experience of using greenscript with depedency configuration is nice as I could do incremental changes to the web pages and no worry about breaking existing js/css files, no worry about my js/css dependencies. And in the end I gain the merged stuff when running in prod mode, everything good.

You are right that when u add new js/css you will need to touch greenscript.conf, but I think this is good for you as there is something help you to manage the dependencies. The dependencies won't disappear if you don't use greenscript.conf, it just managed in the brain of you and your team members, it only makes things become harder to control. (A direct result is you will touch much more in templates, as you might need to go around all templates to see if the dependency is well maintained in each template)

opinion?

[wangyizhuo]

I do see the value of dependency management introduced by greenscript. But sometimes it may be a overkill for simpler use case, like what I mentioned.

After all it is a design decision, like Maven vs Ant. There is no obvious conclusion that which is better. But it will be great if there is a tool can have both advantage, and that's what I hope greenscript can achieve.

I will give greenscript.conf a try, since seems press may not serve my purpose.

I may have a look at at how it is implemented, and provide a patch for this if it is possible.

[greenlaw110]

I reopen this issue as a reminder. I think about it in the next version

[wangyizhuo]

I have made the changes and created a pull request. Simply changing from set to list. I have tested in my personal project and it works per what I wanted.

[greenlaw110]

Simply changing Set to List is not acceptable. Greenscript is designed to allow user declare the same js/css multiple times, but will only output 1 time. Let's say user might have multiple templates used in one session (via #{extends} tag), and user shall be allowed to declare the same js/css in each template as long as he/she think it is relevant to current template.

I am thinking of add dynamic dependency configuration which will force the order be kept as it is declared while there is no greenscript.conf file found. But it needs more thinking to understand the impact to other parts. This won't be come out soon as I have no time at the moment for next version.

However you are free to fork greenscript and customize it with your specific needs

[wangyizhuo]

I did not simply change Set to List. I also ensure there is no duplicate in the List. The behavior should remain the same and all test case will pass.

You can have a look at my changes and I think there should not be any side effect.

[wangyizhuo]

To keep the order, I think create a comparator of Node instead of making Node comparable will allow more flexibility.

I actually hoped you can accept the pull request and release a new version of greenscript so our team can use the newer version. If it is not feasible, I can have a workaround though.

Btw, is there any side effect for compressing css for images? For example jquery-ui, I put jquery-ui.css and the theme (images) under the same folder. I have not tested. But press needs certain work around to overcome this.

[greenlaw110]

I don't understand the side effect you mentioned here. I have used jquery-ui css before with greenscript, there is no problem.

Anyway please report if any issues. thx.

[wangyizhuo]

Ok. Thanks.