[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:  needs-patch       |     Focuses:
------------------------------+-----------------------

Comment (by netweb):

 '''Rule questions: Parentheses and whitespace'''

 Replying to [comment:40 nacin]:
 >  * I noticed the removal of spaces within parentheses. Spacing within
 parentheses is a thing WP likes to do. Can we keep them? I wonder if
 enforcing them ends up being less changes. (This would mean `function-
 parentheses-space-inside: always`.)

 Replying to [comment:42 helen]:
 > Let's please keep them and allow minification to strip them for minified
 files. As with PHP and JS, it's great for readability, which is extremely
 important for development files.

 This is defined in our CSS handbook as: `Do not pad parentheses with
 spaces` [https://make.wordpress.org/core/handbook/best-practices/coding-
 standards/css/#values here] with examples:

 * `background-image: url(images/bg.png);`
 * `text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),`
 * `@media all and (max-width: 699px) and (min-width: 520px) {` <- Note see
 addendum below

 Per the above the current rule configuration is: `"function-parentheses-
 space-inside": [ 2, "never" ],` and the full concise rule definition is
 [https://github.com/stylelint/stylelint/blob/master/src/rules/function-
 parentheses-space-inside/README.md here]

 Stats: 394 changes required to remove this whitespace versus 816 changes
 to include this whitespace.

 ----

 Circling back to comment 11 above:
 Replying to [comment:11 nacin]:
 > No thanks. :) I patched CSSLint for this: https://github.com/CSSLint
 /parser-lib/pull/125
 That pull request created for CSSLint would make the use of whitespace
 valid in media queries to coincide with the existing CSSLint rule that
 disallowed whitespace in media queries, as such both of the following
 would be valid CSSLint:
 * `@media all and (max-width: 699px) and (min-width: 520px) {`
 * `@media all and ( max-width: 699px ) and ( min-width: 520px ) {`

 We can do the same to both allow and disallow whitespace by not defining
 the `function-parentheses-space-inside` rule.

 This is indeed the case in why the `media-query-parentheses-space-inside`
 rule ([https://github.com/stylelint/stylelint/blob/master/src/rules/media-
 query-parentheses-space-inside/README.md definition]) has not been defined
 in the current `stylelint-config-wordpress` ruleset as Nacin had
 explicitly created a pull request to allow with and without whitespace in
 media queries and I was not going to define that rule because that
 decision had already been made in this ticket ;)

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