From 2a77df6c418749948f543e048a3207ccd3514a20 Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Thu, 4 Jan 2018 19:28:35 +0530 Subject: [PATCH] Use eslint and stylelint, fix all errors (#282) * Use eslint and stylelint, fix all errors * Remove jshint, jsbeautify * Use Object.keys directly since that is available in all major browsers * Fixes for eslint, stylelint errors * stylelint is not included in grunt test yet because jquery.uls.mobile.css has so many !important and need to figure out whether they are really needed --- .eslintignore | 1 + .eslintrc.json | 14 ++++ .jsbeautifyrc | 17 ----- .jshintignore | 1 - .jshintrc | 35 --------- .stylelintrc.json | 3 + Gruntfile.js | 27 +++++-- css/jquery.uls.css | 22 +++--- css/jquery.uls.grid.css | 40 +++++------ css/jquery.uls.lcd.css | 21 +++--- css/jquery.uls.mobile.css | 19 ++--- examples/resources/demo.css | 6 +- package.json | 9 ++- scripts/transform.js | 7 +- src/jquery.uls.core.js | 50 ++++--------- src/jquery.uls.data.utils.js | 117 ++++++++++++++++--------------- src/jquery.uls.languagefilter.js | 117 ++++++++++++++++--------------- src/jquery.uls.lcd.js | 4 +- test/jquery.uls.test.js | 2 - 19 files changed, 235 insertions(+), 277 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.json delete mode 100644 .jsbeautifyrc delete mode 100644 .jshintignore delete mode 100644 .jshintrc create mode 100644 .stylelintrc.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..66a729c --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +src/jquery.uls.data.js \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..78bf26e --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "extends": "wikimedia", + "env": { + "browser": true, + "jquery": true, + "qunit": true + }, + "globals": { + "require": false + }, + "rules": { + "dot-notation": [ "error", { "allowKeywords": true } ] + } +} diff --git a/.jsbeautifyrc b/.jsbeautifyrc deleted file mode 100644 index 0631808..0000000 --- a/.jsbeautifyrc +++ /dev/null @@ -1,17 +0,0 @@ -{ - "preserve_newlines": true, - "jslint_happy": true, - "keep_array_indentation": true, - "space_before_conditional": true, - "max_preserve_newlines": 10, - "brace_style": "collapse", - "keep_function_indentation": false, - "break_chained_methods": false, - "eval_code": false, - "unescape_strings": false, - "wrap_line_length": 0, - "space_in_paren": true, - "space_in_square_bracket": true, - "git_happy": true, - "indent_with_tabs": true -} diff --git a/.jshintignore b/.jshintignore deleted file mode 100644 index 4a4524b..0000000 --- a/.jshintignore +++ /dev/null @@ -1 +0,0 @@ -src/jquery.uls.data.js diff --git a/.jshintrc b/.jshintrc deleted file mode 100644 index 136fda1..0000000 --- a/.jshintrc +++ /dev/null @@ -1,35 +0,0 @@ -{ - // Enforcing - "bitwise": true, - "camelcase": true, - "curly": true, - "eqeqeq": true, - "forin": false, - "immed": true, - "latedef": "nofunc", - "newcap": true, - "noarg": true, - "noempty": true, - "nonew": true, - "onevar": true, - "quotmark": "single", - "regexp": false, - "strict": true, - "trailing": true, - "undef": true, - "unused": true, - - // Relax - "laxbreak": true, - "multistr": true, - "smarttabs": true, - - // Environment - "browser": true, - - "predef": [ - "_", - "jQuery", - "QUnit" - ] -} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..2c90730 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-wikimedia" +} diff --git a/Gruntfile.js b/Gruntfile.js index 7ba38c8..81e0514 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,22 +1,35 @@ -/*jshint node:true */ 'use strict'; + module.exports = function ( grunt ) { - grunt.loadNpmTasks( 'grunt-contrib-jshint' ); + grunt.loadNpmTasks( 'grunt-eslint' ); + grunt.loadNpmTasks( 'grunt-stylelint' ); grunt.loadNpmTasks( 'grunt-contrib-qunit' ); grunt.initConfig( { - jshint: { + eslint: { + all: [ + '**/*.js', + 'src/jquery.uls.data.js', + '!examples/**', + '!node_modules/**', + '!vendor/**' + ] + }, + stylelint: { options: { - jshintrc: true + syntax: 'css' }, - all: ['*.js', 'src/*.js'] + src: [ + '**/*.css', + '!node_modules/**' + ] }, qunit: { all: 'test/index.html' } } ); - grunt.registerTask( 'lint', 'jshint' ); - grunt.registerTask( 'test', ['lint', 'qunit'] ); + grunt.registerTask( 'lint', [ 'eslint' ] ); + grunt.registerTask( 'test', [ 'lint', 'qunit' ] ); grunt.registerTask( 'default', 'test' ); }; diff --git a/css/jquery.uls.css b/css/jquery.uls.css index 6af44a5..d137d6b 100644 --- a/css/jquery.uls.css +++ b/css/jquery.uls.css @@ -1,7 +1,7 @@ .uls-trigger { - background: url('../images/icon-language.png') no-repeat left center; + background: url( ../images/icon-language.png ) no-repeat left center; /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/icon-language.svg'); + background-image: linear-gradient( transparent, transparent ), url( ../images/icon-language.svg ); padding-left: 30px; } @@ -12,10 +12,10 @@ margin-top: 1px; background-color: #fff; border: 1px solid #ccc; - border-color: rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + border-color: rgba( 0, 0, 0, 0.2 ); + -webkit-box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 ); + -moz-box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 ); + box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 ); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; @@ -65,9 +65,9 @@ } .uls-search-label { - background: url('../images/search.png') no-repeat center center; + background: url( ../images/search.png ) no-repeat center center; /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/search.svg'); + background-image: linear-gradient( transparent, transparent ), url( ../images/search.svg ); background-size: 20px; height: 32px; width: 44px; @@ -88,7 +88,7 @@ width: 100%; /* For the custom clear (X) icon */ padding: 6px 25px 6px 0; - outline: none; + outline: 0; border: 0; display: block; position: absolute; @@ -110,9 +110,9 @@ } .uls-languagefilter-clear { - background: url('../images/clear.png') no-repeat left center; + background: url( ../images/clear.png ) no-repeat left center; /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/clear.svg'); + background-image: linear-gradient( transparent, transparent ), url( ../images/clear.svg ); background-size: 15px; cursor: pointer; height: 15px; diff --git a/css/jquery.uls.grid.css b/css/jquery.uls.grid.css index 9caf088..f068a86 100644 --- a/css/jquery.uls.grid.css +++ b/css/jquery.uls.grid.css @@ -32,15 +32,18 @@ } .grid .highlight { - background: #ffff99; + background: #ff9; } /* The Grid ---------------------- */ + .grid .row { width: 100%; max-width: none; min-width: 600px; margin: 0 auto; + /* Nicolas Gallagher's micro clearfix */ + *zoom: 1; } .grid .row .row { @@ -50,30 +53,25 @@ margin: 0 -5px; } +.grid .column, +.grid .columns { + float: left; + min-height: 1px; + padding: 0 5px; + position: relative; +} + .grid .row.collapse .column, .grid .row.collapse .columns { padding: 0; } -.grid .row .row { - width: auto; - max-width: none; - min-width: 0; - margin: 0 -5px; -} - .grid .row .row.collapse { margin: 0; } -.grid .column, .grid .columns { - float: left; - min-height: 1px; - padding: 0 5px; - position: relative; -} - -.grid .column.centered, .grid .columns.centered { +.grid .column.centered, +.grid .columns.centered { float: none; margin: 0 auto; } @@ -238,13 +236,9 @@ right: 83.333%; } -/* Nicolas Gallagher's micro clearfix */ -.grid .row { - *zoom: 1; -} - -.grid .row:before, .grid .row:after { - content: ""; +.grid .row:before, +.grid .row:after { + content: ''; display: table; } diff --git a/css/jquery.uls.lcd.css b/css/jquery.uls.lcd.css index 2e836b6..337a07f 100644 --- a/css/jquery.uls.lcd.css +++ b/css/jquery.uls.lcd.css @@ -36,6 +36,16 @@ margin: 0; } +.uls-language-block > ul { + /* + * We don't want any visible bullets in this list. Not by default anyway. + * Using very unspecific selector here to allow other classes to override. + * Bug because overflow: hidden is incompatible with bullets, also render + * the bullets inside the list in case there should be any. + */ + list-style: none none; +} + /* * Each block should have 16px padding on both sides. But because we already gave * 16px for the whole menu, we need to remove it for first and last items the blocks. @@ -53,17 +63,6 @@ padding-right: 0; } - -.uls-language-block > ul { - /* - * We don't want any visible bullets in this list. Not by default anyway. - * Using very unspecific selector here to allow other classes to override. - * Bug because overflow: hidden is incompatible with bullets, also render - * the bullets inside the list in case there should be any. - */ - list-style: none none; -} - .uls-language-block > ul > li { cursor: pointer; margin-left: 20px; diff --git a/css/jquery.uls.mobile.css b/css/jquery.uls.mobile.css index f7dc7b6..f6ba97b 100644 --- a/css/jquery.uls.mobile.css +++ b/css/jquery.uls.mobile.css @@ -1,4 +1,4 @@ -@media only screen and (max-width: 767px) { +@media only screen and ( max-width: 767px ) { .uls-mobile.uls-menu { width: 95%; @@ -40,7 +40,7 @@ float: none; } - .uls-mobile [class*="column"] + [class*="column"]:last-child { + .uls-mobile [ class*='column' ] + [ class*='column' ]:last-child { float: none; } @@ -48,7 +48,7 @@ .uls-mobile .uls-mobile .columns:before, .uls-mobile .column:after, .columns:after { - content: ""; + content: ''; display: table; } @@ -197,11 +197,12 @@ } /* Very large display targeting */ -@media only screen and (min-width: 1441px) { +@media only screen and ( min-width: 1441px ) { .uls-mobile .hide-for-small, .uls-mobile .hide-for-medium, .uls-mobile .hide-for-medium-down, - .hide-for-large, .show-for-large-up, + .hide-for-large, + .show-for-large-up, .show-for-xlarge { display: block !important; } @@ -217,7 +218,7 @@ } /* Medium display targeting */ -@media only screen and (max-width: 1279px) and (min-width: 768px) { +@media only screen and ( max-width: 1279px ) and ( min-width: 768px ) { .uls-mobile .hide-for-small, .uls-mobile .show-for-medium, .uls-mobile .show-for-medium-down, @@ -238,7 +239,7 @@ } /* Small display targeting */ -@media only screen and (max-width: 767px) { +@media only screen and ( max-width: 767px ) { .uls-mobile .show-for-small, .uls-mobile .hide-for-medium, .uls-mobile .show-for-medium-down, @@ -268,7 +269,7 @@ display: none !important; } -@media screen and (orientation: landscape) { +@media screen and ( orientation: landscape ) { .uls-mobile .show-for-landscape, .uls-mobile .hide-for-portrait { display: block !important; @@ -279,7 +280,7 @@ } } -@media screen and (orientation: portrait) { +@media screen and ( orientation: portrait ) { .uls-mobile .show-for-portrait, .uls-mobile .hide-for-landscape { display: block !important; diff --git a/examples/resources/demo.css b/examples/resources/demo.css index 902b400..4fe01f9 100644 --- a/examples/resources/demo.css +++ b/examples/resources/demo.css @@ -1,18 +1,18 @@ body { padding-left: 10%; padding-right: 10%; - font-family: Arial, Helvetica, sans-serif; + font-family: 'Arial', 'Helvetica', sans-serif; } div.navbar { background-color: #333; - color: #FFFFFF; + color: #fff; padding: 20px; } span.uls-trigger { float: right; cursor: pointer; - color: #FFFFFF; + color: #fff; font-weight: bold; } diff --git a/package.json b/package.json index f5fd418..be76003 100644 --- a/package.json +++ b/package.json @@ -25,10 +25,13 @@ "Siebrand Mazeland" ], "devDependencies": { + "eslint-config-wikimedia": "0.5.0", "grunt": "^1.0.1", - "grunt-cli": "^1.2.0", - "grunt-contrib-jshint": "^1.0.0", - "grunt-contrib-qunit": "^1.2.0" + "grunt-eslint": "20.0.0", + "grunt-stylelint": "0.8.0", + "stylelint": "8.2.0", + "grunt-contrib-qunit": "^1.2.0", + "stylelint-config-wikimedia": "0.4.2" }, "repository": { "type": "git", diff --git a/scripts/transform.js b/scripts/transform.js index 56c8976..425a241 100644 --- a/scripts/transform.js +++ b/scripts/transform.js @@ -1,10 +1,11 @@ -var through = require( 'through' ); +var through = require( 'through' ); // eslint-disable-line no-implicit-globals -module.exports = function ( file ) { +module.exports = function () { var data, end, write; data = '( function ( $ ) {\n\t$.uls = $.uls || {};\n\t$.uls.data = '; write = function ( buf ) { - return data += buf; + data += buf; + return data; }; end = function () { data += '\n} ( jQuery ) );'; diff --git a/src/jquery.uls.core.js b/src/jquery.uls.core.js index a4071e3..5cedb02 100644 --- a/src/jquery.uls.core.js +++ b/src/jquery.uls.core.js @@ -24,7 +24,7 @@ var template, ULS; // Region numbers in id attributes also appear in the langdb. - /*jshint multistr:true */ + // eslint-disable-next-line no-multi-str template = '
\