[wp-trac] [WordPress Trac] #46435: Injected editor-styles invalidate :root declarations thus breaking custom properties

[WordPress Trac]

#46435: Injected editor-styles invalidate :root declarations thus breaking custom
properties
--------------------------+-----------------------------
 Reporter:  mor10         |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  5.1
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46435>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform