Container Queries Plugin Crashes WordPress Editor

[bruchh]

Hi,

I enabled the container queries plugin in tailwind.config.js and noticed that the styles in the wordpress editor were no longer applied. Deactivating the plugin fixed the issue.

Here's the error message: Error while traversing the CSS: Error: undefined:848:3: missing '}'

I'm using wordpress 6.3 and the latest version of underscoretw.

[gregsullivan]

Hello—thanks for posting this!

Have you already made the changes suggested here:

#60

Please let me know about the above, and we can go from there!

[bruchh]

I made the suggested changes but the editor still breaks.

[gregsullivan]

Could you run npm run dev, reload the editor, and then share the CSS in your style.css file around the line flagged in the error?

[gregsullivan]

It looks like this is an issue with the block editor itself. This appears to be the relevant pull request:

WordPress/gutenberg#49915

It was merged last week, which I believe puts it on track for WordPress 6.4.

Please let me know if you think something else is at play here; in the meantime, I'm going to consider whether I can conditionally exclude container queries from the CSS output from the editor, or whether this is better addressed via documentation.

[bruchh]

Could you run npm run dev, reload the editor, and then share the CSS in your style.css file around the line flagged in the error?

It's the third line with the font weight:
.prose :where(code):not(:where([class~="not-prose"] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
}

I think you're right and it's an issue with the block editor.

[scheinercc]

I'm going to consider whether I can conditionally exclude container queries from the CSS output from the editor, or whether this is better addressed via documentation.

It is 100% that. Regarding considering to putting work in it seems to me they are close to releasing that fix 🤞🏻 Depends when this gets released I guess https://github.com/WordPress/gutenberg/milestone/212

[gregsullivan]

Yeah, I think this is one that will be resolved soon enough that we can limit documentation to this issue. The release candidate for 16.5 is already out:

https://github.com/WordPress/gutenberg/releases/tag/v16.5.0-rc.1

@bruchh, I would suggest running the Gutenberg plugin until WordPress 6.4 is released, at which point you should be able to stop doing so. It looks like the fix will be in next week's release.

[scheinercc]

Seems like the fix is coming to Core WP with version 6.4 on 7.11.

• Gutenberg 16.5 will land in WordPress 6.4
• Current set release date for WordPress 6.4 is 7. November

[scheinercc]

FYI, upgraded to WP 6.4.1, switched "development:tailwind:editor" and "production:tailwind:editor" back on and all works perfectly fine now :)

[gregsullivan]

Thanks for following up to confirm 6.4.1 resolved this!