Social Logos: Rewrite svg-optimize script in JS

projects/js-packages/social-logos/changelog/update-social-logos-do_svg_optimize_with_js

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Rewrite svg-optimize in JS.
+
+

projects/js-packages/social-logos/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "social-logos",
-	"version": "3.1.0",
+	"version": "3.1.1-alpha",
 	"description": "A repository of all the social logos used on WordPress.com.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/social-logos/",
 	"bugs": {

projects/js-packages/social-logos/tools/build

@@ -16,7 +16,7 @@ echo 'Starting full build...'
 
 # Run through full build flow.
 if ./tools/clean &&
-./tools/svg-optimize &&
+./tools/svg-optimize.js &&
 # Disabling this for now until we figure out the proper place for it.
 # ./tools/svg-to-php &&
 ./tools/svg-to-sprite.js &&

projects/js-packages/social-logos/tools/svg-optimize.js

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+const srcSvgDir = 'src/svg';
+const destSvgDir = 'build/svg-clean';
+
+const fs = require( 'fs' );
+const path = require( 'path' );
+const process = require( 'process' );
+const { glob } = require( 'glob' );
+const { optimize } = require( 'svgo' );
+
+const svgo_config = {
+	js2svg: { finalNewline: true }, // force EOF newline
+	plugins: [
+		{
+			name: 'preset-default',
+			params: {
+				overrides: {},
+			},
+		},
+		{
+			name: 'removeAttrs',
+			params: {
+				attrs: [ 'style', 'xml:space', 'id', 'fill' ],
+				elemSeparator: '!',
+			},
+		},
+		{
+			name: 'addAttributesToSVGElement',
+			params: {
+				attributes: [ { viewBox: '0 0 24 24' }, { xmlns: 'http://www.w3.org/2000/svg' } ],
+			},
+		},
+		{
+			name: 'addWrappingGroup',
+			description: 'We want each svg to have a `<g>` around its content.',
+			fn: () => ( {
+				element: {
+					enter( node, parentNode ) {
+						// Look for root-level `<svg>` that doesn't already have a single `<g>` as its child.
+						if (
+							node.name !== 'svg' ||
+							parentNode.type !== 'root' ||
+							( node.children.length === 1 &&
+								node.children[ 0 ].type === 'element' &&
+								node.children[ 0 ].name === 'g' )
+						) {
+							return;
+						}
+
+						// Apparently this is how you create a new node.
+						const g = {
+							type: 'element',
+							name: 'g',
+							attributes: {},
+							children: node.children,
+						};
+						// TODO remove legacy parentNode in v4
+						Object.defineProperty( g, 'parentNode', {
+							writable: true,
+							value: node,
+						} );
+
+						node.children = [ g ];
+					},
+				},
+			} ),
+		},
+	],
+};
+
+// Start in the right folder.
+const rootDir = __dirname + '/..';
+process.chdir( rootDir );
+
+// Make destination dir as needed.
+fs.mkdirSync( destSvgDir, { recursive: true } );
+
+const srcFiles = glob.sync( srcSvgDir + '/*.svg' ).sort();
+for ( const srcFile of srcFiles ) {
+	const data = fs.readFileSync( srcFile, 'utf8' );
+	const optimizedData = optimize( data, {
+		path: srcFile, // recommended by library for use by its plugins
+		...svgo_config,
+	} )?.data;
+
+	if ( ! optimizedData ) {
+		throw Error( `Unable to optimize '${ srcFile }'!` );
+	}
+	const destFile = destSvgDir + '/' + path.basename( srcFile );
+
+	fs.writeFileSync( destFile, optimizedData );
+}
+
+console.log( `Created optimized SVGs in '${ destSvgDir }'.` );

projects/js-packages/social-logos/tools/svg-to-font.js

@@ -90,10 +90,8 @@ ${ cssCodepoints }*/`;
 	// console.log('Wrote CSS file.');
 };
 
-// Make dir if it doesn't exist.
-if ( ! fs.existsSync( destFontDir ) ) {
-	fs.mkdirSync( destFontDir, { recursive: true } );
-}
+// Make destination dir as needed.
+fs.mkdirSync( destFontDir, { recursive: true } );
 
 const codepoints = require( path.resolve( codepointsFile ) );
 let maxCodepoint = Math.max( ...Object.values( codepoints ) );

projects/js-packages/social-logos/tools/svg-to-react-data.js

@@ -15,7 +15,7 @@ const rootDir = __dirname + '/..';
 process.chdir( rootDir );
 
 /**
- * Transforms kebab case names to camel case
+ * Transforms kebab case names to camel case.
  * @param {string} name - e.g.: foo-bar-baz
  * @returns {string} e.g.: fooBarBaz
  */
@@ -26,10 +26,8 @@ function kebabToCamelCase( name ) {
 	} );
 }
 
-// Make dir if it doesn't exist.
-if ( ! fs.existsSync( destReactDir ) ) {
-	fs.mkdirSync( destReactDir, { recursive: true } );
-}
+// Make destination dir as needed.
+fs.mkdirSync( destReactDir, { recursive: true } );
 
 let socialLogoData = `/** This is a generated file. Do not edit. */
 export const SocialLogoData = [`;

projects/js-packages/social-logos/tools/svg-to-sprite.js

@@ -16,10 +16,8 @@ const svgstore = require( 'svgstore' );
 const rootDir = __dirname + '/..';
 process.chdir( rootDir );
 
-// Make dir if it doesn't exist.
-if ( ! fs.existsSync( destSpriteDir ) ) {
-	fs.mkdirSync( destSpriteDir, { recursive: true } );
-}
+// Make destination dir as needed.
+fs.mkdirSync( destSpriteDir, { recursive: true } );
 
 // Generate SVG.
 const sprites = svgstore( { inline: true } );