Ship the fonts as assets instead of base64 - #93
Draft
librowski wants to merge 1 commit into
Draft
Conversation
The library inlined twelve font faces as base64 because Vite's library mode inlines every asset unconditionally, so the built stylesheet carried 382 KB of fonts: index.css was 509 KB and the SDK stylesheet, which bundles it, 591 KB. The faces are generated after Vite finishes, from the fontsource metadata, and copied into dist/assets. Poppins 400 and 600 latin stay inlined - the only weights the typography classes declare - so the common text needs no extra request. Everything else is fetched on demand, and each face now carries the unicode-range the per-subset fontsource files omit, so a document without extended latin skips those files entirely. The legacy woff source is gone. index.css is 150 KB, the SDK stylesheet 230 KB, and dist gains ten woff2 files. A new gate fails the build when a stylesheet references an asset that is not in dist - the failure mode this arrangement invites, and the one a previous font change hit only on clean CI. Consumers keep their imports; a Content-Security-Policy naming font-src needs 'self' rather than 'data:', and the dist layout has to survive copying.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fonts stop being base64-inlined. Vite's library mode inlines every asset unconditionally (
assetsInlineLimithas no effect there), so the built stylesheets carried 382 KB of font payload.What changed — the
@font-facerules are generated after Vite finishes, from the fontsource metadata, and the files are copied intodist/assets:typography.cssdeclares — so ordinary text needs no extra request and shows no swap flash..woff2fetched on demand.unicode-range, which the per-subset fontsource stylesheets omit. Without it a browser has to consider both subsets; with it, a document without extended latin never fetches those files..woffsource is gone — that duplication is why twelve faces produced twenty-four payloads.Sizes —
ui/dist/index.css509 KB → 150 KB,sdk/dist/style.css591 KB → 230 KB,ui/dist/styles.css7 KB → 32 KB (it now carries the two inlined faces). Ten.woff2files ship in each package'sdist/assets.Why the SDK is in scope — it bundles the UI stylesheet into its own, so it carried the same payload; it now appends the generated block and copies the assets, reading them as artifacts from the UI build rather than importing its build code.
New gate —
check-built-cssfails when a stylesheet references an asset missing fromdist. That is the failure mode this arrangement invites, and the one an earlier font change hit only on a clean CI install. Verified by deleting a file and watching the build fail.For consumers — imports are unchanged, and the subpath path finally works as documented:
styles.cssnow really does bring the typefaces. Two caveats, both in the changeset: a Content-Security-Policy namingfont-srcneeds'self'(or the serving origin) rather thandata:, and thedistlayout has to survive copying, since the stylesheets reference./assets/*.woff2. Bundlers handle that themselves.overview.mdxgains a short section listing what each style surface provides and what it does not — which also closes the gap a reviewer flagged on the typography PR, where subpath consumers were told to addstyles.cssfor typography that then rendered in a system font.Verified: ui/sdk lint and typecheck,
build:ui,build:lib, stylelint, all test suites, docs build, demo build, and the asset gate proven by removing a font file.