build: Introduce stylelint to lint for css errors

Also update the rest of the CI world whilst we're at it.

Change-Id: Iaad2867797cccb2dd0df7758e448b553859fa62c

.csslintrc

@@ -1,13 +0,0 @@
-{
-	"adjoining-classes": false,
-	"box-model": false,
-	"box-sizing": false,
-	"fallback-colors": false,
-	"important": false,
-	"outline-none": false,
-	"qualified-headings": false,
-	"unique-headings": false,
-	"universal-selector": false,
-	"unqualified-attributes": false,
-	"gradients": false
-}

.jshintrc

@@ -3,11 +3,13 @@
 	"bitwise": true,
 	"eqeqeq": true,
 	"freeze": true,
-	"latedef": true,
+	"latedef": "nofunc",
+	"futurehostile": true,
 	"noarg": true,
 	"nonew": true,
 	"undef": true,
 	"unused": true,
+
 	"strict": false,
 
 	// Relaxing

.stylelintrc

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

Gruntfile.js

@@ -2,10 +2,10 @@
 module.exports = function ( grunt ) {
 	grunt.loadNpmTasks( 'grunt-banana-checker' );
 	grunt.loadNpmTasks( 'grunt-jsonlint' );
-	grunt.loadNpmTasks( 'grunt-contrib-csslint' );
 	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
 	grunt.loadNpmTasks( 'grunt-contrib-watch' );
 	grunt.loadNpmTasks( 'grunt-jscs' );
+	grunt.loadNpmTasks( 'grunt-stylelint' );
 
 	grunt.initConfig( {
 		banana: {
@@ -17,11 +17,22 @@ module.exports = function ( grunt ) {
 				'!node_modules/**'
 			]
 		},
-		csslint: {
+		stylelint: {
-			options: {
+			core: {
-				csslintrc: '.csslintrc'
+				src: [
+					'**/*.css',
+					'!modules/ve-math/**',
+					'!node_modules/**'
+				]
 			},
-			all: 'modules/ve-math/*.css'
+			've-math': {
+				options: {
+					configFile: 'modules/ve-math/.stylelintrc'
+				},
+				src: [
+					'modules/ve-math/**/*.css'
+				]
+			}
 		},
 		jshint: {
 			options: {
@@ -53,6 +64,6 @@ module.exports = function ( grunt ) {
 		}
 	} );
 
-	grunt.registerTask( 'test', [ 'jshint', 'jscs:main', 'csslint', 'jsonlint', 'banana' ] );
+	grunt.registerTask( 'test', [ 'jshint', 'jscs:main', 'stylelint', 'jsonlint', 'banana' ] );
 	grunt.registerTask( 'default', 'test' );
 };

modules/ext.math.css

@@ -4,34 +4,59 @@
  * Author     : Physikerwelt (Moritz Schubotz)
  * Description: Shows browser-dependent math output.
  */
-@namespace m url('http://www.w3.org/1998/Math/MathML');
+@namespace m url( http://www.w3.org/1998/Math/MathML );
 
 /* Default style for MathML. */
-.mwe-math-mathml-inline { display: inline !important; }
+.mwe-math-mathml-inline {
-.mwe-math-mathml-display { display: block !important; margin-left: auto; margin-right: auto; }
+	display: inline !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.mwe-math-mathml-display {
+	display: block !important; /* stylelint-disable-line declaration-no-important */
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .mwe-math-mathml-a11y {
 	/* We try to hide the MathML formula in a way that still makes it accessible to accessibility tools. */
-	clip: rect(1px, 1px, 1px, 1px);
+	clip: rect( 1px, 1px, 1px, 1px );
 	overflow: hidden;
 	position: absolute;
 	width: 1px;
 	height: 1px;
 	opacity: 0;
 }
+
 m|math {
 	/* Try some popular OpenType MATH fonts before the WOFF fallback */
-	font-family: Cambria Math, Latin Modern Math, STIX Math, LatinModernMathWOFF, serif;
+	font-family: 'Cambria Math', 'Latin Modern Math', 'STIX Math', 'LatinModernMathWOFF', serif;
 }
 
 /* Default style for the image fallback. */
 /* Note: We had to use !important rules because of conflicts with the style
 generated by Mathoid. See https://gerrit.wikimedia.org/r/#/c/166213/ */
-.mwe-math-fallback-image-inline { display: inline-block; vertical-align: middle; }
+.mwe-math-fallback-image-inline {
-.mwe-math-fallback-image-display { display: block; margin-left: auto !important; margin-right: auto !important; }
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.mwe-math-fallback-image-display {
+	display: block;
+	margin-left: auto !important; /* stylelint-disable-line declaration-no-important */
+	margin-right: auto !important; /* stylelint-disable-line declaration-no-important */
+}
 
 /* Default style for the source fallback. */
-.mwe-math-fallback-source-inline { display: inline; vertical-align: middle; }
+.mwe-math-fallback-source-inline {
-.mwe-math-fallback-source-display { display: block; margin-left: auto; margin-right: auto; }
+	display: inline;
+	vertical-align: middle;
+}
+
+.mwe-math-fallback-source-display {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
 
 /* PNG related styles from core */
 img.tex {

modules/ext.math.desktop.css

@@ -10,6 +10,6 @@
 	/* WOFF version of Latin Modern Math.
 	 * See https://github.com/fred-wang/MathFonts
 	 */
-	font-family: LatinModernMathWOFF;
+	font-family: 'LatinModernMathWOFF';
 	src: url( ./LatinModern/latinmodern-math.woff );
 }

modules/ve-math/.stylelintrc

@@ -0,0 +1,12 @@
+{
+	"extends": "stylelint-config-wikimedia",
+	"rules": {
+		"no-browser-hacks": [ true, {
+			"browsers": [ ">5%", "Chrome >= 1", "Firefox >= 15", "Explorer >= 9", "Edge >= 1", "iOS >= 7", "Opera >= 12", "Safari >= 7", "ExplorerMobile >= 10", "Android >= 3", "not BlackBerry >= 1", "ChromeAndroid >= 1", "FirefoxAndroid >= 1", "OperaMobile >= 12", "not OperaMini >= 1" ]
+		} ],
+
+		"no-unsupported-browser-features": [ true, {
+			"browsers": [ ">5%", "Chrome >= 1", "Firefox >= 15", "Explorer >= 9", "Edge >= 12", "iOS >= 7", "Opera >= 12", "Safari >= 7", "ExplorerMobile >= 10", "Android >= 4", "not BlackBerry >= 1", "ChromeAndroid >= 1", "FirefoxAndroid >= 1", "OperaMobile >= 12", "not OperaMini >= 1" ]
+		} ],
+	}
+}

modules/ve-math/tools/makeSvgsAndCss.js

@@ -88,7 +88,7 @@
 				}
 
 				cssRule = cssPrefix + className + ' {\n' +
-					'\tbackground-image: url(data:image/svg+xml,' + encodeURIComponentForCSS( svg ) + ');\n';
+					'\tbackground-image: url( data:image/svg+xml,' + encodeURIComponentForCSS( svg ) + ' );\n';
 
 				if ( symbol.alignBaseline ) {
 					// Convert buttonHeight from em to ex, because SVG height is given in ex. (This is an

modules/ve-math/ve.ce.MWMathNode.css

@@ -3,8 +3,8 @@
  * Browser-specific hacks are bad but let's use that for now...
  * See http://browserhacks.com
  */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
+@media screen and ( -webkit-min-device-pixel-ratio: 0 ) { /* stylelint-disable-line media-feature-name-no-vendor-prefix */
 	.ve-ce-mwMathNode .mwe-math-mathml-a11y {
-		display: none !important;
+		display: none !important; /* stylelint-disable-line declaration-no-important */
 	}
 }

modules/ve-math/ve.ui.MWMathDialog.css

@@ -46,10 +46,11 @@
 	margin: 0 0.1em 0.1em 0;
 	box-sizing: border-box;
 	border: 1px solid #e6e6e6;
+	/* stylelint-disable no-unsupported-browser-features */
 	-webkit-transition: border-color 200ms;
 	-moz-transition: border-color 200ms;
-	-o-transition: border-color 200ms;
 	transition: border-color 200ms;
+	/* stylelint-enable no-unsupported-browser-features */
 }
 
 .ve-ui-mwMathPage-symbol-wide {
@@ -57,7 +58,7 @@
 }
 
 .ve-ui-mwMathPage-symbol-contain {
-	background-size: contain;
+	background-size: contain; /* stylelint-disable-line no-unsupported-browser-features */
 }
 
 .ve-ui-mwMathPage-symbol-largeLayout {

modules/ve-math/ve.ui.MWMathInspector.css

@@ -6,5 +6,5 @@
  */
 
 .ve-ui-mwMathInspector-content .ve-ui-mwExtensionWindow-input textarea {
-	font-family: monospace, Courier;
+	font-family: monospace, 'Courier';
 }

package.json

@@ -4,13 +4,14 @@
     "test": "grunt test"
   },
   "devDependencies": {
-    "grunt": "0.4.5",
+    "grunt": "1.0.1",
-    "grunt-cli": "0.1.13",
+    "grunt-banana-checker": "0.5.0",
-    "grunt-banana-checker": "0.4.0",
+    "grunt-cli": "1.2.0",
+    "grunt-contrib-jshint": "1.0.0",
+    "grunt-contrib-watch": "1.0.0",
+    "grunt-jscs": "2.8.0",
     "grunt-jsonlint": "1.0.7",
-    "grunt-contrib-csslint": "0.5.0",
+    "grunt-stylelint": "0.3.0",
-    "grunt-contrib-jshint": "0.11.3",
+    "stylelint-config-wikimedia": "0.1.0"
-    "grunt-contrib-watch": "0.6.1",
-    "grunt-jscs": "2.1.0"
   }
 }