One thing you could do @Mycar is consolidate your commonly used module's css to a modules.css file. But I do agree, it would be nice to have a setting for module's css files to have the async option that is available in the function that @dennisedson mentioned.
That's why I created this idea to add an async option to module's meta.json file.
I like kudos almost as much as cake – a close second.
Thank you @Mycar for bringing up this issue. We have been pondering over this same problem for a while within our small studio of two. Another possible solution for this issue would be a bit of a javascript. Here’s a code snippet that might work well to give you control over the loading process.
var linkLoader = function (param) {
var headID = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
headID.appendChild(link);
link.href = param.href;
};
document.addEventListener("DOMContentLoaded", function(event) {
linkLoader({
href: "URL_TO_STYLE_FILE" // Example href: "{{ get_asset_url("/modules/shared_layout_styles.css") }}"
});
});
One thing you could do @Mycar is consolidate your commonly used module's css to a modules.css file. But I do agree, it would be nice to have a setting for module's css files to have the async option that is available in the function that @dennisedson mentioned.
That's why I created this idea to add an async option to module's meta.json file.
I like kudos almost as much as cake – a close second.
The stylesheets are loaded in <head>, but the code is automatically generated by hubspot so I have no easy access to it. How can I add attributes to these tags?