Merge branch 'main' into 09-28-feat_fontless_ability_to_remove_google_font_for_old_browser

Author: hi-ogawa

.github/workflows/release-preview.yml

@@ -1,4 +1,4 @@
-name: release-preview
+name: release
 
 on:
   push:
@@ -8,19 +8,21 @@ on:
     types: [opened, synchronize, labeled]
 
 jobs:
-  release-preview:
+  pkg-pr-new:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
-        with:
-          fetch-depth: 0
-
+      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - run: corepack enable
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version: lts/*
           cache: pnpm
 
-      - run: pnpm install
-      - run: pnpm build
-      - run: pnpm dlx pkg-pr-new publish --compact packages/fontless packages/fontaine
+      - name: 📦 install dependencies
+        run: pnpm install
+
+      - name: 🛠 build project
+        run: pnpm build
+
+      - name: 📦 publish nightly release
+        run: pnpm pkg-pr-new publish --compact packages/fontless packages/fontaine

package.json

@@ -25,8 +25,9 @@
     "changelogithub": "13.16.0",
     "eslint": "9.36.0",
     "installed-check": "9.3.0",
-    "knip": "5.64.0",
-    "lint-staged": "16.2.0",
+    "knip": "5.64.1",
+    "lint-staged": "16.2.3",
+    "pkg-pr-new": "0.0.60",
     "simple-git-hooks": "2.13.1",
     "typescript": "5.9.2"
   },

packages/fontaine/build.config.ts

@@ -0,0 +1,12 @@
+import fs from 'node:fs'
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  hooks: {
+    'build:done': async function () {
+      const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection')
+      const output = `export const entireMetricsCollection = ${JSON.stringify(entireMetricsCollection)}`
+      fs.writeFileSync('dist/capsize-font-metrics.mjs', output)
+    },
+  },
+})

packages/fontaine/package.json

@@ -21,6 +21,9 @@
     "performance"
   ],
   "sideEffects": false,
+  "imports": {
+    "#capsize-font-metrics": "./dist/capsize-font-metrics.mjs"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -47,7 +50,6 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@capsizecss/metrics": "^3.5.0",
     "@capsizecss/unpack": "^3.0.0",
     "css-tree": "^3.1.0",
     "magic-regexp": "^0.10.0",
@@ -57,8 +59,9 @@
     "unplugin": "^2.3.10"
   },
   "devDependencies": {
+    "@capsizecss/metrics": "3.5.0",
     "@types/css-tree": "2.3.10",
-    "@types/node": "22.18.6",
+    "@types/node": "22.18.7",
     "@types/serve-handler": "6.1.4",
     "@vitest/coverage-v8": "3.2.4",
     "eslint": "9.36.0",

packages/fontaine/src/metrics.ts

@@ -2,7 +2,6 @@ import type { Font } from '@capsizecss/unpack'
 import type { FontFaceMetrics } from './css'
 
 import { fileURLToPath } from 'node:url'
-import { fontFamilyToCamelCase } from '@capsizecss/metrics'
 import { fromFile, fromUrl } from '@capsizecss/unpack'
 import { parseURL } from 'ufo'
 
@@ -34,7 +33,7 @@ export async function getMetricsForFamily(family: string) {
 
   try {
     const name = fontFamilyToCamelCase(family)
-    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection')
+    const { entireMetricsCollection } = await import('#capsize-font-metrics') as any as typeof import('@capsizecss/metrics/entireMetricsCollection')
     const metrics = entireMetricsCollection[name as keyof typeof entireMetricsCollection]
 
     /* v8 ignore next 4 */
@@ -92,3 +91,16 @@ export async function readMetrics(_source: URL | string) {
   metricCache[source] = filteredMetrics
   return filteredMetrics
 }
+
+// inline `@capsizecss/metrics`
+// https://github.com/seek-oss/capsize/blob/66344699ff7759a661a78d0629375714c6f308b0/packages/metrics/src/index.ts
+function fontFamilyToCamelCase(str: string) {
+  return str
+    .split(/[\s|-]/)
+    .filter(Boolean)
+    .map(
+      (s, i) =>
+        `${s.charAt(0)[i > 0 ? 'toUpperCase' : 'toLowerCase']()}${s.slice(1)}`,
+    )
+    .join('')
+}

packages/fontless/examples/remix-app/.gitignore renamed to packages/fontless/examples/react-router-app/.gitignore

@@ -2,4 +2,5 @@ node_modules
 
 /.cache
 /build
+/.react-router
 .env

packages/fontless/examples/remix-app/app/routes/styles/black-fox.ttf renamed to packages/fontless/examples/react-router-app/app/black-fox.ttf

@@ -1,3 +1,8 @@
+:root {
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
 p {
   font-size: x-large;
 }

packages/fontless/examples/remix-app/app/routes/styles/styles.css renamed to packages/fontless/examples/react-router-app/app/index.css

@@ -1,4 +1,4 @@
-import { Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'
 
 import './index.css'
 
@@ -9,6 +9,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
+        <Links />
       </head>
       <body>
         {children}

packages/fontless/examples/remix-app/app/root.tsx renamed to packages/fontless/examples/react-router-app/app/root.tsx

@@ -0,0 +1,6 @@
+import type { RouteConfig } from '@react-router/dev/routes'
+import { index } from '@react-router/dev/routes'
+
+export default [
+  index('routes/_index.tsx'),
+] satisfies RouteConfig