jenkins-bot has submitted this change and it was merged. Change subject: Introduce stylelint ......................................................................
Introduce stylelint Introducing stylelint with configuration rules compliant to Wikimedia CSS Coding Standards 'stylelint-config-wikimedia', nullifying some for now and making majority pass. Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce --- A .stylelintrc M Gruntfile.js M modules/echo.variables.less M modules/nojs/mw.echo.alert.less M modules/nojs/mw.echo.alert.monobook.less M modules/nojs/mw.echo.badge.less M modules/nojs/mw.echo.notifications.less M modules/nojs/mw.echo.special.less M modules/styles/mw.echo.ui.ConfirmationPopupWidget.less M modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less M modules/styles/mw.echo.ui.DatedSubGroupListWidget.less M modules/styles/mw.echo.ui.FooterNoticeWidget.less M modules/styles/mw.echo.ui.MenuItemWidget.less M modules/styles/mw.echo.ui.NotificationBadgeWidget.less M modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less M modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less M modules/styles/mw.echo.ui.NotificationItemWidget.less M modules/styles/mw.echo.ui.NotificationItemWidget.modern.less M modules/styles/mw.echo.ui.NotificationsListWidget.less M modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less M package.json 21 files changed, 92 insertions(+), 68 deletions(-) Approvals: Catrope: Looks good to me, approved jenkins-bot: Verified diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..c0e9c2f --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,9 @@ +{ + "extends": "stylelint-config-wikimedia", + "rules": { + "declaration-no-important": null, + "no-descending-specificity": null, + "selector-no-id": null, + "selector-no-vendor-prefix": null + } +} diff --git a/Gruntfile.js b/Gruntfile.js index 6d8b3ed..1399e78 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,6 +5,7 @@ grunt.loadNpmTasks( 'grunt-jsonlint' ); grunt.loadNpmTasks( 'grunt-banana-checker' ); grunt.loadNpmTasks( 'grunt-jscs' ); + grunt.loadNpmTasks( 'grunt-stylelint' ); grunt.initConfig( { jshint: { @@ -27,6 +28,16 @@ '!docs/**' ] }, + // Lint – Styling + stylelint: { + options: { + syntax: 'less' + }, + all: [ + 'modules/**/*.css', + 'modules/**/*.less' + ] + }, banana: { all: 'i18n/' }, @@ -47,7 +58,7 @@ } } ); - grunt.registerTask( 'lint', [ 'jshint', 'jscs', 'jsonlint', 'banana' ] ); + grunt.registerTask( 'lint', [ 'jshint', 'jscs', 'stylelint', 'jsonlint', 'banana' ] ); grunt.registerTask( 'test', 'lint' ); grunt.registerTask( 'default', 'test' ); }; diff --git a/modules/echo.variables.less b/modules/echo.variables.less index f70cf4e..a24ba39 100644 --- a/modules/echo.variables.less +++ b/modules/echo.variables.less @@ -3,10 +3,10 @@ @badge-distance-adjustment: 1em; @notification-background-unseen: #dce8ff; -@notification-background-unread: white; +@notification-background-unread: #fff; @notification-background-read: #f1f1f1; -@badge-counter-background-seen: #71777D; +@badge-counter-background-seen: #71777d; @badge-counter-background-unseen-alert: #c33; @badge-counter-background-unseen-message: #36c; diff --git a/modules/nojs/mw.echo.alert.less b/modules/nojs/mw.echo.alert.less index ca83eae..2603398 100644 --- a/modules/nojs/mw.echo.alert.less +++ b/modules/nojs/mw.echo.alert.less @@ -1,7 +1,7 @@ .mw-echo-alert { border-radius: 2px; - background-color: #F9C557; + background-color: #f9c557; padding: 0.25em 0.8em 0.2em 0.8em; - color: #555555; + color: #555; font-weight: normal; } diff --git a/modules/nojs/mw.echo.alert.monobook.less b/modules/nojs/mw.echo.alert.monobook.less index f1cfd05..95db1c0 100644 --- a/modules/nojs/mw.echo.alert.monobook.less +++ b/modules/nojs/mw.echo.alert.monobook.less @@ -1,3 +1,3 @@ #pt-mytalk a.mw-echo-alert:hover { - background-color: #FAB951; + background-color: #fab951; } diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less index 404a45d..df6c29f 100644 --- a/modules/nojs/mw.echo.badge.less +++ b/modules/nojs/mw.echo.badge.less @@ -50,17 +50,17 @@ font-size: 0.9em; font-weight: bold; padding: 0 0.3em; - border: 1px solid white; + border: 1px solid #fff; border-radius: 2px; background-color: @badge-counter-background-seen; - content: attr(data-counter-text); - color: white; + content: attr( data-counter-text ); + color: #fff; } &.mw-echo-notifications-badge-all-read { opacity: 0.625; - &::after { + &:after { visibility: hidden; } } @@ -69,14 +69,14 @@ #pt-notifications-alert & { &:before { /* @embed */ - background-image: url('../icons/bell.svg'); + background-image: url( ../icons/bell.svg ); } } #pt-notifications-notice & { &:before { /* @embed */ - background-image: url('../icons/tray.svg'); + background-image: url( ../icons/tray.svg ); } } } diff --git a/modules/nojs/mw.echo.notifications.less b/modules/nojs/mw.echo.notifications.less index a4c5e4d..7c69be5 100644 --- a/modules/nojs/mw.echo.notifications.less +++ b/modules/nojs/mw.echo.notifications.less @@ -23,11 +23,11 @@ .mw-echo-notification { clear: both; display: block; - color: #6D6D6D; + color: #6d6d6d; line-height: 90%; margin: 0; min-height: 30px; - background-color: white; + background-color: #fff; position: relative; padding-top: 15px; padding-bottom: 10px; @@ -42,7 +42,7 @@ } .mw-echo-notifications { - background-color: #EEEEEE; + background-color: #eee; } .mw-echo-content { @@ -75,7 +75,7 @@ } .mw-echo-notification-footer { - color: #6D6D6D; + color: #6d6d6d; font-size: 11px; margin-top: 0.2em; diff --git a/modules/nojs/mw.echo.special.less b/modules/nojs/mw.echo.special.less index bd190c3..0630fd7 100644 --- a/modules/nojs/mw.echo.special.less +++ b/modules/nojs/mw.echo.special.less @@ -4,7 +4,7 @@ .client-js .mw-echo-special-nojs { min-height: 5em; /* @embed */ - background-image: url(../../images/pending.gif); + background-image: url( ../../images/pending.gif ); .mw-echo-special-container { display: none; @@ -43,7 +43,7 @@ } .mw-echo-date-section { - border-bottom: 1px solid #C9C9C9; + border-bottom: 1px solid #c9c9c9; margin: 20px 0 5px 0; color: #686868; display: inline-block; @@ -77,7 +77,7 @@ .mw-echo-special-navbar-bottom { margin-top: 20px; padding-top: 10px; - border-top: solid 1px #C9C9C9; + border-top: solid 1px #c9c9c9; } .mw-echo-notification { @@ -114,12 +114,12 @@ overflow-y: auto; .mw-echo-notification { - background-color: #F1F1F1; + background-color: #f1f1f1; &:hover { /* Fallback for IE<=8 */ - background-color: #F6F6F6; - background-color: rgba(0, 0, 0, 0.035); + background-color: #f6f6f6; + background-color: rgba( 0, 0, 0, 0.035 ); } &-unread { diff --git a/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less b/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less index f0d8de7..7c36cdb 100644 --- a/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less +++ b/modules/styles/mw.echo.ui.ConfirmationPopupWidget.less @@ -10,7 +10,7 @@ border-radius: 0.5em; padding: 0.5em 1em; text-align: left; - color: white; + color: #fff; span { vertical-align: middle; diff --git a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less index ea5030d..7f4758e 100644 --- a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less +++ b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less @@ -37,13 +37,12 @@ } } - &-separator { display: block; position: absolute; bottom: 0.4em; width: 100%; - border-bottom: 1px #eeeeee solid; + border-bottom: 1px solid #eee; .mw-echo-ui-crossWikiNotificationItemWidget-expanded &, .mw-echo-ui-bundleNotificationItemWidget-expanded & { @@ -55,10 +54,10 @@ cursor: default; padding: @bundle-group-padding; background-color: #f8f8f8; - -webkit-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 0px 0px rgba(0,0,0,0.05); - -moz-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 0px 0px rgba(0,0,0,0.05); - box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 0px 0px rgba(0,0,0,0.05); - border-bottom: 1px #dddddd solid; + -webkit-box-shadow: inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); + -moz-box-shadow: inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); + box-shadow: inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); + border-bottom: 1px solid #ddd; margin-bottom: 0.4em; } @@ -69,7 +68,7 @@ // Override OOUI's line height for labels line-height: 1em !important; font-weight: bold; - color: #666666; + color: #666; } } } diff --git a/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less b/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less index 6582873..4808d13 100644 --- a/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less +++ b/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less @@ -7,14 +7,15 @@ font-size: 1.5em; margin-right: 0.5em; display: inline-block; - &::first-letter { + + &:first-letter { text-transform: uppercase; } } &-secondary { font-size: 1.5em; - color: #777777; + color: #777; } } diff --git a/modules/styles/mw.echo.ui.FooterNoticeWidget.less b/modules/styles/mw.echo.ui.FooterNoticeWidget.less index 7678a29..8bc9c7d 100644 --- a/modules/styles/mw.echo.ui.FooterNoticeWidget.less +++ b/modules/styles/mw.echo.ui.FooterNoticeWidget.less @@ -3,7 +3,7 @@ .mw-echo-ui-footerNoticeWidget { padding: 0.5em; - border-bottom: 1px solid #DDDDDD; + border-bottom: 1px solid #ddd; white-space: normal; line-height: 16px; diff --git a/modules/styles/mw.echo.ui.MenuItemWidget.less b/modules/styles/mw.echo.ui.MenuItemWidget.less index 044bffd..8a0701d 100644 --- a/modules/styles/mw.echo.ui.MenuItemWidget.less +++ b/modules/styles/mw.echo.ui.MenuItemWidget.less @@ -22,12 +22,12 @@ // We have to override oojs-ui's color, which uses // a very specific selector font-weight: normal !important; - color: #333333 !important; + color: #333 !important; // Set max-width so buttons are truncated max-width: 15em; &-description { - color: #666666 !important; + color: #666 !important; } } @@ -39,8 +39,9 @@ &-dynamic-action { padding: 1.5em; + &:hover { - background: white; + background: #fff; } .mw-echo-ui-menuItemWidget-content span.oo-ui-labelElement-label { @@ -61,7 +62,7 @@ padding: 0.7em; &:hover { - background: #eeeeee; + background: #eee; } &-icon { @@ -85,7 +86,5 @@ line-height: 1em; } } - } - } diff --git a/modules/styles/mw.echo.ui.NotificationBadgeWidget.less b/modules/styles/mw.echo.ui.NotificationBadgeWidget.less index f12773f..b82f335 100644 --- a/modules/styles/mw.echo.ui.NotificationBadgeWidget.less +++ b/modules/styles/mw.echo.ui.NotificationBadgeWidget.less @@ -17,7 +17,7 @@ > .oo-ui-popupWidget-popup { > .oo-ui-popupWidget-head { height: 3.5em; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; > .oo-ui-iconWidget { /* ( 3.5 - 1.875 ) / 2 = 0.8125 */ @@ -56,7 +56,7 @@ } > .oo-ui-popupWidget-footer { - border-top: 1px solid #DDDDDD; + border-top: 1px solid #ddd; width: 100%; > .oo-ui-buttonGroupWidget { @@ -74,7 +74,7 @@ .box-sizing( border-box ); &:last-child { - border-left: 1px solid #DDDDDD; + border-left: 1px solid #ddd; } > .oo-ui-buttonElement-button { @@ -97,5 +97,4 @@ } } } - } diff --git a/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less b/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less index 4749f7c..6dc5914 100644 --- a/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less +++ b/modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less @@ -8,11 +8,11 @@ font-weight: normal; // Badge > .oo-ui-buttonElement-button { - border-radius: none; + border-radius: 0; } // Popup buttons .oo-ui-buttonElement-button:hover { // In modern, the hover color is white, which is unhelpful. - color: #666666; + color: #666; } } diff --git a/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less b/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less index c77317c..9f40892 100644 --- a/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less +++ b/modules/styles/mw.echo.ui.NotificationBadgeWidget.monobook.less @@ -3,17 +3,21 @@ #p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget { text-transform: none; font-weight: normal; - &, .oo-ui-popupWidget a.oo-ui-buttonElement-button { + + &, + .oo-ui-popupWidget a.oo-ui-buttonElement-button { color: #333; } + a { background-color: initial; } + // Badge > .oo-ui-buttonElement-button { &:hover { .oo-ui-labelElement-label { - color: black !important; + color: #000 !important; } } } @@ -23,5 +27,4 @@ // Override text-align that monobook uses for #p-personal li text-align: left; } - } diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less b/modules/styles/mw.echo.ui.NotificationItemWidget.less index 3df5746..875d754 100644 --- a/modules/styles/mw.echo.ui.NotificationItemWidget.less +++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less @@ -8,11 +8,11 @@ padding: 0.8em 1em 0.5em 1em; .box-sizing( border-box ); - border: 1px solid #DDDDDD; + border: 1px solid #ddd; border-bottom: 0; &:last-child { - border-bottom: 1px solid #DDDDDD; + border-bottom: 1px solid #ddd; } > a, @@ -108,7 +108,7 @@ display: table-cell; vertical-align: bottom; text-align: right; - color: black; + color: #000; opacity: @opacity-low; white-space: nowrap; width: 100%; @@ -226,8 +226,8 @@ &-initiallyUnseen { -webkit-animation-name: unseen-fadeout-to-read; animation-name: unseen-fadeout-to-read; - -webkit-animation-duration: .5s; - animation-duration: .5s; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-timing-function: ease-out; @@ -241,15 +241,16 @@ } } - background-color: #F1F1F1; + background-color: #f1f1f1; + &:hover { - background-color: #ECECEC; + background-color: #ececec; } &-unread { - background-color: white; + background-color: #fff; &:hover { - background-color: #FAFAFA; + background-color: #fafafa; } } diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less b/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less index cdc5686..f5c4ef9 100644 --- a/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less +++ b/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less @@ -2,20 +2,20 @@ #p-personal & a, #p-personal & a.new { // Oh and double everything for :hover since Modern does that too. - &, &:hover { + &, + &:hover { // In modern, the hover color is white, which is unhelpful. - color: #666666; + color: #666; text-decoration: none; } } - } #p-personal .mw-echo-ui-notificationBadgeButtonPopupWidget-footer a { - color: #666666; + color: #666; } // Override personal tools padding for links #p-personal li .mw-echo-state a { - padding: 0 0 0 0; + padding: 0; } diff --git a/modules/styles/mw.echo.ui.NotificationsListWidget.less b/modules/styles/mw.echo.ui.NotificationsListWidget.less index 63d7027..147cdb7 100644 --- a/modules/styles/mw.echo.ui.NotificationsListWidget.less +++ b/modules/styles/mw.echo.ui.NotificationsListWidget.less @@ -12,11 +12,11 @@ > a, &:hover > a { text-decoration: none; - color: #666666; + color: #666; } - &:not(:hover) a, - #p-personal &:not(:hover) a.new { - color: #666666; + &:not( :hover ) a, + #p-personal &:not( :hover ) a.new { + color: #666; } } diff --git a/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less b/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less index c44f504..83b7177 100644 --- a/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less +++ b/modules/styles/mw.echo.ui.SpecialHelpMenuWidget.less @@ -34,7 +34,7 @@ } &:hover { - background-color: #DDDDDD; + background-color: #ddd; } } } diff --git a/package.json b/package.json index 5c5a01c..29701fa 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "grunt-contrib-watch": "1.0.0", "grunt-banana-checker": "0.5.0", "grunt-jscs": "2.8.0", - "grunt-jsonlint": "1.0.7" + "grunt-jsonlint": "1.0.7", + "grunt-stylelint": "0.6.0", + "stylelint-config-wikimedia": "0.3.0" } } -- To view, visit https://gerrit.wikimedia.org/r/314214 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Echo Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: Catrope <r...@wikimedia.org> Gerrit-Reviewer: Mooeypoo <mor...@gmail.com> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits