Update linters

* Update eslint and stylelint config
* Fix Gruntfile.js to actually run stylelint

.eslintrc.json

@@ -1,14 +1,11 @@
 {
-	"extends": "wikimedia",
+	"root": true,
-	"env": {
+	"extends": [
-		"browser": true,
+		"wikimedia/client",
-		"jquery": true,
+		"wikimedia/jquery"
-		"qunit": true
+	],
-	},
 	"globals": {
-		"require": false
+		"jQuery": "readonly",
-	},
+		"$": "off"
-	"rules": {
-		"dot-notation": [ "error", { "allowKeywords": true } ]
 	}
 }

.gitignore

@@ -7,3 +7,4 @@
 /dist
 data/supplementalData.xml
 /vendor
+.eslintcache

Gruntfile.js

@@ -1,5 +1,7 @@
 'use strict';
 
+/* eslint-env node, es6 */
+
 module.exports = function ( grunt ) {
 	grunt.loadNpmTasks( 'grunt-eslint' );
 	grunt.loadNpmTasks( 'grunt-stylelint' );
@@ -7,9 +9,13 @@ module.exports = function ( grunt ) {
 
 	grunt.initConfig( {
 		eslint: {
+			options: {
+				extensions: [ '.js', '.json' ],
+				cache: true
+			},
 			all: [
-				'**/*.js',
+				'**/*.{js,json}',
-				'src/jquery.uls.data.js',
+				'!src/jquery.uls.data.js',
 				'!examples/**',
 				'!node_modules/**',
 				'!vendor/**'
@@ -29,7 +35,7 @@ module.exports = function ( grunt ) {
 		}
 	} );
 
-	grunt.registerTask( 'lint', [ 'eslint' ] );
+	grunt.registerTask( 'lint', [ 'eslint', 'stylelint' ] );
 	grunt.registerTask( 'test', [ 'lint', 'qunit' ] );
 	grunt.registerTask( 'default', 'test' );
 };

css/jquery.uls.lcd.css

@@ -17,7 +17,13 @@
 	padding: 0 16px;
 }
 
-.uls-lcd--no-quicklist [data-region="all"] .uls-lcd-region-title {
+.uls-lcd-region-title {
+	color: #555;
+	font-size: 14px;
+	padding-left: 28px;
+}
+
+.uls-lcd--no-quicklist [ data-region='all' ] .uls-lcd-region-title {
 	display: none;
 }
 
@@ -25,12 +31,6 @@
 	margin-top: 10px;
 }
 
-.uls-lcd-region-title {
-	color: #555;
-	font-size: 14px;
-	padding-left: 28px;
-}
-
 /*
  * We need to have this as a grid row to push rest of the content below it, but resetting
  * padding and margin so that calculating them for children is easier.

css/jquery.uls.mobile.css

@@ -1,5 +1,5 @@
+/* stylelint-disable declaration-no-important */
 @media only screen and ( max-width: 767px ) {
-
 	.uls-mobile.uls-menu {
 		width: 95%;
 		left: 2.5%;
@@ -248,6 +248,7 @@
 	.uls-mobile .hide-for-xlarge {
 		display: block !important;
 	}
+
 	.uls-mobile .hide-for-small,
 	.uls-mobile .show-for-medium,
 	.uls-mobile .hide-for-medium-down,
@@ -274,6 +275,7 @@
 	.uls-mobile .hide-for-portrait {
 		display: block !important;
 	}
+
 	.uls-mobile .hide-for-landscape,
 	.uls-mobile .show-for-portrait {
 		display: none !important;
@@ -285,6 +287,7 @@
 	.uls-mobile .hide-for-landscape {
 		display: block !important;
 	}
+
 	.uls-mobile .hide-for-portrait,
 	.uls-mobile .show-for-landscape {
 		display: none !important;
@@ -297,6 +300,7 @@
 	display: none !important;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .uls-mobile .hide-for-touch,
 .uls-mobile .touch .show-for-touch {
 	display: block !important;

package.json

@@ -25,14 +25,13 @@
     "Siebrand Mazeland"
   ],
   "devDependencies": {
-    "eslint-config-wikimedia": "^0.7.2",
+    "eslint-config-wikimedia": "^0.15.0",
-    "eslint-plugin-qunit": "^3.3.0",
     "grunt": "1.0.4",
     "grunt-contrib-qunit": "3.1.0",
-    "grunt-eslint": "21.0.0",
+    "grunt-eslint": "22.0.0",
-    "grunt-stylelint": "0.11.0",
+    "grunt-stylelint": "0.12.0",
-    "stylelint": "10.1.0",
+    "stylelint": "11.1.1",
-    "stylelint-config-wikimedia": "0.6.0"
+    "stylelint-config-wikimedia": "0.7.0"
   },
   "repository": {
     "type": "git",

scripts/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+	"root": true,
+	"extends": [
+		"wikimedia/server"
+	]
+}

scripts/transform.js

@@ -1,4 +1,4 @@
-var through = require( 'through' ); // eslint-disable-line no-implicit-globals
+var through = require( 'through' );
 
 module.exports = function () {
 	var data, end, write;

src/jquery.uls.core.js

@@ -149,7 +149,7 @@
 			this.$menu.addClass( widthClasses[ this.menuWidth ] );
 
 			if ( !this.initialized ) {
-				$( 'body' ).prepend( this.$menu );
+				$( document.body ).prepend( this.$menu );
 				this.i18n();
 				this.initialized = true;
 			}
@@ -160,7 +160,7 @@
 			this.shown = true;
 
 			if ( !this.isMobile() ) {
-				this.$languageFilter.focus();
+				this.$languageFilter.trigger( 'focus' );
 			}
 
 			this.visible();
@@ -267,8 +267,8 @@
 
 			this.$languageFilter.on( 'resultsfound.uls', this.success.bind( this ) );
 
-			$( 'html' ).click( this.cancel.bind( this ) );
+			$( document.body ).on( 'click', this.cancel.bind( this ) );
-			$( window ).resize( $.fn.uls.debounce( this.resize.bind( this ), 250 ) );
+			$( window ).on( 'resize', $.fn.uls.debounce( this.resize.bind( this ), 250 ) );
 		},
 
 		resize: function () {
@@ -477,6 +477,7 @@
 				} else {
 					scrollPosition = panelBottom - windowHeight;
 				}
+				// eslint-disable-next-line no-jquery/no-global-selector
 				$( 'html, body' ).stop().animate( {
 					scrollTop: scrollPosition
 				}, 500 );

src/jquery.uls.languagefilter.js

@@ -103,7 +103,7 @@
 					e.preventDefault();
 					e.stopPropagation();
 
-					query = $.trim( this.$element.val() ).toLowerCase();
+					query = ( this.$element.val() || '' ).trim().toLowerCase();
 
 					if ( this.selectedLanguage ) {
 						// this.selectLanguage will be populated from a matching search
@@ -126,7 +126,7 @@
 			this.$element.val( '' );
 
 			if ( !$.fn.uls.Constructor.prototype.isMobile() ) {
-				this.$element.focus();
+				this.$element.trigger( 'focus' );
 			}
 
 			this.toggleClear();
@@ -160,7 +160,7 @@
 		search: function () {
 			var languages = Object.keys( this.options.languages ),
 				results = [],
-				query = $.trim( this.$element.val() ).toLowerCase();
+				query = ( this.$element.val() || '' ).trim().toLowerCase();
 
 			if ( query === '' ) {
 				this.options.lcd.setGroupByRegionOverride( null );
@@ -189,6 +189,7 @@
 				var autofillLabel,
 					results = [];
 
+				// eslint-disable-next-line no-jquery/no-each-util
 				$.each( result.languagesearch, function ( apiCode, name ) {
 					var code, redirect;
 

src/jquery.uls.lcd.js

@@ -57,7 +57,7 @@
 		this.$element.addClass( 'uls-lcd' );
 		this.regionLanguages = {};
 		this.renderTimeout = null;
-		this.cachedQuicklist = null;
+		this.$cachedQuicklist = null;
 		this.groupByRegionOverride = null;
 
 		this.render();
@@ -327,17 +327,17 @@
 		buildQuicklist: function () {
 			var quickList, $quickListSection, $quickListSectionTitle;
 
-			if ( this.cachedQuicklist !== null ) {
+			if ( this.$cachedQuicklist !== null ) {
-				return this.cachedQuicklist;
+				return this.$cachedQuicklist;
 			}
 
-			if ( $.isFunction( this.options.quickList ) ) {
+			if ( typeof this.options.quickList === 'function' ) {
 				this.options.quickList = this.options.quickList();
 			}
 
 			if ( !this.options.quickList.length ) {
-				this.cachedQuicklist = $( [] );
+				this.$cachedQuicklist = $( [] );
-				return this.cachedQuicklist;
+				return this.$cachedQuicklist;
 			}
 
 			// Pick only the first elements, because we don't have room for more
@@ -363,8 +363,8 @@
 
 			$quickListSectionTitle.i18n();
 
-			this.cachedQuicklist = $quickListSection;
+			this.$cachedQuicklist = $quickListSection;
-			return this.cachedQuicklist;
+			return this.$cachedQuicklist;
 		},
 
 		show: function () {
@@ -382,7 +382,7 @@
 		},
 
 		focus: function () {
-			this.$element.focus();
+			this.$element.trigger( 'focus' );
 		},
 
 		/**

test/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+	"root": true,
+	"extends": [
+		"wikimedia/qunit",
+		"../.eslintrc.json"
+	]
+}

test/index.html

@@ -18,11 +18,6 @@
 <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.14.0.css">
 <script src="https://code.jquery.com/qunit/qunit-1.14.0.js"></script>
 
-<!-- Test config -->
-<script>
-	QUnit.config.requireExpects = true;
-</script>
-
 <!-- Test Suite -->
 <script src="jquery.uls.test.js"></script>
 

test/jquery.uls.test.js

@@ -16,9 +16,9 @@
 ( function ( $ ) {
 	'use strict';
 
-	module( 'jquery.uls' );
+	QUnit.module( 'jquery.uls' );
 
-	test( '-- Initial check', 1, function ( assert ) {
+	QUnit.test( '-- Initial check', function ( assert ) {
 		assert.ok( $.fn.uls, '$.fn.uls is defined' );
 	} );