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

WordPress Trac noreply at wordpress.org
Tue Oct 13 09:45:17 UTC 2015


#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):

 '''Alignment via Whitespace'''

 Replying to [comment:40 nacin]:
 > Where we should change our CSS to conform to the rules, rather than add
 ignore rules:
 >  * For `@-webkit-keyframes dice-color-change`, we don't align things the
 way we do for `@-webkit-keyframes customize-reload`. We might as well make
 them standardized so they ignore the same things.

 I haven't changed any of these currently, all I have done is added
 comments so that Stylelint skips the rules that would cause failures, some
 examples of these are below, no doubt they are more "readable" using the
 extra whitespace formatting but at this stage we there are no Stylelint
 rules defined to allow this.

 src/wp-admin/css/customize-controls.css
 {{{
 #!css
 /* stylelint-disable block-opening-brace-newline-after, block-closing-
 brace-newline-before */
 @-webkit-keyframes dice-color-change {
         0% { color: #d4b146; }
         50% { color: #ef54b0; }
         75% { color: #7190d3; }
         100% { color: #d4b146; }
 }

 @keyframes dice-color-change {
         0% { color: #d4b146; }
         50% { color: #ef54b0; }
         75% { color: #7190d3; }
         100% { color: #d4b146; }
 }
 /* stylelint-enable */
 }}}

 src/wp-admin/css/customize-controls.css
 {{{
 #!css
 /* stylelint-disable block-opening-brace-newline-after, block-opening-
 brace-space-before, block-closing-brace-newline-before */
 @-webkit-keyframes customize-reload {
         0%   { opacity: 0; }
         100% { opacity: 1; }
 }

 @keyframes customize-reload {
         0%   { opacity: 0; }
         100% { opacity: 1; }
 }
 /* stylelint-enable */
 }}}

 src/wp-admin/css/nav-menus.css
 {{{
 #!css
 /* stylelint-disable block-opening-brace-newline-after, number-zero-
 length-no-unit, block-closing-brace-newline-before */
 /* WARNING: The factor of 30px is hardcoded into the nav-menus JavaScript.
 */
 .menu-item-depth-0 { margin-left: 0px; }
 .menu-item-depth-1 { margin-left: 30px; }
 .menu-item-depth-2 { margin-left: 60px; }
 .menu-item-depth-3 { margin-left: 90px; }
 .menu-item-depth-4 { margin-left: 120px; }
 .menu-item-depth-5 { margin-left: 150px; }
 .menu-item-depth-6 { margin-left: 180px; }
 .menu-item-depth-7 { margin-left: 210px; }
 .menu-item-depth-8 { margin-left: 240px; }
 .menu-item-depth-9 { margin-left: 270px; }
 .menu-item-depth-10 { margin-left: 300px; }
 .menu-item-depth-11 { margin-left: 330px; }

 .menu-item-depth-0 .menu-item-transport { margin-left: 0px; }
 .menu-item-depth-1 .menu-item-transport { margin-left: -30px; }
 .menu-item-depth-2 .menu-item-transport { margin-left: -60px; }
 .menu-item-depth-3 .menu-item-transport { margin-left: -90px; }
 .menu-item-depth-4 .menu-item-transport { margin-left: -120px; }
 .menu-item-depth-5 .menu-item-transport { margin-left: -150px; }
 .menu-item-depth-6 .menu-item-transport { margin-left: -180px; }
 .menu-item-depth-7 .menu-item-transport { margin-left: -210px; }
 .menu-item-depth-8 .menu-item-transport { margin-left: -240px; }
 .menu-item-depth-9 .menu-item-transport { margin-left: -270px; }
 .menu-item-depth-10 .menu-item-transport { margin-left: -300px; }
 .menu-item-depth-11 .menu-item-transport { margin-left: -330px; }

 body.menu-max-depth-0 { min-width: 950px !important; }
 body.menu-max-depth-1 { min-width: 980px !important; }
 body.menu-max-depth-2 { min-width: 1010px !important; }
 body.menu-max-depth-3 { min-width: 1040px !important; }
 body.menu-max-depth-4 { min-width: 1070px !important; }
 body.menu-max-depth-5 { min-width: 1100px !important; }
 body.menu-max-depth-6 { min-width: 1130px !important; }
 body.menu-max-depth-7 { min-width: 1160px !important; }
 body.menu-max-depth-8 { min-width: 1190px !important; }
 body.menu-max-depth-9 { min-width: 1220px !important; }
 body.menu-max-depth-10 { min-width: 1250px !important; }
 body.menu-max-depth-11 { min-width: 1280px !important; }
 /* stylelint-enable */
 }}}

 src/wp-admin/css/customize-nav-menus.css
 {{{
 #!css
 /* stylelint-disable block-opening-brace-newline-after, block-opening-
 brace-space-before, selector-combinator-space-before, block-closing-brace-
 newline-before */

 /* WARNING: The 20px factor is hard-coded in JS. */
 .menu-item-depth-0  { margin-left: 0;     }
 .menu-item-depth-1  { margin-left: 20px;  }
 .menu-item-depth-2  { margin-left: 40px;  }
 .menu-item-depth-3  { margin-left: 60px;  }
 .menu-item-depth-4  { margin-left: 80px;  }
 .menu-item-depth-5  { margin-left: 100px; }
 .menu-item-depth-6  { margin-left: 120px; }
 .menu-item-depth-7  { margin-left: 140px; }
 .menu-item-depth-8  { margin-left: 160px; } /* Not likely to be used or
 useful beyond this depth */
 .menu-item-depth-9  { margin-left: 180px; }
 .menu-item-depth-10 { margin-left: 200px; }
 .menu-item-depth-11 { margin-left: 220px; }

 /* @todo handle .menu-item-settings width */
 .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
 .menu-item-depth-1  > .menu-item-bar { margin-right: 20px;  }
 .menu-item-depth-2  > .menu-item-bar { margin-right: 40px;  }
 .menu-item-depth-3  > .menu-item-bar { margin-right: 60px;  }
 .menu-item-depth-4  > .menu-item-bar { margin-right: 80px;  }
 .menu-item-depth-5  > .menu-item-bar { margin-right: 100px; }
 .menu-item-depth-6  > .menu-item-bar { margin-right: 120px; }
 .menu-item-depth-7  > .menu-item-bar { margin-right: 140px; }
 .menu-item-depth-8  > .menu-item-bar { margin-right: 160px; }
 .menu-item-depth-9  > .menu-item-bar { margin-right: 180px; }
 .menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }
 .menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }

 /* Submenu left margin. */
 .menu-item-depth-0  .menu-item-transport { margin-left: 0;      }
 .menu-item-depth-1  .menu-item-transport { margin-left: -20px;  }
 .menu-item-depth-3  .menu-item-transport { margin-left: -60px;  }
 .menu-item-depth-4  .menu-item-transport { margin-left: -80px;  }
 .menu-item-depth-2  .menu-item-transport { margin-left: -40px;  }
 .menu-item-depth-5  .menu-item-transport { margin-left: -100px; }
 .menu-item-depth-6  .menu-item-transport { margin-left: -120px; }
 .menu-item-depth-7  .menu-item-transport { margin-left: -140px; }
 .menu-item-depth-8  .menu-item-transport { margin-left: -160px; }
 .menu-item-depth-9  .menu-item-transport { margin-left: -180px; }
 .menu-item-depth-10 .menu-item-transport { margin-left: -200px; }
 .menu-item-depth-11 .menu-item-transport { margin-left: -220px; }

 /* WARNING: The 20px factor is hard-coded in JS. */
 .reordering .menu-item-depth-0  { margin-left: 0;     }
 .reordering .menu-item-depth-1  { margin-left: 15px;  }
 .reordering .menu-item-depth-2  { margin-left: 30px;  }
 .reordering .menu-item-depth-3  { margin-left: 45px;  }
 .reordering .menu-item-depth-4  { margin-left: 60px;  }
 .reordering .menu-item-depth-5  { margin-left: 75px;  }
 .reordering .menu-item-depth-6  { margin-left: 90px;  }
 .reordering .menu-item-depth-7  { margin-left: 105px; }
 .reordering .menu-item-depth-8  { margin-left: 120px; } /* Not likely to
 be used or useful beyond this depth */
 .reordering .menu-item-depth-9  { margin-left: 135px; }
 .reordering .menu-item-depth-10 { margin-left: 150px; }
 .reordering .menu-item-depth-11 { margin-left: 165px; }

 .reordering .menu-item-depth-0  > .menu-item-bar { margin-right: 0;     }
 .reordering .menu-item-depth-1  > .menu-item-bar { margin-right: 15px;  }
 .reordering .menu-item-depth-2  > .menu-item-bar { margin-right: 30px;  }
 .reordering .menu-item-depth-3  > .menu-item-bar { margin-right: 45px;  }
 .reordering .menu-item-depth-4  > .menu-item-bar { margin-right: 60px;  }
 .reordering .menu-item-depth-5  > .menu-item-bar { margin-right: 75px;  }
 .reordering .menu-item-depth-6  > .menu-item-bar { margin-right: 90px;  }
 .reordering .menu-item-depth-7  > .menu-item-bar { margin-right: 105px; }
 .reordering .menu-item-depth-8  > .menu-item-bar { margin-right: 120px; }
 .reordering .menu-item-depth-9  > .menu-item-bar { margin-right: 135px; }
 .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
 /* stylelint-enable */
 }}}

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


More information about the wp-trac mailing list