Triggering the TTW Bundle Builder after GenericSetup

So, we're currently attempting to have a single Zope host multiple Plone pages, but they are all supposed to use the same LESS file in the file system. All sites are supposed to have the same layout, but use different colors which would be changed via 'plone.lessvariables' in the registry after GenericSetup. The preferred scenario would be if we could mimic the Bundle Builder behavior that occurs when navigating to /@@resourceregistry-controlpanel and pressing "Build" on the specific bundle, because then Plone compiles a CSS file within the local site.

I'm aware of how to compile LESS files via the "plone-compile-resources" script, however that script generates a single compiled CSS file which would cause all Plone sites to have the same colors. I've also dabbled with the idea of having a theme:parameter within the manifest.cfg that would load the LESS variable and change the CSS afterwards via a Diazo rule entry in the rules.xml, but I've had no luck.

From my understanding, the TTW Bundle Builder essentially submits a form with the action 'less-build-config' with the bundle name to /@@resourceregistry-controlpanel, which then seems to trigger the less-variables.js and less.js to run and compile all LESS files. I'm unsure if that's all there is to it, or if that's the "proper way" to trigger the script and would appreciate any insight on the matter.

Could you not use CSS custom properties for that? I know that there is a controlpanel coming/already available for custom CSS. Or you could use a "Customization theme" which only consists of a CSS file and only sets the CSS variables.

Of course that would mean your theme supports CSS custom properties (which should be fine if you use less anyway - you need to replace the current value for a less variable with a CSS custom property expression) and that you don't need IE11 support.

The 'through the web' compiling of a bundle you can trigger from the resource registry control panel actually happens on the client in your browser.

Plone includes r.js (and less.js), sends the require config to your browser, r.js compiles and sends back the results to Plone, where the compiled bundle is stored under portal_resources in the zodb (++plone++ namespace).


The issue isn't so much the usage of custom properties (because like you said, we use LESS anyway), but rather the fact that we'd need unique custom properties for each Plone site within our Zope. I'm having difficulty envisioning that, and it definitely doesn't seem like the "proper" way to do it.

Yeah, I actually noticed that the TTW compiling happens client-side in the browser. I guess my question would be what's the cleanest way to trigger said compilation via require without messing up any configuration of Plone. I've little experience on the subject of requirejs, though I suppose I'll be reading up on it a bit.

Maybe my answer wasn't that clear: If you use Less to generate your theme(s), you always create n times the full theme. You coul minimize that effort by using custom properties.
So instead of having:

@plone-link-color: #007bb1; //plone blue made slightly darker for wcag 2.0

you could set a custom property:

@plone-link-color: var(--plone-link-color, #007bb1); //plone blue made slightly darker for wcag 2.0

Now, the default/fallback will be what you set here, but in you custom themes you can set:

:root {
  --plone-link-color: rebeccapurple;

No need to recompile the theme at all!

You need to be carefull with less variables like the color example above, if you use less functions to modify the values (which imo is a bad practice anyway):

// This won't work anymore!
@plone-link-hover-color: darken(@plone-link-color, 15%);

You could always use something like lessc ( ) to compile the CSS.

This is what I do for my themes, the syntax would be something like

cd blue; lessc theme.less theme.css; cd ../red; lessc theme.less theme.css;

Thanks for reiterating, I suppose I did misunderstand you! Turns out I was blissfully unaware that there had been an update to Plone which adds a new CSS functionality. Turns out that functionality was exactly what we're looking for. Now I'm merely adding the custom CSS to and it works like a charm, no need for compiling anything.