Editor styles are broken when a Google Font @import is included

[andreiglingeanu]

Description

When the editor style contains this line, it breaks the page entirely:

@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@400;500;600;700&display=swap');

Step-by-step reproduction instructions

1. Start with any classic theme
2. Put the code from down below in the functions.php
3. Observe the problem

add_editor_style('some-style.css');

@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@400;500;600;700&display=swap');

:root {
	--test: red;
}

Result:

Expected result:

@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@400;500;600;700&display=swap');

.editor-styles-wrapper {
	--test: red;
}

Screenshots, screen recording, code snippet

This seems like a problem within the block-editor/src/utils/transform-styles/transforms/wrap.js file.

Environment info

WordPress 6.3, a classic theme.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[cbirdsong]

This also occurs when using an @import for Adobe Fonts/Typekit.

[jorgefilipecosta]

Howdy @andreiglingeanu and @cbirdsong, much appreciation for flagging the problem. I delved into it and successfully replicated it. This glitch might impact the editor styles on many sites.

[jorgefilipecosta]

The issue stems from a bug in the CSS parsing library we used:
https://github.com/reworkcss/css

It's feasible to reproduce this using:

const css = require('css');
const obj = css.parse(`@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@400;500;600;700&display=swap');

:root {
	--test: red;
}`);
console.log(obj);

For instance, on npm runkit: https://npm.runkit.com/css.

Our task involves rectifying our local fork packages/block-editor/src/utils/transform-styles/ast/parse.js and submitting an upstream patch to ensure universal benefit from the fix.

[annezazu]

@jorgefilipecosta what can be done to move forward on this? This issue is labeled high priority but has sat for a number of months. The high priority label should be used for important items that need quick attention. To help ensure these issues are actionable, I'm doing a sweep and wanted to check in here to ensure we close this promptly whether that's with your PR or bringing in others to help resolve.