Implement $hasCss in templates

[jakub-g]

Implement $hasCss which will work in a similar fashion to $hasScript, so it'll take the template's classpath, append 'Css' (instead of 'Script') and add this to $css array list of CSS dependencies of the template.

I can't believe this hasn't been implemented yet :)

[piuccio]

Oh and please specify what to do with CSS inherited from the parent class, if any.

[benouat]

You asked

I can't believe this hasn't been implemented yet :)

Fabio answered!

Oh and please specify what to do with CSS inherited from the parent class, if any.

😃

[jakub-g]

That's a good question :)

http://ariatemplates.com/usermanual/latest/template_inheritance#css-inheritance

A child HTML template inherits the $css configuration property from its parent template unless it redefines it in its own configuration. If a $css property is explicitly specified, the parent one will be completely ignored.

What is actually the rationale for that? (I'm not questioning it, just to know the reason). Is it to not have bloated templates after a few levels of inheritance?

Solution one - $hasCss means: just add one more CSS dep

In case someone wants to get rid of the bloat, he can always use $css as usual.

BaseTpl : { $css : ["Foo", "Bar"] }
ChildTpl : { $hasCss : true }

ChildTpl has Foo, Bar, and ChildTplCss.

BaseTpl : { $css : ["Foo", "Bar"], $hasCss : true }
ChildTpl : { $hasCss : true }

BaseTpl has Foo, Bar, BaseTplCss.
ChildTpl has Foo, Bar, BaseTplCss, and ChildTplCss.

BaseTpl : { $hasCss : true }
ChildTpl : { $hasCss : true }

ChildTpl has BaseTplCss, and ChildTplCss.

Solution two - any $css or $hasCss in child discards everything from parent

BaseTpl : { $css : ["Foo", "Bar"] }
ChildTpl : { $hasCss : true }

ChildTpl has ChildTplCss.

BaseTpl : { $css : ["Foo", "Bar"], $hasCss : true }
ChildTpl : { $hasCss : true }

BaseTpl has Foo, Bar, BaseTplCss.
ChildTpl has ChildTplCss.

BaseTpl : { $hasCss : true }
ChildTpl : { $hasCss : true }

ChildTpl has ChildTplCss.

In both cases, the following holds

BaseTpl : { $hasCss : true } // add BaseTplCss to $css
ChildTpl : { $css : "Foo" } // $css is overridden

BaseTpl has BaseTplCss.
ChildTpl has Foo.

Which one is more compelling to you guys?

BTW @piuccio thanks for raising the point.

[marclaval]

In order to avoid creating confusion, I suggest that $css and $hasCSS behave the same, i.e. child discards everything from parent.

What do you think ?

[flongo]

I think that there is already a certain ambiguity in the way we handle the inheritance of the $css property.

This ambiguity could be increased by adding the $hasCSS property, because the user would then expect a similar behaviour with respect to the $hasScript property: the css template associated to the html template through the naming convention would be perceived as indissolubly bound to that template.

My conclusion is that I don't like the $hasCSS property.

[olaf-k]

I'm not a big fan of it either and find it confusing for new users.

[benouat]

I am not also in favor of this one....
For script it's easy, it's JavaScript, we can inherit, override, do whatever we want...

here with CSS we can't do any of these. We have no way to merge the CSS code produced in an optimal way

[jakub-g]

Ok, so the last proposal with perhaps less confusion:

1. $hasCss works if and only if the template doesn't inherit from another template.
2. If a TPL inherits from another TPL, usage of $hasCss is discarded and logs a warning into the browser console.
3. $hasCss and $css are mutually exclusive. If they're both provided, $css is taken into account, $hasCss is discarded and a warning is logged.

Thoughts?

[flongo]

Do we really need this? I still see the $hasCSS property as a source of confusion...

[jakub-g]

Seems no one loves the idea, hence I'm closing it now as won't fix.