External Non-Luma CSS
Some modules include CSS files that are independent on Magento and the Magento LESS system.
Commonly these are style are bundled with JavaScript libraries.
When deciding how to deal with them multiple factors need to be taken into account:
-
Is the file part of an external JavaScript library and the library will be removed by the compatibility module?
If yes, remove the CSS file, too. -
Is the CSS part of the Critical Rendering Path?
If yes, consider removing the file and using inline Tailwind CSS classes instead. -
Is the CSS NOT used in the Critical Rendering Path and independent of Magento Luma?
In this case we suggest using the external CSS inside of Hyvä, but consider loading it when needed instead of always loading it automatically.
The following example loads the CSS file on demand on the first user interaction with the page.document.addEventListener('DOMContentLoaded', function () { function init() { const link = document.createElement('link') link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '<?= $escaper->escapeUrl($block->getViewFileUrl('Some_Module::css/some.css')) ?>'; document.head.append(link); } document.body.addEventListener('touchstart', init, {once: true}); document.body.addEventListener('mouseover', init, {once: true}); }, {once: true});