Introduce stylelint and make pass

Change-Id: Iaf12e7773f21d42ff59591680abdf248bf121224
This commit is contained in:
Ed Sanders
2016-05-24 14:34:27 +01:00
committed by Niklas Laxström
parent aaa144ca1d
commit e6dcdb56c4
12 changed files with 95 additions and 69 deletions

3
.stylelintrc Normal file
View File

@@ -0,0 +1,3 @@
{
"extends": "stylelint-config-wikimedia"
}

View File

@@ -6,6 +6,7 @@ module.exports = function ( grunt ) {
grunt.loadNpmTasks( 'grunt-contrib-jshint' ); grunt.loadNpmTasks( 'grunt-contrib-jshint' );
grunt.loadNpmTasks( 'grunt-jscs' ); grunt.loadNpmTasks( 'grunt-jscs' );
grunt.loadNpmTasks( 'grunt-jsonlint' ); grunt.loadNpmTasks( 'grunt-jsonlint' );
grunt.loadNpmTasks( 'grunt-stylelint' );
grunt.initConfig( { grunt.initConfig( {
jshint: { jshint: {
@@ -23,6 +24,18 @@ module.exports = function ( grunt ) {
jscs: { jscs: {
src: '<%= jshint.all %>' src: '<%= jshint.all %>'
}, },
stylelint: {
options: {
syntax: 'less'
},
src: [
'**/*.css',
'**/*.less',
'!lib/**',
'!node_modules/**',
'!vendor/**'
]
},
jsonlint: { jsonlint: {
all: [ all: [
'**/*.json', '**/*.json',
@@ -35,6 +48,6 @@ module.exports = function ( grunt ) {
} }
} ); } );
grunt.registerTask( 'test', [ 'jshint', 'jscs', 'jsonlint', 'banana' ] ); grunt.registerTask( 'test', [ 'jshint', 'jscs', 'stylelint', 'jsonlint', 'banana' ] );
grunt.registerTask( 'default', 'test' ); grunt.registerTask( 'default', 'test' );
}; };

View File

@@ -8,6 +8,8 @@
"grunt-banana-checker": "0.5.0", "grunt-banana-checker": "0.5.0",
"grunt-contrib-jshint": "1.0.0", "grunt-contrib-jshint": "1.0.0",
"grunt-jscs": "2.8.0", "grunt-jscs": "2.8.0",
"grunt-jsonlint": "1.0.7" "grunt-jsonlint": "1.0.7",
"grunt-stylelint": "0.3.0",
"stylelint-config-wikimedia": "0.2.0"
} }
} }

View File

@@ -1,3 +1,3 @@
#pt-uls { #pt-uls { /* stylelint-disable selector-no-id */
text-transform: none; text-transform: none;
} }

View File

@@ -1,4 +1,6 @@
@import "mediawiki.mixins"; @import 'mediawiki.mixins';
/* stylelint-disable selector-no-id */
#p-lang .body ul .uls-trigger, #p-lang .body ul .uls-trigger,
#p-lang .pBody ul .uls-trigger { #p-lang .pBody ul .uls-trigger {
@@ -6,12 +8,14 @@
padding: 0; padding: 0;
} }
/* stylelint-enable selector-no-id */
.mw-interlanguage-selector, .mw-interlanguage-selector,
.mw-interlanguage-selector:active { .mw-interlanguage-selector:active {
cursor: pointer; cursor: pointer;
padding: 4px 6px 4px 25px; padding: 4px 6px 4px 25px;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: normal;
.background-image-svg( '../images/compact-links-trigger.svg', '../images/compact-links-trigger.png' ); .background-image-svg( '../images/compact-links-trigger.svg', '../images/compact-links-trigger.png' );
background-size: 18px; background-size: 18px;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -22,16 +26,16 @@
.mw-interlanguage-selector:active, .mw-interlanguage-selector:active,
.mw-interlanguage-selector.selector-open { .mw-interlanguage-selector.selector-open {
color: #555555; color: #555;
background-color: #cccccc; background-color: #ccc;
} }
.interlanguage-uls-menu:before { .interlanguage-uls-menu:before {
background: none repeat scroll 0 0 #FCFCFC; background: none repeat scroll 0 0 #fcfcfc;
border-left: 1px solid rgba( 0, 0, 0, 0.2 ); border-left: 1px solid rgba( 0, 0, 0, 0.2 );
border-top: 1px solid rgba( 0, 0, 0, 0.2 ); border-top: 1px solid rgba( 0, 0, 0, 0.2 );
box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 ); box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 );
content: ""; content: '';
height: 24px; height: 24px;
width: 24px; width: 24px;
left: -13px; left: -13px;

View File

@@ -21,7 +21,7 @@
.uls-menu.callout .caret-before, .uls-menu.callout .caret-before,
.uls-menu.callout .caret-after { .uls-menu.callout .caret-after {
border-top: 10px solid transparent; border-top: 10px solid transparent;
border-right: 10px solid #C9C9C9; border-right: 10px solid #c9c9c9;
border-bottom: 10px solid transparent; border-bottom: 10px solid transparent;
display: inline-block; display: inline-block;
left: -11px; left: -11px;
@@ -31,13 +31,13 @@
} }
.uls-menu.callout .caret-after { .uls-menu.callout .caret-after {
border-right: 10px solid #FCFCFC; border-right: 10px solid #fcfcfc;
display: inline-block; display: inline-block;
left: -10px; left: -10px;
} }
.uls-menu.callout--languageselection .caret-after { .uls-menu.callout--languageselection .caret-after {
border-right: 10px solid #FFF; border-right: 10px solid #fff;
} }
.uls-ui-languages button { .uls-ui-languages button {
@@ -58,7 +58,7 @@ button.uls-more-languages {
} }
.settings-text { .settings-text {
color: #555555; color: #555;
font-size: 9pt; font-size: 9pt;
} }
@@ -74,10 +74,10 @@ div.display-settings-block:hover .settings-text {
} }
.uls-icon-back { .uls-icon-back {
background: transparent url('../images/back-grey-ltr.png') no-repeat scroll center center; background: transparent url( ../images/back-grey-ltr.png ) no-repeat scroll center center;
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/back-grey-ltr.svg'); background-image: -webkit-linear-gradient( transparent, transparent ), url( ../images/back-grey-ltr.svg );
/* @embed */ /* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/back-grey-ltr.svg'); background-image: linear-gradient( transparent, transparent ), url( ../images/back-grey-ltr.svg );
background-size: 28px; background-size: 28px;
background-position: center center; background-position: center center;
height: 32px; height: 32px;
@@ -85,7 +85,7 @@ div.display-settings-block:hover .settings-text {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
border-right: 1px solid #C9C9C9; border-right: 1px solid #c9c9c9;
opacity: 0.8; opacity: 0.8;
} }
@@ -96,7 +96,7 @@ div.display-settings-block:hover .settings-text {
/* TODO: move to jquery.uls */ /* TODO: move to jquery.uls */
.grid .uls-search { .grid .uls-search {
padding-left: 0px; padding-left: 0;
} }
.uls-search-label { .uls-search-label {
@@ -105,5 +105,5 @@ div.display-settings-block:hover .settings-text {
} }
.uls-filterinput { .uls-filterinput {
padding-left: 0px; padding-left: 0;
} }

View File

@@ -1,4 +1,4 @@
@import "mediawiki.mixins"; @import 'mediawiki.mixins';
div.display-settings-block { div.display-settings-block {
background: transparent no-repeat left top; background: transparent no-repeat left top;
@@ -22,7 +22,7 @@ div.display-settings-block {
} }
.ext-uls-sub-panel { .ext-uls-sub-panel {
border-top: 1px solid #EEEEEE; border-top: 1px solid #eee;
padding-top: 25px; padding-top: 25px;
top: -20px; top: -20px;
position: relative; position: relative;
@@ -31,12 +31,12 @@ div.display-settings-block {
.uls-display-settings-font-selectors { .uls-display-settings-font-selectors {
margin: 5px 0 15px 0; margin: 5px 0 15px 0;
border-top: 1px solid #EEEEEE; border-top: 1px solid #eee;
} }
.uls-font-item { .uls-font-item {
border-bottom: 1px solid #EEEEEE; border-bottom: 1px solid #eee;
background: #FBFBFB; background: #fbfbfb;
margin: 0; margin: 0;
padding: 10px 0; padding: 10px 0;
} }
@@ -48,7 +48,7 @@ div.display-settings-block {
.uls-content-fonts:hover, .uls-content-fonts:hover,
.uls-ui-fonts:hover { .uls-ui-fonts:hover {
background-color: #F6F6F6; background-color: #f6f6f6;
} }
.uls-font-label strong { .uls-font-label strong {
@@ -56,7 +56,7 @@ div.display-settings-block {
} }
.uls-font-label { .uls-font-label {
color: #555555; color: #555;
font-size: 10pt; font-size: 10pt;
} }
@@ -64,6 +64,6 @@ div.display-settings-block {
font-weight: bold; font-weight: bold;
} }
#uls-display-settings-anon-log-in-cta { #uls-display-settings-anon-log-in-cta { /* stylelint-disable-line selector-no-id */
font-size: 10pt; font-size: 10pt;
} }

View File

@@ -1,4 +1,4 @@
@import "mediawiki.mixins"; @import 'mediawiki.mixins';
div.input-settings-block { div.input-settings-block {
background: transparent no-repeat left top; background: transparent no-repeat left top;
@@ -48,7 +48,7 @@ div.input-settings-block {
background: transparent no-repeat center top; background: transparent no-repeat center top;
.background-image-svg( '../images/cog.svg', '../images/cog.png' ); .background-image-svg( '../images/cog.svg', '../images/cog.png' );
background-size: auto 14px; background-size: auto 14px;
border-left: 1px solid #CCCCCC; border-left: 1px solid #ccc;
width: 22px; width: 22px;
height: 14px; height: 14px;
position: absolute; position: absolute;
@@ -73,15 +73,15 @@ div.input-settings-block {
font-size: 11pt; font-size: 11pt;
} }
.down+.uls-input-settings-caret { .down + .uls-input-settings-caret {
display: inline-block; display: inline-block;
width: 0; width: 0;
height: 0; height: 0;
border-top: none; border-top: 0;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-bottom: 8px solid #f0f0f0; border-bottom: 8px solid #f0f0f0;
content: ""; content: '';
position: relative; position: relative;
vertical-align: bottom; vertical-align: bottom;
top: 12px; top: 12px;
@@ -101,7 +101,7 @@ div.input-settings-block {
} }
.uls-ime-notification-bubble .link { .uls-ime-notification-bubble .link {
color: #0645AD; color: #0645ad;
cursor: pointer; cursor: pointer;
} }

View File

@@ -1,4 +1,6 @@
@import "mediawiki.mixins"; @import 'mediawiki.mixins';
/* stylelint-disable selector-no-id */
#p-lang .uls-settings-trigger { #p-lang .uls-settings-trigger {
background: transparent no-repeat right top; background: transparent no-repeat right top;

View File

@@ -1,11 +1,13 @@
/* stylelint-disable selector-no-id */
#uls-settings-block { #uls-settings-block {
border-top: 1px solid #C9C9C9; border-top: 1px solid #c9c9c9;
background: #f8f8f8; background: #f8f8f8;
background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0)); background: -webkit-gradient( linear, left top, left bottom, from( #fbfbfb ), to( #f0f0f0 ) );
background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0); background: -webkit-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0); background: -moz-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -o-linear-gradient(top, #FBFBFB, #F0F0F0); background: -o-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: linear-gradient(#FBFBFB, #F0F0F0); background: linear-gradient( #fbfbfb, #f0f0f0 );
padding-left: 10px; padding-left: 10px;
line-height: 1.2em; line-height: 1.2em;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
@@ -34,19 +36,15 @@
line-height: 20pt; line-height: 20pt;
margin-top: 0; margin-top: 0;
font-weight: normal; font-weight: normal;
border: none; border: 0;
padding: 15px 0 3px 15px; padding: 15px 0 3px 15px;
color: #555; color: #555;
} }
.language-settings-buttons {
text-align: right;
}
#languagesettings-settings-panel { #languagesettings-settings-panel {
padding-left: 5%; padding-left: 5%;
color: #252525; color: #252525;
background: #FFFFFF; background: #fff;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
@@ -73,18 +71,18 @@
} }
#language-settings-dialog { #language-settings-dialog {
background: #FBFBFB; background: #fbfbfb;
} }
.uls-language-settings-close-block { .uls-language-settings-close-block {
background: #FFFFFF; background: #fff;
} }
#languagesettings-panels .menu-section.active, #languagesettings-panels .menu-section.active,
#languagesettings-panels .menu-section.active:hover { #languagesettings-panels .menu-section.active:hover {
color: black; color: #000;
background-color: #F0F0F0; background-color: #f0f0f0;
border-left-color: #3366BB; border-left-color: #36b;
} }
.settings-menu-items .menu-section { .settings-menu-items .menu-section {
@@ -94,14 +92,15 @@
} }
.settings-menu-items .menu-section:hover { .settings-menu-items .menu-section:hover {
background-color: #F5F5F5; background-color: #f5f5f5;
} }
.language-settings-buttons { .language-settings-buttons {
border-top: 1px solid #F0F0F0; border-top: 1px solid #f0f0f0;
margin-top: 25px; margin-top: 25px;
padding: 15px; padding: 15px;
width: auto; width: auto;
text-align: right;
} }
.language-settings-buttons button { .language-settings-buttons button {
@@ -110,16 +109,16 @@
.uls-ui-languages p, .uls-ui-languages p,
.checkbox { .checkbox {
color: #555555; color: #555;
font-size: 10pt; font-size: 10pt;
} }
/* mediawiki.ui does not have a pressed state style. */ /* mediawiki.ui does not have a pressed state style. */
#languagesettings-panels .mw-ui-pressed { #languagesettings-panels .mw-ui-pressed {
background-color: #D8D8D8; background-color: #d8d8d8;
} }
.checkbox input[type="checkbox"] { .checkbox input[type='checkbox'] {
margin-left: 0; margin-left: 0;
} }
@@ -127,7 +126,7 @@
color: #252525; color: #252525;
} }
label.checkbox input[type="checkbox"] { label.checkbox input[type='checkbox'] {
float: left; float: left;
} }
@@ -136,10 +135,10 @@ label.checkbox input[type="checkbox"] {
} }
.uls-icon-close { .uls-icon-close {
background: transparent url('../images/close.png') no-repeat scroll center center; background: transparent url( ../images/close.png ) no-repeat scroll center center;
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/close.svg'); background-image: -webkit-linear-gradient( transparent, transparent ), url( ../images/close.svg );
/* @embed */ /* @embed */
background-image: linear-gradient(transparent, transparent), url('../images/close.svg'); background-image: linear-gradient( transparent, transparent ), url( ../images/close.svg );
float: right; float: right;
padding: 15px; padding: 15px;
cursor: pointer; cursor: pointer;

View File

@@ -1,4 +1,4 @@
/* Don't show it to users who disabled JS */ /* Don't show it to users who disabled JS */
.client-nojs #pt-uls { .client-nojs #pt-uls { /* stylelint-disable-line selector-no-id */
display: none; display: none;
} }

View File

@@ -1,4 +1,6 @@
@import "mediawiki.mixins"; @import 'mediawiki.mixins';
/* stylelint-disable selector-no-id */
/* /*
* The trigger can be placed in the personal toolbar near the username * The trigger can be placed in the personal toolbar near the username
@@ -24,19 +26,20 @@
/* Opera for some inexplicable reason confuses right and left padding with */ /* Opera for some inexplicable reason confuses right and left padding with */
/* RTL text direction here (bug T47142). x:-o-prefocus won't match anything, */ /* RTL text direction here (bug T47142). x:-o-prefocus won't match anything, */
/* but will make other browsers ignore this rule. */ /* but will make other browsers ignore this rule. */
x:-o-prefocus, body.rtl li#pt-uls { x:-o-prefocus,
body.rtl li#pt-uls {
/* @noflip */ /* @noflip */
direction: ltr; direction: ltr;
} }
#uls-settings-block { #uls-settings-block {
border-top: 1px solid #C9C9C9; border-top: 1px solid #c9c9c9;
background: #f8f8f8; background: #f8f8f8;
background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0)); background: -webkit-gradient( linear, left top, left bottom, from( #fbfbfb ), to( #f0f0f0 ) );
background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0); background: -webkit-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0); background: -moz-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: -o-linear-gradient(top, #FBFBFB, #F0F0F0); background: -o-linear-gradient( top, #fbfbfb, #f0f0f0 );
background: linear-gradient(#FBFBFB, #F0F0F0); background: linear-gradient( #fbfbfb, #f0f0f0 );
padding-left: 10px; padding-left: 10px;
line-height: 1.2em; line-height: 1.2em;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;