Block editor not parsing CSS containing @layer added via add_editor_style

[matteo-greco]

Description

I have the following test stylesheet:

h1.thisisatest {
  font-size: 2.5rem;
}

@layer generate-default {

  section>.gb-container {
    inline-size: 100%;
    max-inline-size: var(--width-content);
    margin-inline: auto;
  }

}

h2.thisisatest {
  font-size: 2rem;
}

It is added to the block editor via:

add_action(
	'current_screen',
	function() {
		$current_screen = \get_current_screen();
		if ( null !== $current_screen && method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
			add_theme_support( 'editor-styles' ); // supposed to be not necessary, but it is when not using a FSE theme.
			add_editor_style( STYLESHEET_URL_HERE );
		}
	}
);

This causes the corresponding <style> tag generated in the block editor to be empty, while working correctly on the frontend.

If I remove the @layer declaration, the stylesheet's content gets inlined correctly.

What could be causing this?

Step-by-step reproduction instructions

1. Create a stylesheet with the code above
2. Add it to the block editor via add_editor_style
3. Open any page or post in the block editor and look for the generated inline styles. Notice you won't find the declarations from that stylesheet, but you'll find an empty <style> tag
4. Change the stylesheet to remove the @layer declaration
5. Open the page / post in the block editor again. Notice the generate inline style is now present.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.2.2 - default Gutenberg version (no plugin)
• No active plugins
• Empty custom FSE 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

[skorasaurus]

Thanks for reporting;

this core issue is that the library used to parse CSS within the block editor - needs to be fixed or replaced (imho); this issue is being tracked at #40444 and #42727

As a workaround, you may want to try what's suggested here #46277 (comment)

[strarsis]

New editor styles transformation approach using PostCSS is now merged (many thanks @zaguiini)!

[ju1ius]

@strarsis I'm still experiencing this same issue in WordPress 6.4.3. Has this PR landed into core?

[skorasaurus]

@strarsis I'm still experiencing this same issue in WordPress 6.4.3. Has this PR landed into core?

@ju1ius
Not yet, this PR was in Gutenberg 17.0 and which should generally be included in WordPress 6.5 which a release candidate is available for testing and the official version will be out on March 26th.