Bundling Google Icon Fonts CSS file using Plone's Resource Registry

Plone Support Add-on Development
1

I just attempted to bundle a CDN based CSS file from Google Fonts in my Resource Registry (registry.xml).

<registry xmlns:i18n="http://xml.zope.org/namespaces/i18n"
i18n:domain="plone">
    <records prefix="plone.bundles/customer-theme"
         interface='Products.CMFPlone.interfaces.IBundleRegistry'>
  <value key="enabled">True</value>
  <value key="jscompilation"></value>
  <value key="csscompilation">https://fonts.googleapis.com/icon?family=Material+Icons</value>
  <value key="last_compilation">2019-11-26 00:00:00</value>
  <value key="compile">False</value>
  <value key="depends">plone</value>
</records>
</registry>

The output I get looks like this:
<link rel="stylesheet" type="text/css" href="http://localhost:8080/Plone/https://fonts.googleapis.com/icon?family=Material+Icons?version=2019-11-26%2000%3A00%3A00.000001" data-bundle="customer-theme" />

My CDN link is prefixed by the Portal URL (not what I want).
Is there a way to tell my bundle that this URL is actually an external link?

2

In the end I did the following in the customer.theme/src/customer/theme/browser/static folder

npm install material-design-icons

This resulted in a node bundle located under

customer.theme/src/customer/theme/browser/static/node_modules/material-design-icons

My registry.xml entry now looks like this:

<registry xmlns:i18n="http://xml.zope.org/namespaces/i18n"
i18n:domain="plone">
    <records prefix="plone.bundles/customer-theme"
         interface='Products.CMFPlone.interfaces.IBundleRegistry'>
  <value key="enabled">True</value>
  <value key="jscompilation"></value>
  <value key="csscompilation">++resource++customer.theme/node_modules/material-design-icons/iconfont/material-icons.css</value>
  <value key="last_compilation">2019-11-26 00:00:00</value>
  <value key="compile">False</value>
  <value key="depends">plone</value>
</records>
</registry>

I know some persons frown on this approach but I'll be committing the node_modules folder to my repository. Until I figure out how to use a CDN for my Google based icon fonts this will be my approach.

3

this was working on Plone 4, so it seems just another bug on the new resource registries; please open an issue so the framework team take note about it.

4

just use the @import in a css file?

Why would anyone frown on the approach you took? Seems fine to me.

5

I've seem discussions of this being bad form among some in the JS/NPM community (could also be my imagination).

So you don't consider this a bug then?

6

I generally don't like including resources from a CDN(use cloudflare and you have your own CDN) so I'd prefer your way.

I do think it is still a bug or at the very least a missing feature. Seems to me that if you specify a remote resource, it should simple include it as you were initially expecting. Those bundles wouldn't be mergeable though.

7

Bug reported: https://github.com/plone/Products.CMFPlone/issues/1770

1 Like