[wp-trac] [WordPress Trac] #29792: Grunt: Add a precommit task to check for CSS syntax errors

[WordPress Trac]

#29792: Grunt: Add a precommit task to check for CSS syntax errors
------------------------------+-----------------------
 Reporter:  helen             |       Owner:  netweb
     Type:  enhancement       |      Status:  assigned
 Priority:  normal            |   Milestone:  4.4
Component:  Build/Test Tools  |     Version:
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:
------------------------------+-----------------------

Comment (by netweb):

 @Helen

 Could you please update both the description and example for "multiple
 comma-separated values" in the CSS handbook
 https://make.wordpress.org/core/handbook/best-practices/coding-
 standards/css/#values

 Description: (Bold emphasis is mine and I'm seeking to clear up of any
 ambiguity here)

 > ''Multiple comma-separated values for one property should be separated
 by either a space or a newline, including within rgba(). Newlines should
 be used for lengthier multi-part values such as those for shorthand
 properties like box-shadow and text-shadow. '''Each subsequent value after
 the first should then be on a new line, indented to the same level as the
 selector and then spaced over to left-align with the previous value.'''''


 Example: (I've copied and pasted verbatim the example source, white space
 for the last two lines should be updated)
 {{{
 #!css
 .class { /* Correct usage of quotes */
         background-image: url(images/bg.png);
         font-family: "Helvetica Neue", sans-serif;
 }

 .class { /* Correct usage of zero values */
         font-family: Georgia, serif;
         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                                            0 1px 0 #fff;
 }
 }}}

 Updated Example 1: (This example is based on the current description as it
 stands)
 ( 2 tabs and 5 spaces for that 2nd last line, but whitespace is weird here
 on Trac)
 {{{
 #!css
 .class { /* Correct usage of quotes */
         background-image: url(images/bg.png);
         font-family: "Helvetica Neue", sans-serif;
 }

 .class { /* Correct usage of zero values */
         font-family: Georgia, serif;
         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                      0 1px 0 #fff;
 }
 }}}

 Your commit message in r34637:
 > ''Normally when there are multiple comma-separated values in CSS, each
 one would go on its own indented line. However, Autoprefixer appears to be
 tripping up on gradients at the moment, so it's going to stay on one line
 until we investigate upstream.''

 As such, what I actually expect the example to be is, and is also what the
 majority of WordPress' CSS code base uses:
 ( 2 tabs indentation for the 2nd and 3rd last lines)
 {{{
 #!css
 .class { /* Correct usage of quotes */
         background-image: url(images/bg.png);
         font-family: "Helvetica Neue", sans-serif;
 }

 .class { /* Correct usage of zero values */
         font-family: Georgia, serif;
         text-shadow:
                 0 -1px 0 rgba(0, 0, 0, 0.5),
                 0 1px 0 #fff;
 }
 }}}

 And finally the CSS handbook docs I believe should also match this and be
 something like this: (Emphasis mine)

 > ''Multiple comma-separated values for one property should be separated
 by either a space or a newline, including within rgba(). Newlines should
 be used for lengthier multi-part values such as those for shorthand
 properties like box-shadow and text-shadow. '''Each value should be on a
 new line, indented to the next tab indentation level of the parent
 selector and then left-aligned for each line.'''''

 If the above is not the case then we'll need to update both the
 Autoprefixer issue ([https://github.com/postcss/autoprefixer/issues/527
 527]) and pull request ([https://github.com/postcss/autoprefixer/pull/528
 528])  opened upstream by @Ocean90 to match our CSS standards.

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