[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:  jonsurrell
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  7.0
Component:  Customize                            |     Version:  4.7
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch has-unit-tests dev-        |     Focuses:  css
  feedback                                       |
-------------------------------------------------+-------------------------
Description changed by jonsurrell:

Old description:

> 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.

New description:

 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:

 {{{#!css
 @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#comment:54>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform