BUG: style parsing error if it has @import

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

only Firefox (all versions)

Reproducible demo link

https://jsfiddle.net/03m6jz5f/

Describe the bug

How to reproduce the bug?

1. clear browser cache
2. try import template with style tag which has @import font url

What is the expected behavior? Style need to be load without JS errors

What is the current behavior? GJS don't wait for style load, and try parse null sheet (JS error). see screenshots:

If is necessary to execute some code in order to reproduce the bug, paste it here below: (sheet parse error)

function getSheet() {
    var style = document.createElement('style');

    style.innerHTML = `@charset "utf-8";
    @import url('https://fonts.googleapis.com/css2?family=Lato');
    /* Linked Styles */

    div {
        padding: 0 !important;
        margin: 0 !important;
    }
    `;

    document.head.appendChild(style);

    console.assert(style.sheet, 'sheet is', style.sheet);

    var sheet = style.sheet;
    document.head.removeChild(style);
 
    console.log('sheet is:', sheet);
}

getSheet();

if wait load/parse style tag error nor replicated:

async function getSheetOnLoad() {
    var style = document.createElement('style');

    style.innerHTML = `@charset "utf-8";
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
    /* Linked Styles */

    div {
        padding: 0 !important;
        margin: 0 !important;
    }
    `;

    let promise = new Promise(resolve => style.addEventListener('load', resolve));

    document.head.appendChild(style);

    await promise;

    console.assert(style.sheet, 'sheet is', style.sheet);

    var sheet = style.sheet;
    document.head.removeChild(style);

    console.log('sheet is:', sheet);
}

getSheetOnLoad();

Code of Conduct

• I agree to follow this project's Code of Conduct