build: Introduce stylelint and make pass

Change-Id: I48d542580d767df2d17ce4c6668e9e233a0f7904

.stylelintrc

@@ -0,0 +1,7 @@
+{
+	"extends": "stylelint-config-wikimedia",
+	"rules": {
+		"selector-no-id": null,
+		"no-descending-specificity": null
+	}
+}

Gruntfile.js

@@ -4,6 +4,7 @@ module.exports = function ( grunt ) {
 	grunt.loadNpmTasks( 'grunt-eslint' );
 	grunt.loadNpmTasks( 'grunt-jsonlint' );
 	grunt.loadNpmTasks( 'grunt-banana-checker' );
+	grunt.loadNpmTasks( 'grunt-stylelint' );
 
 	grunt.initConfig( {
 		eslint: {
@@ -20,9 +21,15 @@ module.exports = function ( grunt ) {
 				'!node_modules/**'
 			]
 		},
-		banana: conf.MessagesDirs
+		banana: conf.MessagesDirs,
+		stylelint: {
+			all: [
+				'*.{le,c}ss',
+				'skinStyles/*.{le,c}ss'
+			]
+		}
 	} );
 
-	grunt.registerTask( 'test', [ 'eslint', 'jsonlint', 'banana' ] );
+	grunt.registerTask( 'test', [ 'eslint', 'jsonlint', 'banana', 'stylelint' ] );
 	grunt.registerTask( 'default', 'test' );
 };

package.json

@@ -11,6 +11,8 @@
     "grunt-eslint": "19.0.0",
     "eslint-config-wikimedia": "0.3.0",
     "grunt-banana-checker": "0.5.0",
-    "grunt-jsonlint": "1.0.7"
+    "grunt-jsonlint": "1.0.7",
+    "grunt-stylelint": "0.6.0",
+    "stylelint-config-wikimedia": "0.3.0"
   }
 }

responsive.less

@@ -5,7 +5,7 @@
 */
 
 div#mw-head {
-	position: static !important;
+	position: static !important; /* stylelint-disable-line declaration-no-important */
 	margin-top: 0.5em;
 }
 

screen-hd.less

@@ -1,6 +1,6 @@
 /* Vector screen styles for high definition displays */
 
-@import "variables.less";
+@import 'variables.less';
 
 .mw-body {
 	margin-left: 11em;

screen.less

@@ -1,8 +1,7 @@
 /* Vector screen styles */
 
-@import "variables.less";
-
-@import "components/common.less";
-@import "components/navigation.less";
-@import "components/footer.less";
-@import "components/externalLinks.less";
+@import 'variables.less';
+@import 'components/common.less';
+@import 'components/navigation.less';
+@import 'components/footer.less';
+@import 'components/externalLinks.less';

skinStyles/mediawiki.notification.less

@@ -1,4 +1,4 @@
-@import "../variables";
+@import '../variables';
 
 /* mediawiki.notification */
 
@@ -15,20 +15,20 @@ body {
 
 	.mw-notification {
 		background-color: #fff;
-		background-color: rgba(255, 255, 255, 0.93);
+		background-color: rgba( 255, 255, 255, 0.93 );
 		padding: 0.75em 1.5em;
 		border: solid 1px @content-border-color;
 		border-radius: 0.75em;
-		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
+		box-shadow: 0 2px 10px 0 rgba( 0, 0, 0, 0.125 );
 	}
 
 	.mw-notification-type-warn {
 		border-color: #f5be00; /* yellow */
-		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125), 0 0 0.75em rgba(245, 190, 0, 0.25) inset;
+		box-shadow: 0 2px 10px 0 rgba( 0, 0, 0, 0.125 ), 0 0 0.75em rgba( 245, 190, 0, 0.25 ) inset;
 	}
 
 	.mw-notification-type-error {
-		border-color: red;
-		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125), 0 0 0.75em rgba(255, 0, 0, 0.25) inset;
+		border-color: #f00; /* red */
+		box-shadow: 0 2px 10px 0 rgba( 0, 0, 0, 0.125 ), 0 0 0.75em rgba( 255, 0, 0, 0.25 ) inset;
 	}
 }

skinStyles/mediawiki.special.preferences.styles.less

@@ -1,5 +1,5 @@
-@import "mediawiki.mixins";
-@import "../variables";
+@import 'mediawiki.mixins';
+@import '../variables';
 
 /**
  * The following code is highly modified from monobook. It would be nice if the
@@ -73,16 +73,16 @@
 	background-color: #fafafa;
 
 	fieldset {
-		border: none;
+		border: 0;
 		border-top: solid 1px #ccc;
 	}
 
-	>fieldset {
-		border: none;
+	> fieldset {
+		border: 0;
 		padding: 0;
 		margin: 1em;
 
-		>legend {
+		> legend {
 			display: none;
 		}
 	}
@@ -107,6 +107,6 @@
 
 .htmlform-tip {
 	font-size: x-small;
-	padding: .2em 2em;
+	padding: 0.2em 2em;
 	color: #666;
 }

variables.less

@@ -10,7 +10,7 @@
 @content-line-height: 1.6;
 @content-padding: 1em;
 @content-heading-font-size: 1.8em;
-@content-heading-font-family: "Linux Libertine", Georgia, Times, serif;
+@content-heading-font-family: 'Linux Libertine', Georgia, Times, serif;
 @content-heading-font-family-generic: sans-serif;
 @body-background-color: #fff;
 @heading-line-height: 1.3;