Skip to content

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.

    <remove src="Some_Module::css/some.css"/>

  • Is the CSS part of the Critical Rendering Path?
    If yes, consider removing the file and using inline Tailwind CSS classes instead.

    <remove src="Some_Module::css/some.min.css"/>

  • 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.body.addEventListener('touchstart', init, {once: true});
        document.body.addEventListener('mouseover', init, {once: true});
    }, {once: true});