[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:  Future Release
Component:  Build/Test Tools  |     Version:
 Severity:  normal            |  Resolution:
 Keywords:  has-patch         |     Focuses:
------------------------------+-----------------------------

Comment (by netweb):

 Using https://github.com/stylelint/stylelint with
 https://github.com/stylelint/stylelint-config-wordpress
 > Modern CSS linter.
 > A PostCSS plugin
 > Drops in seamlessly alongside our existing Autoprefixer PostCSS plugin

 Available rules
 https://github.com/stylelint/stylelint/blob/master/docs/rules.md
 Currently defined WordPress CSS rules https://github.com/stylelint
 /stylelint-config-wordpress/blob/master/index.js

 In [https://core.trac.wordpress.org/attachment/ticket/29792/29792.1.diff
 29792.1.diff]
 * 29792.1.diff is ideally what we would commit to WordPress once our rules
 have been finalized
 * Uses the rules per the currently defined rules in
 [https://github.com/stylelint/stylelint-config-wordpress stylelint-config-
 wordpress]
 * ~5,000 line output of `grunt postcss` ( core and colors )
 https://gist.github.com/ntwb/fe5383e53092ea41aec4

 In [https://core.trac.wordpress.org/attachment/ticket/29792/29792.2.diff
 29792.2.diff] an extra two rules are disabled:
 * 29792.2.diff gives us a way to test and hack on our rule definitions
 without needing to wait or change upstream rules in `stylelint-config-
 wordpress`
 * 240 instances of `rule-nested-empty-line-before`
 ([https://github.com/stylelint/stylelint/blob/master/src/rules/rule-
 nested-empty-line-before/README.md definition])
 * 647 instances of `rule-non-nested-empty-line-before`
 ([https://github.com/stylelint/stylelint/blob/master/src/rules/rule-non-
 nested-empty-line-before/README.md difinition])
 * ~4,000 line output of `grunt postcss` ( core and colors )
 https://gist.github.com/ntwb/6f1a7e2297ce3c6c2c7d

 To test either of these patches, first run `npm install` then running
 `grunt precommit`, `grunt postcss:core`, `grunt postcss:colors`, or `grunt
 postcss` (combined `core` and `colors`) should be enough to get you
 overwhelmed in CSS rule errors ;)

 The rules in https://github.com/stylelint/stylelint-config-wordpress were
 created based on our CSS coding standards
 https://make.wordpress.org/core/handbook/best-practices/coding-
 standards/css/.

 Now to test, tweak, and iterate these stylelint rules, our handbook CSS
 coding standards, and of course our CSS :)

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