[DS 2.0] Ship the fonts as assets instead of base64 - #93
Conversation
bc6f5c5 to
714f7f1
Compare
714f7f1 to
7b4131b
Compare
7cf4e39 to
24fddf9
Compare
24fddf9 to
a5b519e
Compare
a5b519e to
0c2d1a1
Compare
| } | ||
|
|
||
| type FontFaceDefinition = { | ||
| family: 'Inter' | 'Poppins'; |
There was a problem hiding this comment.
Poppins and Inter are licensed under the SIL OFL 1.1, and this PR starts redistributing their .woff2 files as standalone assets in the npm package. The OFL asks for the license text to accompany the font files when they are redistributed. Strictly speaking this predates the PR, since base64-embedded fonts are redistribution too, but standalone files in dist/assets make it visible. Not a blocker for this PR. As a follow-up, let's either copy the OFL texts from the fontsource packages into dist/assets or add a fonts section to the package LICENSE file. The check-built-css gate could then assert the license file ships next to the assets, so it never silently drops out of the publish.
|
Two follow-up asks, neither blocking. First, could you add a Second, the docs give one preload example, but consumers have to inspect |
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.
The role table recommended the emphasized large label for chips, while the chip component set specifies the small regular label at every size - the row now names buttons alone and chips get their measured role. Knip's ignore entry moves to the ui workspace, where the fontsource packages now live and are consumed outside its JS/TS walk, and the CLAUDE.md table stops claiming knip runs as part of pnpm check.
0c2d1a1 to
6d0d615
Compare
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.