Strategies for LESS/CSS in addons?

[jensens (Jens W. Klein)]

So I'am not 100% happy with the new way to build resources. My case is simple, only CSS.

I may made a mistake, so here what I want to do

1. add a LESS File (or CSS, does not matter that much) to my custom addon.
2. register it for use in Plone
3. file must be available after activation of the addon (in case of LESS as compiled CSS).
4. file must not be separate, but part of some other bunch of css.

And here what I did:

add resources. needs compilation.

• I added a less file (and some svg)
• I registered it as a plone static resource in zcml
• I added a single resource to the registry
• I added a bundle to the registry

After install I need to got to the resource registries and hit the build button, only then all works fine.

There are two things I cant get to work:

1. compile the less file while installing (or if not possible: while buildung the addon)
2. add the resource to an existing bundle - so I do not want to add one bundle per addon, this does increases the number of requests needed to load the site with every addon.

Questions:

• What are the recommended strategies?
• Where is this documented? (And dont tell me whats written here http://docs.plone.org/adapt-and-extend/theming/resourceregistry.html explains it: its does not).

IMO this is essential information for any addon-developer.

[ebrehault (Eric Bréhault)]

@jensens

compile the less file while installing (or if not possible: while buildung the addon)

You cannot do it at install time (for now, I hope we will improve that soon).
What you should do is to compile your LESS into CSS by yourself in your add-on sources (2 solutions: either you already have a prefered way to compile less, either you just build your bundle using the Plone resources registry on a local instance and you download the resulting css), and declare this compiled version in your registry.xml, like that: https://github.com/plomino/Plomino/blob/plone5/src/Products/CMFPlomino/profiles/default/registry.xml#L123 (here it is a js bundle, but that would be the same for a css one).

@jensens

add the resource to an existing bundle - so I do not want to add one bundle per addon, this does increases the number of requests needed to load the site with every addon

This is not solved at the moment. And that's bad indeed. @vangheem made a first improvement here https://github.com/plone/Products.CMFPlone/pull/1210 as this change allows to avoid to bundle dependencies several time (if we know a resource is already provided by a Plone core bundle, no need to bundle it in our add-on bundle).
In this PR I have started a discussion about being able to merge bundles in a unique one. I think we could do it by changing https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/resources/browser/cook.py#L23 so it can process several bundles, but I am still not clear how to connect that to the add-on installation.

[thet (Johannes Raggam)]

Currently you cannot compile your bundles while installing. You have to provide it precompiled and live with an extra request (only bunldes are loaded in a rendered site). This is also the reason, why you cannot add it to an existing bundle, like the "plone" bundle - you cannot precompile the plone bundle because you simply don't know what the "plone" bundle contains. There might be solutions, like automatically compiling all bundles at install time TTW, which are modified by an addon.

For CSS only, you can add your CSS resource to the "plone-legacy" bundle. All resources in there are just concatenated. There is no need to compile it.

That's more-or-less documented in http://docs.plone.org/adapt-and-extend/theming/resourceregistry.html - but it's somehow hidden. Contributions to improve the docs are highly appreciated.

[jensens (Jens W. Klein)]

Precompiling works with adding this to buildout to get the scripts:

[buildout]
parts =
...
    resourcehelper

[resourcehelper]
recipe = zc.recipe.egg:scripts
eggs =
    ${instance:eggs}
    Products.CMFPlone
scripts =
    plone-generate-gruntfile
    plone-compile-resources

This does not work with Plone 5.0 release, because there were bugfixes (seems we need a 5.0.1. release soon) - I used coredev versions like so:

extends =
    https://raw.githubusercontent.com/plone/buildout.coredev/5.0/versions.cfg
    https://raw.githubusercontent.com/plone/buildout.coredev/5.0/sources.cfg
    https://raw.githubusercontent.com/plone/buildout.coredev/5.0/checkouts.cfg
    ...

So, after that I started up the instance and created a Plone site (id=Plone) with the addon installed.
No I can compile the resources with

./bin/plone-compile-resources --bundle authomatic-plugin

This could be easier, but it works! Thanks @thet for the hints.

[dieter (Dieter Maurer)]

@jensens

...
After install I need to got to the resource registries and hit the build button, only then all works fine.

There are two things I cant get to work:

1. compile the less file while installing (or if not possible: while buildung the addon)
2. add the resource to an existing bundle - so I do not want to add one bundle per addon, this does increases the number of requests needed to load the site with every addon.
   ...

I have not yet had a close look at Plone 5. However, I am quite confident that Plone 5 has retained "GenericSetup" as important configuration tool. In this case, you could use a specialized "GenericSetup" import step for your add-on to do all the necessary things which cannot be done in other ways.

[davilima6 (Davi Lima)]

Please correct me if I am doing something wrong, but I might have noticed some inconsistencies in the way new resource registries include the bundles in final output. It seems that when Diazo is enabled, resource registry invokes my theme's resources twice (both CSS and JS).

I opened up an issue to follow that (even though the issue focus more on JS): https://github.com/plone/Products.CMFPlone/issues/1220