@web-padawan/wc-icons-tool 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-padawan/wc-icons-tool",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "./bin/wc-icons-tool",
   "bin": {
     "wc-icons-tool": "./bin/wc-icons-tool"
@@ -15,11 +15,16 @@
   "description": "Tool for building Vaadin icons",
   "files": [
     "bin",
+    "patches",
     "tasks"
   ],
+  "scripts": {
+    "postinstall": "patch-package"
+  },
   "dependencies": {
     "cheerio": "^1.0.0",
     "glob": "^13.0.0",
+    "patch-package": "^8.0.1",
     "svgicons2svgfont": "^14.0.2",
     "svg2ttf": "6.0.3",
     "ttf2woff": "3.0.0"

package/patches/svg2ttf+6.0.3.patch

@@ -0,0 +1,35 @@
+diff --git a/node_modules/svg2ttf/lib/sfnt.js b/node_modules/svg2ttf/lib/sfnt.js
+index f303f2a..0907cbf 100644
+--- a/node_modules/svg2ttf/lib/sfnt.js
++++ b/node_modules/svg2ttf/lib/sfnt.js
+@@ -15,13 +15,7 @@ function Font() {
+   this.italicAngle = 0;
+   this.familyClass = 0; // No Classification
+   this.familyName = '';
+-
+-  // 0x40 - REGULAR - Characters are in the standard weight/style for the font
+-  // 0x80 - USE_TYPO_METRICS - use OS/2.sTypoAscender - OS/2.sTypoDescender + OS/2.sTypoLineGap as the default line spacing
+-  // https://docs.microsoft.com/en-us/typography/opentype/spec/os2#fsselection
+-  // https://github.com/fontello/svg2ttf/issues/95
+-  this.fsSelection = 0x40 | 0x80;
+-
++  this.fsSelection = 0x40; // Characters are in the standard weight/style for the font.
+   // Non zero value can cause issues in IE, https://github.com/fontello/svg2ttf/issues/45
+   this.fsType = 0;
+   this.lowestRecPPEM = 8;
+diff --git a/node_modules/svg2ttf/lib/ttf/tables/os2.js b/node_modules/svg2ttf/lib/ttf/tables/os2.js
+index 197d4cf..8f1feae 100644
+--- a/node_modules/svg2ttf/lib/ttf/tables/os2.js
++++ b/node_modules/svg2ttf/lib/ttf/tables/os2.js
+@@ -71,10 +71,7 @@ function createOS2Table(font) {
+   buf.writeInt16(font.ascent); // sTypoAscender
+   buf.writeInt16(font.descent); // sTypoDescender
+   buf.writeInt16(font.lineGap); // lineGap
+-  // Enlarge win acscent/descent to avoid clipping
+-  // WinAscent - WinDecent should at least be equal to TypoAscender - TypoDescender + TypoLineGap:
+-  // https://www.high-logic.com/font-editor/fontcreator/tutorials/font-metrics-vertical-line-spacing
+-  buf.writeInt16(Math.max(font.yMax, font.ascent + font.lineGap)); // usWinAscent
++  buf.writeInt16(Math.max(font.yMax, font.ascent)); // usWinAscent
+   buf.writeInt16(-Math.min(font.yMin, font.descent)); // usWinDescent
+   buf.writeInt32(1); // ulCodePageRange1, Latin 1
+   buf.writeInt32(0); // ulCodePageRange2

package/tasks/lumo.js

@@ -1,8 +1,12 @@
 import { execSync } from 'node:child_process';
 import path from 'node:path';
-import { readFileSync,  unlinkSync, writeFileSync } from 'node:fs';
+import { readFileSync, unlinkSync, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import * as cheerio from 'cheerio';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 function createCopyright() {
   return `/**
  * @license
@@ -15,17 +19,19 @@ export function generateLumoFont() {
   const FONT = `${process.cwd()}/packages/vaadin-lumo-styles/lumo-icons`;
 
   // Create SVG font
-  const svgIcons2Font = path.normalize('./node_modules/.bin/svgicons2svgfont');
+  const svgIcons2Font = path.normalize(
+    `${__dirname}/../node_modules/.bin/svgicons2svgfont`
+  );
   execSync(
     `${svgIcons2Font} --fontname=lumo-icons --height=1000 --ascent=850 --descent=150 --normalize --fixedWidth --verbose -o ${FONT}.svg ${process.cwd()}/packages/vaadin-lumo-styles/icons/svg/*.svg`
   );
 
   // Convert SVG to TTF
-  const svg2TTF = path.normalize('./node_modules/.bin/svg2ttf');
+  const svg2TTF = path.normalize(`${__dirname}/../node_modules/.bin/svg2ttf`);
   execSync(`${svg2TTF} --ts=1 ${FONT}.svg ${FONT}.ttf`);
 
   // Convert TTF to WOFF
-  const ttf2WOFF = path.normalize('./node_modules/.bin/ttf2woff');
+  const ttf2WOFF = path.normalize(`${__dirname}/../node_modules/.bin/ttf2woff`);
   execSync(`${ttf2WOFF} ${FONT}.ttf ${FONT}.woff`);
 
   const content = readFileSync(`${FONT}.svg`, 'utf-8');
@@ -51,7 +57,9 @@ export function generateLumoFont() {
   const outputCSS = `
 @font-face {
   font-family: 'lumo-icons';
-  src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString('base64')})
+  src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString(
+    'base64'
+  )})
     format('woff');
   font-weight: normal;
   font-style: normal;
@@ -64,11 +72,17 @@ export function generateLumoFont() {
 `;
 
   // Write the output to src/props/icons.css
-  writeFileSync(`${process.cwd()}/packages/vaadin-lumo-styles/src/props/icons.css`, [createCopyright(), outputCSS.trimStart()].join('\n'));
+  writeFileSync(
+    `${process.cwd()}/packages/vaadin-lumo-styles/src/props/icons.css`,
+    [createCopyright(), outputCSS.trimStart()].join('\n')
+  );
 
   // Write the list of glyphs for visual tests
   const list = glyphs.map((g) => g.name);
-  writeFileSync(`${process.cwd()}/packages/vaadin-lumo-styles/test/glyphs.json`, JSON.stringify(list, null, 2));
+  writeFileSync(
+    `${process.cwd()}/packages/vaadin-lumo-styles/test/glyphs.json`,
+    JSON.stringify(list, null, 2)
+  );
 
   // Cleanup temporary font files
   unlinkSync(`${FONT}.svg`);