New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(web-fonts): add downloadLocally options #3723
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for unocss ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
@userquin would you mind checking that the code makes sense? Is there anything missing other than support for svelte for example? Thank you! |
eb5bf79
to
ca5a114
Compare
preflights.push(await importUrl(url)) | ||
} | ||
|
||
preflights.push(provider.getPreflight?.(fontsForProvider)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is missing for downloadLocally
My commit should fix lint and build, we need to review logic for local font folder:
The preset will not initialize the css folder, the vite plugin will check if configured, if missing then it will use We also need to simplify the logic, we don't want to deal with public, assets and external folders: my suggestion is to use always
Of course, we also need to check Next and Webpack. We also need to review reload logic, what if the font is changed? (we should remove css and fonts and download them again) |
We cannot use webfont preset in playground, it is client side only, we should add a new example and some tests. (I mean, the local fonts will be ignored in the client runtime (we have also UnoCSS configuration in the playground), only used in playground build) |
We also need to include preconnect and font in the entry point (index.html), rn not adding those head entries. (this should go in another PR, it is a new feat for the preset) |
downloadBasePath: nuxt.options.app.baseURL, | ||
} | ||
nuxt.options.css ??= [] | ||
nuxt.options.css.push(`~/${relative(dirname(nuxt.options.dir.public), downloadDir)}/${defaultFontCssFilename}`.replaceAll('\\', '/')) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should use unshift
?
we'll need to include css and font folders: css should go to assets folders in Vite and styles folder in Astro and Nuxt (this way we can use some CSS processing optimizations, Astro for example excluding css styles in public folder => https://docs.astro.build/en/guides/styling/#load-a-static-stylesheet-via-link-tags) |
@onmax can you merge main and resolve the conflicts in the kit example? I will not touch the PR until tmr. done ✔️ |
Sorry, I was doing other stuff. Anything missing in the PR? |
We need to add webpack and CLI. We should review the logic: check nuxt google fonts and google-fonts-helper |
🏗️ WIP
Solves #3646
How does it work?
Using remote font
It works as before. We just moved the logic of fetching the remote css to its own function:
getRemoteCSS
Using local font
readFontCSS
. If it has not been generated a placeholder will be return. The content of that function is the content that it is returned to thegetCSS
of the preflight of the preset.useLocalFont
function:2.1 Download the remote CSS using
getRemoteCSS
2.2 Extract the urls
2.3 Download the urls and save them locally
2.4 Update the CSS file with the local paths
2.5 Write the CSS file
TODO