Generates icon maps for codicons and glicons

Author: d13

.fantasticonrc.js

@@ -12,10 +12,12 @@ const config = {
 	fontTypes: ['woff2'],
 	normalize: true,
 	// @ts-ignore
-	assetTypes: ['html', 'scss', 'json'],
+	assetTypes: ['html', 'scss', 'json', 'sass', 'css'],
 	templates: {
 		html: './images/icons/template/icons-contribution.hbs',
 		scss: './images/icons/template/styles.hbs',
+		sass: './images/icons/template/sass-map.hbs',
+		css: './images/icons/template/component-map.hbs',
 	},
 	formatOptions: {
 		json: {
@@ -25,8 +27,10 @@ const config = {
 	pathOptions: {
 		woff2: './dist/glicons.woff2',
 		scss: './dist/glicons.scss',
+		sass: './dist/glicons-map.scss',
 		html: './dist/icons-contribution.json',
 		json: './images/icons/template/mapping.json',
+		css: './dist/glicons-map.ts',
 	},
 };
 

images/icons/template/component-map.hbs

@@ -0,0 +1,10 @@
+// This file is generated by (vscode-gitlens)/scripts/export-codicons.js
+// Do not edit this file directly
+
+export const iconFontFamily = '{{ name }}';
+
+export const iconMap = Object.freeze({
+{{#each codepoints}}
+    '{{ @key }}': '\\\{{ codepoint this }}',
+{{/each}}
+});

images/icons/template/sass-map.hbs

@@ -0,0 +1,10 @@
+// This file is generated by (vscode-gitlens)/scripts/export-codicons.js
+// Do not edit this file directly
+
+$icon-font-family: '{{ name }}';
+
+$icon-map: (
+{{#each codepoints}}
+    '{{@key}}': '\\{{ codepoint this }}',
+{{/each}}
+);

package.json

@@ -19559,7 +19559,7 @@
 		"build:extension": "webpack --mode development --config-name extension:node",
 		"build:extension:browser": "webpack --mode development --config-name extension:webworker",
 		"build:webviews": "webpack --mode development --config-name webviews",
-		"build:icons": "pnpm run icons:svgo && pnpm fantasticon && pnpm run icons:apply",
+		"build:icons": "pnpm run icons:svgo && pnpm fantasticon && pnpm run icons:apply && pnpm run icons:export",
 		"build:tests": "node ./scripts/esbuild.tests.mjs --mode development",
 		"generate:docs:telemetry": "node ./scripts/generate-telemetry-docs.mjs",
 		"generate:emoji": "node ./scripts/generateEmojiShortcodeMap.mjs",
@@ -19576,6 +19576,7 @@
 		"graph:unlink": "pnpm unlink @gitkraken/gitkraken-components && pnpm install --force",
 		"graph:unlink:main": "pnpm graph:unlink && pushd \"../GitKrakenComponents\" && pnpm unlink && popd",
 		"icons:apply": "node ./scripts/applyIconsContribution.mjs",
+		"icons:export": "node ./scripts/export-codicons.mjs",
 		"icons:svgo": "svgo -q -f ./images/icons/ --config svgo.config.js",
 		"lint": "pnpm run clean:lint && eslint .",
 		"lint:fix": "pnpm run clean:lint && eslint . --fix",

scripts/applyIconsContribution.mjs

@@ -8,6 +8,10 @@ const packageJSONPromises = Promise.all([
 const scssPromises = Promise.all([
 	fs.promises.readFile('./dist/glicons.scss', 'utf8'),
 	fs.promises.readFile('./src/webviews/apps/shared/glicons.scss', 'utf8'),
+	fs.promises.readFile('./dist/glicons-map.scss', 'utf8'),
+	fs.promises.readFile('./src/webviews/apps/shared/styles/icons/glicons-map.scss', 'utf8'),
+	fs.promises.readFile('./dist/glicons-map.ts', 'utf8'),
+	fs.promises.readFile('./src/webviews/apps/shared/components/icons/glicons-map.ts', 'utf8'),
 ]);
 
 let pending = [];
@@ -22,11 +26,24 @@ if (JSON.stringify(packageJSON.contributes.icons) !== JSON.stringify(icons.icons
 }
 
 // Update the scss file
-const [newScss, scss] = await scssPromises;
+const [newScss, scss, newSassMap, sassMap, newTsMap, tsMap] = await scssPromises;
 
 if (scss !== newScss) {
 	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/glicons.scss', newScss));
 }
 
-pending.push(fs.promises.rm('./dist/icons-contribution.json'), fs.promises.rm('./dist/glicons.scss'));
+if (sassMap !== newSassMap) {
+	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/styles/icons/glicons-map.scss', newSassMap));
+}
+
+if (tsMap !== newTsMap) {
+	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/icons/glicons-map.ts', newTsMap));
+}
+
+pending.push(
+	fs.promises.rm('./dist/icons-contribution.json'),
+	fs.promises.rm('./dist/glicons.scss'),
+	fs.promises.rm('./dist/glicons-map.scss'),
+	fs.promises.rm('./dist/glicons-map.ts'),
+);
 await Promise.allSettled(pending);

scripts/export-codicons.mjs

@@ -0,0 +1,47 @@
+import fs from 'fs';
+
+function numberToCssContent(number, escape = '\\\\') {
+	return `${escape}${number.toString(16)}`;
+}
+
+console.time('Exported codicons');
+const { default: iconConfig } = await import('../node_modules/@vscode/codicons/.fantasticonrc.js');
+const { name, codepoints: icons } = iconConfig;
+
+const iconEntries = Object.entries(icons);
+
+const headerText = `// This file is generated by (vscode-gitlens)/scripts/export-codicons.js
+// Do not edit this file directly
+`;
+
+const sassMapEntries = [];
+const tsMapEntries = [];
+for (const [key, value] of iconEntries) {
+	sassMapEntries.push(`   '${key}': '${numberToCssContent(value, '\\')}'`);
+	tsMapEntries.push(`   '${key}': '${numberToCssContent(value)}'`);
+}
+
+// create a sass map of codicons and a ts file with a frozen object
+const scss = `${headerText}
+$icon-font-family: '${name}';
+
+$icon-map: (
+${sassMapEntries.join(',\n')}
+);
+`;
+
+const ts = `${headerText}
+export const iconFontFamily = '${name}';
+
+export const iconMap = Object.freeze({
+${tsMapEntries.join(',\n')}
+});
+`;
+
+const pending = [];
+
+pending.push(fs.promises.writeFile('./src/webviews/apps/shared/styles/icons/codicons-map.scss', scss));
+pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/icons/codicons-map.ts', ts));
+
+await Promise.allSettled(pending);
+console.timeEnd('Exported codicons');