Bschlenk/wip color font fix

package.json

@@ -16,10 +16,10 @@
   "devDependencies": {
     "@bschlenk/eslint-config": "^0.0.3",
     "@otfjs/cli": "workspace:*",
-    "eslint": "^9.14.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "typescript": "^5.6.3"
+    "eslint": "^9.25.1",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "typescript": "^5.8.3"
   }
 }

packages/otfjs-cli/package.json

@@ -24,13 +24,13 @@
   "dependencies": {
     "@bschlenk/mat": "^0.0.11",
     "@bschlenk/vec": "^0.0.7",
-    "himalaya": "^1.1.0",
+    "himalaya": "^1.1.1",
     "otfjs": "workspace:*",
     "svgo": "4.0.0-rc.1"
   },
   "devDependencies": {
-    "@types/node": "^22.8.7",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.4"
+    "@types/node": "^22.15.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.2"
   }
 }

packages/otfjs-cli/src/@types/himalaya.d.ts

@@ -24,5 +24,8 @@ declare module 'himalaya' {
   export type Node = Element | Comment | Text
 
   export function parse(str: string, options?: any): Node[]
-  export function stringify(elements: Node[]): string
+  export function stringify(
+    elements: Node[],
+    options?: { preferDoubleQuoteAttributes?: boolean },
+  ): string
 }

packages/otfjs-cli/src/cmd/gen-previews.ts

@@ -24,32 +24,36 @@ export async function run(args: string[]) {
 
 async function processFonts(fontFiles: string[], outDir: string) {
   for await (const { font, file } of iterFonts(fontFiles)) {
-    console.log(file)
-
-    const preview = generatePreview(font)
-    if (!preview) {
-      console.warn(`failed to generate preview for ${file}`)
-      continue
-    }
-
-    const name = path.basename(file, path.extname(file))
-    const outPath = path.join(outDir, `${name}.svg`)
-
-    const optimized = optimize(preview, {
-      path: outPath,
-      multipass: true,
-      plugins: [
-        'preset-default',
-        {
-          name: 'prefixIds',
-          params: {
-            prefix: name.toLowerCase().replaceAll(' ', '-'),
-            delim: '-',
+    try {
+      console.log(file)
+
+      const preview = generatePreview(font)
+      if (!preview) {
+        console.warn(`failed to generate preview for ${file}`)
+        continue
+      }
+
+      const name = path.basename(file, path.extname(file))
+      const outPath = path.join(outDir, `${name}.svg`)
+
+      const optimized = optimize(preview, {
+        path: outPath,
+        multipass: true,
+        plugins: [
+          'preset-default',
+          {
+            name: 'prefixIds',
+            params: {
+              prefix: name.toLowerCase().replaceAll(' ', '-'),
+              delim: '-',
+            },
           },
-        },
-      ],
-    })
-    await fs.writeFile(outPath, optimized.data)
+        ],
+      })
+      await fs.writeFile(outPath, optimized.data)
+    } catch (err) {
+      console.error(`failed to generate preview for ${file}:`, err)
+    }
   }
 }
 

packages/otfjs-cli/src/cmd/sprite.ts

@@ -6,15 +6,13 @@ import { Element, parse, stringify } from 'himalaya'
 import { stripExt } from '../lib/cli.js'
 
 export function run(args: string[]) {
-  const dir = args[0]
+  const [dir, outDir, complexPath] = args
+  const previewFile = path.join(outDir, 'preview.svg')
   const files = fs.readdirSync(dir)
+  const complexIds: string[] = []
 
-  const root: Element = {
-    type: 'element',
-    tagName: 'svg',
-    attributes: [{ key: 'xmlns', value: 'http://www.w3.org/2000/svg' }],
-    children: [],
-  }
+  const stream = fs.createWriteStream(previewFile)
+  stream.write('<svg xmlns="http://www.w3.org/2000/svg">\n')
 
   for (const file of files) {
     const data = fs.readFileSync(path.join(dir, file), 'utf-8')
@@ -25,17 +23,32 @@ export function run(args: string[]) {
       continue
     }
 
+    const fileId = fileToId(file)
+
+    // We merge all defs into a single defs element at the start of the svg sprite
+    const defsIndex = svg.children.findIndex(
+      (child) => child.type === 'element' && child.tagName === 'defs',
+    )
+
+    if (defsIndex !== -1) {
+      fs.writeFileSync(path.join(outDir, `${fileId}.svg`), data)
+      complexIds.push(fileId)
+      continue
+    }
+
     const viewBox = svg.attributes.find((attr) => attr.key === 'viewBox')!
+    const id = { key: 'id', value: fileId }
 
-    root.children.push({
-      type: 'element',
-      tagName: 'symbol',
-      attributes: [{ key: 'id', value: fileToId(file) }, viewBox],
-      children: svg.children,
-    })
+    svg.attributes = [id, viewBox]
+    svg.tagName = 'symbol'
+
+    stream.write(stringify([svg]))
+    stream.write('\n')
   }
 
-  console.log(stringify([root]))
+  stream.end('</svg>\n')
+
+  fs.writeFileSync(complexPath, JSON.stringify(complexIds))
 }
 
 function fileToId(file: string) {

packages/otfjs-ui/package.json

@@ -16,18 +16,18 @@
     "@bschlenk/vec": "^0.0.7",
     "clsx": "^2.1.1",
     "otfjs": "workspace:^",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
     "svg-sprite-generator": "^0.0.7",
     "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3"
   }
 }