How do I combine my CSS in Resource Registries

I'm not complaining about CSS in Resource Registries.

Ok, I am. Just a bit. I thought I understood, and now I don't.

I have a css file on my filesystem, and I made a change to it. I want to deploy this change to production. I push to git, bla bla bla, and new css file appears on production environment.

Production doesn't change, the default.css doesn't change, nor does the timestamp.

On production, I visit @@resourceregistry-controlpanel and click 'development mode', save, and uncheck development mode and try again.

Timestamp changed! but not default.css. gurr. I still see my resource in default.css, but it's the old CSS.

Restart plone - nope. CSS still the old one.

Check the filesystem, yep - the CSS is good there.

Go back to @@resourceregistry-controlpanel , click 'overrides' and look at the resource. The CSS looks good there too! I don't override tho - that defeats the purpose. Just noting that the TTW editor sees my on-disk changes.

check development mode again, check 'develop css' on my bundle with the css resource, click 'save'.

Refresh - NO CHANGE!

Stop the server, start PRODUCTION with /bin/instance/fg

Now, I get this message [Products.CMFPlone.resources.browser.combine:156][waitress] Wrote combined CSS bundle "default". Good!

Refresh page - and wow! Now I have my changes!

stop server, ./bin/instance start, and now we are all good.


Question: What is the NORMAL procedure to deploy a CSS change to production? Mine is a bit, well, odd.

Using the Plone resource registry for CSS and JS is a waste of time and due to its error-prone implementation and accumulation of misconceptions.

We usually include all CSS/JS on the Diazo layer or inject CSS/JS as needed in single templates (e.g. as part of an add-on if there are dedicated views) or we inject CSS/JS through a viewlet. Every other approach through the resource registry is unmanagable for us.

2 Likes

'unmanageable' is a very good word to use here.

I want a 'combine resources' button on the resource registry page. I don't need to compile any less (yet), I just need my css to work like I just uploaded it via ftp and a shift-refresh fixes the site.

Even for more complex usage case, we don't need the resource registry.
For onkopedia.com we use webpack and a build pipeline on Bitbucket that is doing the job automatically.
The most annoying (and stupid) restriction is that a bundle can only contain one JS file...completely irrelevant when a JS package comes with a core JS file and possible multiple plugin JS files (like in Datatables.net).

Taken from memory: Is there a 'last compiled setting that is required?" Something like

 <value key="last_compilation">2020-01-01 00:00:00</value>
1 Like

You should be able to just toggle debug off and on (to make the Save button active) and save if you are doing this TTP. I don't think you need to update last_compilation field. But you will run into cache issues so this is not my preferred way to do it.

We use a valuable utility from CMFPlone cookWhenChangingSettings as part of an upgrade step.

I'll assume you are familiar with GenericSetup and creating profiles. Here's an example where I import some upgrade profile and also update the css to rebuild the merged default.css/js

<genericsetup:upgradeStep
        title="Upgrade to 3.0.2"
        description="Remove h1 from TinyMCE"
        source="3010"
        destination="3020"
        handler=".upgrades.to_3_0_2"
        profile="ims.dermis:default"/>

python:

from Products.CMFPlone.resources.browser.cook import cookWhenChangingSettings
def to_3_0_2(context):
    context.runAllImportStepsFromProfile('profile-ims.dermis:upgrade_3_0_2')
    cookWhenChangingSettings(plone.api.portal.get())

For our use case, css from a particular package like this is going to be on multiple sites so you really want to have an upgrade step anyway. If it's just for one site it probably belongs in the theme.

1 Like

In earlier times (for my add-on medialog.subskins) I used to have a browser view that did this. No idea if it could still be done that way

Sure, I have one with a form to do this and/or invalidate theme cache for all Plone Sites on a Zope server. Again, I don't really use this anymore as I think having a profile upgrade step is better, it's more of a development thing.

Plone Foundation Code of Conduct