VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/314214
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(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/14/314214/1
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: newchange
Gerrit-Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
