[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                                       |
-------------------------------------------------+-------------------------

Comment (by jonsurrell):

 There ''is'' a workaround for this limitation. CSS strings have Unicode
 escaping, and the syntax uses a string for the CSS type (like `<custom-
 ident>` or `<angle>`), the problematic `<` character can use CSS string
 Unicode escapes.

 In the CSS type for `syntax:`, `<` should be replaced with `\3C ` and `>`
 replaced with `\3E` as follows (white space is important):

 {{{#!css
 /* From ticket description */
 @property --animate {
   syntax: "\3C custom-ident\3E";
   inherits: true;
   initial-value: false;
 }

 /* Arbitrary example */
 @property --rotation {
   syntax: "\3C angle\3E";
   inherits: true;
   initial-value: 45deg;
 }

 h1, h2, h3, h4, h5, h6 {
   transform: rotate( var(--rotation) );
 }
 }}}

 The problematic `<>` characters no longer appear in the CSS. This passes
 the validation and is not mangled by KSES filters.

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