Container queries in editor styles not parsed / generate error in block-editor.min.js

[pixply]

Description

I tried to use container queries (@container) within the custom Gutenberg editor CSS.

A simple css file with the following content only:

@container (min-width: 300px) {
  .container-item {
    width: 100%;
  }
}

added with add_editor_style('PATH_TO_CSS');, leads to the following error:

block-editor.min.js?ver=0c7c9b9a74ceb717d6eb:formatted:13916 Error while traversing the CSS: Error: undefined:3:3: missing '}'
tp @ block-editor.min.js?ver=0c7c9b9a74ceb717d6eb:formatted:13916
(anonymous) @ block-editor.min.js?ver=0c7c9b9a74ceb717d6eb:formatted:13987
c @ lodash.min.js?ver=4.17.19:9
Ou @ lodash.min.js?ver=4.17.19:9
ap @ block-editor.min.js?ver=0c7c9b9a74ceb717d6eb:formatted:13982
(anonymous) @ block-editor.min.js?ver=0c7c9b9a74ceb717d6eb:formatted:14019
useMemo @ react-dom.min.js?ver=17.0.1:9
e.useMemo @ react.min.js?ver=17.0.1:9
up @ block-editor.min.js?ver=0c7c9b9a74ceb717d6eb:formatted:14019
ct @ react-dom.min.js?ver=17.0.1:9
os @ react-dom.min.js?ver=17.0.1:9
Ur @ react-dom.min.js?ver=17.0.1:9
Ir @ react-dom.min.js?ver=17.0.1:9
Dr @ react-dom.min.js?ver=17.0.1:9
Pr @ react-dom.min.js?ver=17.0.1:9
(anonymous) @ react-dom.min.js?ver=17.0.1:9
unstable_runWithPriority @ react.min.js?ver=17.0.1:9
xn @ react-dom.min.js?ver=17.0.1:9
Nn @ react-dom.min.js?ver=17.0.1:9
_n @ react-dom.min.js?ver=17.0.1:9
Er @ react-dom.min.js?ver=17.0.1:9
Rt @ react-dom.min.js?ver=17.0.1:9
e @ data.min.js?ver=d8cf5b24f99c64ae47d6:9
t @ data.min.js?ver=d8cf5b24f99c64ae47d6:9
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
p @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ redux-routine.min.js?ver=c9ea6c0df793258797e6:9
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ core-data.min.js?ver=d8d458b31912f858bcdf:2
await in (anonymous) (async)
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ redux-routine.min.js?ver=c9ea6c0df793258797e6:9
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
ie @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
setTimeout (async)
a @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
i @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ edit-post.min.js?ver=2baffbeec6cbe5171dee:7
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:9
l @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:2
(anonymous) @ data.min.js?ver=d8cf5b24f99c64ae47d6:9
Ke @ data.min.js?ver=d8cf5b24f99c64ae47d6:9
vo @ edit-post.min.js?ver=2baffbeec6cbe5171dee:7
ct @ react-dom.min.js?ver=17.0.1:9
os @ react-dom.min.js?ver=17.0.1:9
Ur @ react-dom.min.js?ver=17.0.1:9
Ir @ react-dom.min.js?ver=17.0.1:9
Dr @ react-dom.min.js?ver=17.0.1:9
Pr @ react-dom.min.js?ver=17.0.1:9
Er @ react-dom.min.js?ver=17.0.1:9
ul @ react-dom.min.js?ver=17.0.1:9
(anonymous) @ react-dom.min.js?ver=17.0.1:9
Lr @ react-dom.min.js?ver=17.0.1:9
ml @ react-dom.min.js?ver=17.0.1:9
e.render @ react-dom.min.js?ver=17.0.1:9
Po @ edit-post.min.js?ver=2baffbeec6cbe5171dee:7
(anonymous) @ post.php?post=22&action=edit:343

Step-by-step reproduction instructions

1. Create a css file with container queries
2. Add it in the functions.php via add_editor_style('PATH_TO_CSS');
3. Edit a page/blog item in the backend via Gutenberg editor
4. All CSS in the added editor css file is ignored
5. Error (see above) is display in browser console

Screenshots, screen recording, code snippet

No response

Environment info

• Wordpress Version 6.1.1
• Gutenberg Version that comes with 6.1.1, I don't see where I can check this...
• Chrome 107.0.5304.110
• MacOS Ventura 13.0.1 on MacBook Pro

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

[talldan]

It looks like the issue is this code:
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/utils/transform-styles/ast/parse.js

It parses the CSS, and it must not understand the newer syntax of container queries. I haven't seen this code before, so I don't know much about it, but it was added in #9008. It seems like it's based on another library.

It might be possible for Gutenberg to use this upstream library directly (there were some comments about doing that in the original PR about this). However, that library does seem to have similar issues over parsing newer syntax - reworkcss/css#165.

[sethrubenstein]

Seconding that this is a problem we've run into. In the interim we can load our editor stylesheet via enqueue_block_editor_assets but it would be nice to utilize add_editor_style as intended.

[tomjn]

It looks like modifying it to add an atContainer function would be somewhat straight forward, the issues on that repo imply @layer is also a problem.

It looks like the other library hasn't seen updates since 2021 and has maintenance issues, possibly semi-abandoned?

[tomjn]

I've made a best effort attempt to add container queries to the relevant files in #49915, I don't have much more bandwidth to look at this today though

[octoxan]

Is there any workaround for this we can do for now? Built blocks using container queries since blocks are their perfect use case only to find out that it breaks the editor styling.

[strarsis]

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

[fabiankaegy]

Marking this as resolved by #49521

[krokodok]

This still seems to make problems for nested container queries, like this:

.foo {
    @container (min-width: 700px) {
         color: red;    
     } 
}

Can anyone reproduce this?