Description

Classically, the assignment of CSS Custom Properties begins at the top-level (or "root") element through the use of :root. This is common usage and allows the values to be inherited down through the DOM tree.

(It is also one of the methods by which the popular IE11 polyfill css-vars-ponyfill works. I realise that IE11 support is being dropped from WordPress Core, but solving the inheritance issue would also allow this ponyfill to work again with no additional effort.)

Gutenberg adds the generated CSS Custom Properties to the body element, and not :root, through applying global-styles using the wp_add_inline_style function. This leads to issues where third-party CSS authors connect the generated properties to their own Custom Properties on :root. The generated properties are not available at the top root level, and so the standard CSS cascade (inheritance) doesn't work.

Recommendation (and request!): apply the global CSS Custom Properties to :root, not body.

Step-by-step reproduction instructions

:root {
   /* Theme author's definition */
    --my-theme--primary--color: var(--wp--preset--color--red);
}

body {
   /* WordPress Core definition */
    --wp--preset--color--red: #f00;
}

h1 {
    /* This value is noted as undefined*/
    color: var(--my-theme--primary--color);
}

Screenshots, screen recording, code snippet

Here's a Codepen example of the code above: https://codepen.io/permanenttourist/pen/oNeYgVP?editors=1100

Environment info

• WordPress 5.8.1
• All modern browsers (and IE11 with ponyfill)

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