Injected editor-styles invalidate :root declarations thus breaking custom properties

[mor10]

Duplicate of Gutenberg issue 14297 (​https://github.com/WordPress/gutenberg/issues/14297) and closely related to closed (unresolved) Gutenberg issue 11955 (​https://github.com/WordPress/gutenberg/issues/11955)

When a theme uses CSS custom properties (​https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (aka "CSS variables") and declare those properties using the :root pseudo-class (​https://developer.mozilla.org/en-US/docs/Web/CSS/:root) in its editor styles, the injection script invalidates those declarations by outputting .editor-styles-wrapper :root.

The :root pseudo-class is a core feature of CSS and heavily used with CSS custom properties. The block editor rewriting this rule is effectively going against how CSS is meant to operate. CSS custom properties will see significantly increased use as browsers now provide wide-spread support (​https://caniuse.com/#feat=css-variables).

To Reproduce

1. In editor styles document, declare CSS custom properties with :root pseudo-class.
2. Use above custom properties in another rule.
3. Add editor style using add_editor_style().
4. Run in browser.
5. Observe the declared custom properties not kicking in.
6. Inspect code and find the :root pseudo-class has the .editor-styles-wrapper class prepended.

Expected behavior

:root pseudo-class should be preserved without alterations.

Additional context

See WP Rig PR 332 (​https://github.com/wprig/wprig/pull/332) and issue 361 (​https://github.com/wprig/wprig/issues/361) for further discussion and original discovery of the issue by @benoitchantre.

[joyously]

Ha! I knew there was a reason I didn't use the provided editor style function.
My theme uses CSS custom properties, but I load my editor style sheet myself.

[mor10]

Looks like this has been fixed in a patch in Gutenberg and will land in WP 5.2: ​https://github.com/WordPress/gutenberg/pull/13325

[sabernhardt]

Closing as reported-upstream with PR 13325, though resolving as fixed should be appropriate here, too.