[wp-trac] [WordPress Trac] #64418: Valid CSS is causing failure in the Additional CSS panel

[WordPress Trac]

#64418: Valid CSS is causing failure in the Additional CSS panel
--------------------------+-----------------------------
 Reporter:  drw158        |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  6.9
 Severity:  normal        |   Keywords:
  Focuses:  css           |
--------------------------+-----------------------------
 When using the Gutenberg Additional CSS panel, using some CSS properties
 get stripped even though they are valid. I believe this is the same
 sanitization as the Customizer, so I'm issuing here.

 Actually, I guess it doesn't strip the CSS, the edit just fails to save. I
 get an error in the block editor when I try to save — "Save failed".
 Related, the error message should at least say "Save failed: conflict in
 CSS" or something like that.

 WordPress CSS sanitizer strips @property rules due to angle brackets in
 syntax values.

 When saving CSS that contains @property rules with the required syntax
 descriptor (e.g., syntax: "<custom-ident>"). This is valid CSS per the
 spec. The @property at-rule requires syntax values to be wrapped in angle
 brackets.

 Here is the CSS that is causing the failure:

 {{{
 @property --animate {
   syntax: "<custom-ident>";
   inherits: true;
   initial-value: false;
 }
 }}}

 Also, the same error happens when you have html in your CSS comments. I
 believe I should be able to include example html in my CSS comments.

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