global-styles-inline-css rule introduces breaking changes " :root :where(body)"

[mleathem]

Description

A CSS rule applied to body, introduces some breaking CSS (via global-styles-inline-css ).
Ther maybe other CSS that could be dangerous, but the body selector in particular is stronger than user's may have implemented in their themes ( eg 'body {}' ) and therefore breaks (was in my case!)

here is the CSS

:root :where(body) { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--system); font-size: var(--wp--preset--font-size--medium); line-height: 1.75; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }

Note line height does not even use a CSS variable.

for example in my case (using Underscore and a child theme)

• '--wp--preset--font-family--system' was not define... since no fallback was given a system font was implemented.
• '--wp--preset--font-size--medium' was defined but different than the theme CSS defined body font-size.
• line-height also made a visible difference (no attempt was made to use a css-var)

Step-by-step reproduction instructions

1. Go to wordpress site that has Guttenberg enabled and is up-to-date
2. CSS is injected into the head <style id="global-styles-inline-css">...

Screenshots, screen recording, code snippet

No response

Environment info

No response

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]

Thanks for reporting this. I can confirm on 6.5 these styles had the body selector (0,0,1) specificity, while on 6.6 it's :root :where(body) (0,1,0).

[mleathem]

thanks @talldan for prompt response.
I assume I dont really need to add comments now this issue has been closed (is cause by #63726 )

in fairness I realize now the undefined css var was coming from my own theme.json > styles
But the site had been tested and is live, then this change in implementation manifested as a broken styles.
(i have a workaround in place with added CSS to reset the ':root :where(body)' )

[talldan]

@mleathem Nothing further should be required. It has now been fixed in the codebase, and it's targeted for release in either WordPress 6.6.1 or 6.6.2 as well as the next gutenberg plugin release.

[hellofromtonya]

Hello @mleathem 👋

Could you please share a link to your (personal, not company) WordPress profile?

As a contributor to this bugfix and with a WordPress profile, you will be given contributor credit (props) when the bugfix is committed into WordPress Core (which will appear on your WordPress profile when it ships in 6.6.2).

If you don't have a WordPress profile yet, I invite you to create one on WordPress.org by selecting the Register link at the top of that page.

It's also helpful to link your GitHub account to your WordPress profile.

Thank you