@igstack/app-catalog-frontend-core 4.0.0-alpha-20260920165419 → 4.0.0-alpha-20260920174621

package/dist/esm/__tests__/stylesheetFonts.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.css

@@ -1,8 +1,13 @@
-/* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
-@import 'tailwindcss';
 /* Warm, crafted type to match the hand-drawn logo (see issue #31 redesign):
-   Fraunces = characterful display serif, Nunito Sans = friendly readable body. */
+   Fraunces = characterful display serif, Nunito Sans = friendly readable body.
+
+   This has to come before every other at-rule: a remote @import that follows
+   any rule is invalid where it stands, so the minifier drops it — and the only
+   symptom is body text quietly falling back to a system face on machines that
+   don't happen to have the family installed. */
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');
+/* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
+@import 'tailwindcss';
 /* Other module imports this css, and we need to tell tailwind to scan our tsx files */
 @source ".";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "4.0.0-alpha-20260920165419",
+  "version": "4.0.0-alpha-20260920174621",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -113,7 +113,7 @@
     "tailwindcss": "^4.1.7",
     "tiptap-markdown": "^0.8.0",
     "tslib": "^2.3.0",
-    "@igstack/app-catalog-shared-core": "4.0.0-alpha-20260920165419"
+    "@igstack/app-catalog-shared-core": "4.0.0-alpha-20260920174621"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.5",
@@ -140,7 +140,7 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "4.0.0-alpha-20260920165419"
+    "@igstack/app-catalog-backend-core": "4.0.0-alpha-20260920174621"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -149,7 +149,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "ee3510f9a5aeb22245797ffa2650dc8b31d8e44d",
+  "gitHead": "a297e008f756aa8b200884a84bcb43d999519546",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/stylesheetFonts.test.ts

@@ -0,0 +1,49 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * A font family named in a theme token but never requested is invisible on any
+ * machine that happens to have it installed — which is every developer's, and
+ * no user's. So assert the wiring instead of the rendering.
+ */
+// The path is relative to the package root, which is where vitest runs.
+const css = readFileSync('src/index.css', 'utf8')
+const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, '')
+
+/**
+ * The first family of every non-aliased declaration of a token. The first one
+ * is the webfont; everything after it is a fallback by definition.
+ */
+function primaryFamilies(token: string): string[] {
+  const declarations = [
+    ...css.matchAll(new RegExp(`--${token}:\\s*([^;]+);`, 'g')),
+  ]
+    .map((match) => (match[1] ?? '').trim())
+    .filter((value) => !value.startsWith('var('))
+  expect(declarations.length).toBeGreaterThan(0)
+  return declarations.map((value) =>
+    (value.split(',')[0] ?? '').trim().replace(/^'|'$/g, ''),
+  )
+}
+
+describe('web fonts', () => {
+  it('requests its families before any other at-rule', () => {
+    // Anywhere later it is invalid where it stands, so the minifier drops it
+    // and the only symptom is a silent fallback to a system face.
+    const atRules = [...withoutComments.matchAll(/^@[\w-]+[^;{]*/gm)].map(
+      (match) => match[0].trim(),
+    )
+    expect(atRules[0]).toMatch(/^@import url\('https:\/\/fonts\./)
+  })
+
+  it.each(['font-sans', 'font-serif'])(
+    '--%s names a family the stylesheet actually requests',
+    (token) => {
+      for (const family of primaryFamilies(token)) {
+        // A system stack has nothing to download.
+        if (family.startsWith('ui-') || family === 'system-ui') continue
+        expect(withoutComments).toContain(`family=${family.replace(/ /g, '+')}`)
+      }
+    },
+  )
+})

package/src/index.css

@@ -1,8 +1,13 @@
-/* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
-@import 'tailwindcss';
 /* Warm, crafted type to match the hand-drawn logo (see issue #31 redesign):
-   Fraunces = characterful display serif, Nunito Sans = friendly readable body. */
+   Fraunces = characterful display serif, Nunito Sans = friendly readable body.
+
+   This has to come before every other at-rule: a remote @import that follows
+   any rule is invalid where it stands, so the minifier drops it — and the only
+   symptom is body text quietly falling back to a system face on machines that
+   don't happen to have the family installed. */
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');
+/* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
+@import 'tailwindcss';
 /* Other module imports this css, and we need to tell tailwind to scan our tsx files */
 @source ".";