build: Update SVGO to latest v2.3.0 and re-optimize SVGs

SVGO v2.x changed configuration to JS, amending configuration.
Adding new 'minify-svg' npm script.
Also re-optimize SVGs.

Bug: T278656
Change-Id: I88ebed650be0d20b71bca6f15f3aa70b6b5eb42a

.svgo.config.js

@@ -0,0 +1,55 @@
+/**
+ * SVGO Configuration
+ * Recommended options from:
+ * https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration
+ */
+const { extendDefaultPlugins } = require( 'svgo' );
+module.exports = {
+	multipass: true,
+	plugins: extendDefaultPlugins( [
+		{
+			name: 'cleanupIDs',
+			active: false
+		},
+		{
+			name: 'removeDesc',
+			active: false
+		},
+		{
+			name: 'removeRasterImages',
+			active: true
+		},
+		{
+			name: 'removeTitle',
+			active: false
+		},
+		{
+			name: 'removeViewBox',
+			active: false
+		},
+		{
+			// If the SVG doesn't start with an XML declaration, then its MIME type will
+			// be detected as "text/plain" rather than "image/svg+xml" by libmagic and,
+			// consequently, MediaWiki's CSSMin CSS minifier. libmagic's default database
+			// currently requires that SVGs contain an XML declaration:
+			// https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5
+			name: 'removeXMLProcInst',
+			active: false
+		},
+		{
+			name: 'sortAttrs',
+			active: true
+		}
+	] ),
+
+	// Configure the indent (default 4 spaces) used by `--pretty` here:
+	// @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
+	//
+	// Unfortunately EOL cannot be configured, SVGO uses the platform's EOL marker.
+	// On non-unix systems the linebreaks will be normalized to LF (unix) only at git commit,
+	// assuming `core.autocrlf` is 'true' (default) or 'input'.
+	js2svg: {
+		indent: "\t",
+		pretty: true,
+	}
+}

Gruntfile.js

@@ -5,7 +5,6 @@ module.exports = function ( grunt ) {
 	grunt.loadNpmTasks( 'grunt-banana-checker' );
 	grunt.loadNpmTasks( 'grunt-eslint' );
 	grunt.loadNpmTasks( 'grunt-stylelint' );
-	grunt.loadNpmTasks( 'grunt-svgmin' );
 
 	grunt.initConfig( {
 		eslint: {
@@ -29,46 +28,9 @@ module.exports = function ( grunt ) {
 				'!vendor/**'
 			]
 		},
-		banana: conf.MessagesDirs,
+		banana: conf.MessagesDirs
-		// SVG Optimization
-		svgmin: {
-			options: {
-				js2svg: {
-					indent: '\t',
-					pretty: true
-				},
-				multipass: true,
-				plugins: [ {
-					cleanupIDs: false
-				}, {
-					removeDesc: false
-				}, {
-					removeRasterImages: true
-				}, {
-					removeTitle: false
-				}, {
-					removeViewBox: false
-				}, {
-					removeXMLProcInst: false
-				}, {
-					sortAttrs: true
-				} ]
-			},
-			all: {
-				files: [ {
-					expand: true,
-					cwd: 'resources/images',
-					src: [
-						'**/*.svg'
-					],
-					dest: 'resources/images/',
-					ext: '.svg'
-				} ]
-			}
-		}
 	} );
 
-	grunt.registerTask( 'minify', 'svgmin' );
 	grunt.registerTask( 'test', [ 'eslint', 'stylelint', 'banana' ] );
-	grunt.registerTask( 'default', [ 'minify', 'test' ] );
+	grunt.registerTask( 'default', [ 'test' ] );
 };

package.json

@@ -1,6 +1,7 @@
 {
 	"private": true,
 	"scripts": {
+		"minify-svg": "svgo --config=.svgo.config.js -q -r -f resources/images/",
 		"test": "grunt test"
 	},
 	"devDependencies": {
@@ -9,8 +10,8 @@
 		"grunt-banana-checker": "0.9.0",
 		"grunt-eslint": "23.0.0",
 		"grunt-stylelint": "0.16.0",
-		"grunt-svgmin": "5.0.0",
+		"stylelint-config-wikimedia": "0.10.3",
-		"stylelint-config-wikimedia": "0.10.3"
+		"svgo": "2.3.0"
 	},
 	"eslintIgnore": [
 		"lib/**",

resources/images/back-grey-ltr.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#54595d" d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7 13.1z"/>
+	<path fill="#54595d" d="m7 13.1 8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7 13.1z"/>
 </svg>

resources/images/close.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<path d="M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z"/>
+	<path d="m3.636 2.222 14.142 14.142-1.414 1.414L2.222 3.636z"/>
-	<path d="M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z"/>
+	<path d="M17.778 3.636 3.636 17.778l-1.414-1.414L16.364 2.222z"/>
 </svg>

resources/images/remove-input.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
 	<path fill="#202122" d="M9.2.825c-.1.207-.148.479-.4.55-.44.065-.906.015-1.35 0-.693-.025-1.387-.118-2.076 0-.47.126-.762.582-.95 1A4.323 4.323 0 0 0 4.149 3.4h-2.15v9.2h16V3.4H4.922c.087-.416.163-.846.45-1.175.178-.185.47-.136.7-.15.97.002 1.933.143 2.9.05.371-.047.65-.364.776-.7l.15-.35-.7-.251zM3.5 5.5h1.25a.16.16 0 0 1 .15.15v1.225a.16.16 0 0 1-.15.15H3.5c-.075 0-.125-.074-.125-.15V5.65c0-.075.05-.15.125-.15zm2.275 0h1.25c.076 0 .125.074.125.15v1.225c0 .075-.05.15-.124.15h-1.25c-.076 0-.126-.074-.126-.15V5.65c0-.075.05-.15.125-.15zm2.275 0H9.3c.076 0 .126.074.126.15v1.225c0 .075-.05.15-.125.15H8.05a.161.161 0 0 1-.151-.15V5.65a.16.16 0 0 1 .15-.15zm2.25 0h1.251a.16.16 0 0 1 .15.15v1.225a.16.16 0 0 1-.15.15h-1.25c-.075 0-.125-.074-.125-.15V5.65c0-.075.05-.15.125-.15zm2.276 0h1.25c.076 0 .125.074.125.15v1.225c0 .075-.05.15-.125.15h-1.25c-.075 0-.125-.074-.125-.15V5.65c0-.075.05-.15.125-.15zm2.275 0h1.225a.16.16 0 0 1 .15.15v1.225a.16.16 0 0 1-.15.15h-1.225a.161.161 0 0 1-.15-.15V5.65a.16.16 0 0 1 .15-.15zM4.576 7.9h1.25c.076 0 .125.074.125.15V9.3c0 .076-.05.126-.125.126h-1.25c-.075 0-.125-.05-.125-.125V8.05c0-.076.05-.151.125-.151zm2.325 0h1.25a.16.16 0 0 1 .15.15V9.3c0 .076-.074.126-.15.126h-1.25c-.075 0-.125-.05-.125-.125V8.05c0-.076.05-.151.125-.151zm2.35 0h1.225a.16.16 0 0 1 .15.15V9.3c0 .076-.074.126-.15.126H9.251c-.075 0-.15-.05-.15-.125V8.05c0-.076.074-.151.15-.151zm2.325 0h1.25c.076 0 .125.074.125.15V9.3c0 .076-.05.126-.125.126h-1.25c-.075 0-.15-.05-.15-.125V8.05c0-.076.074-.151.15-.151zm2.325 0h1.25c.075 0 .125.074.125.15V9.3c0 .076-.05.126-.125.126h-1.25c-.075 0-.125-.05-.125-.125V8.05c0-.076.05-.151.125-.151zm-8.7 2.85h9.6c.07 0 .125.055.125.125v.675c0 .07-.055.125-.125.125H5.2a.123.123 0 0 1-.125-.125v-.675c0-.07.054-.125.125-.125z"/>
-	<path stroke="#202122" stroke-width="1.2" d="M2.719 15.279L17.28.72"/>
+	<path stroke="#202122" stroke-width="1.2" d="M2.719 15.279 17.28.72"/>
 </svg>