search

vincentdoerig / latex-css

LaTeX.css is a CSS library that makes your website look like a LaTeX document
https://latex.vercel.app
MIT License
2.74k stars 125 forks source link

Use Vite as build tool #52

Closed jcbhmr closed 1 year ago

jcbhmr commented 1 year ago

This PR would...

Why this is a good idea

https://vitejs.dev/guide/features.html#css

Vite is really good. Like really good in terms of developer experience, tooling support, popularity, etc. It seems to be the absolute no-brainer option for bundling, building, etc. today. This may change in the future, and if it does I encourage you to move to whatever the best thing becomes. But right now I think this is a good build tool to migrate too.

Here's some stats from the State of JS 2022 survey to back up that Vite is on top right now:

image image

Vite even supports SASS, SCSS, @import-bundling, PostCSS, etc. out of the box. This would open this project up to using SASS or SCSS, @import(...)-bundling, etc. that all compiles to the exact same CSS that we have now! 😎

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
latex-css ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 6, 2023 at 7:11AM (UTC)
vincentdoerig commented 1 year ago

Thank you for the great idea! The only problem I see right now is that the minimised file (https://latex.vercel.app/style.min.css) is not accessible in your version. If there is a way to make this work, I'll gladly merge this PR:).

jcbhmr commented 1 year ago

Oops! I forgot to make sure that it worked with Vercel. 🤦‍♂️ Vercel looks for the npm run build script in package.json, so I needed to add that, and then it worked! 🎉

https://latex-css-git-fork-jcbhmr-use-vite-vincentdoerig.vercel.app/style.min.css

Here is a screenshot of the above ⬆ URL:

image

Does this fix it?

vincentdoerig commented 1 year ago

Hey, do you mind reopening this PR? I had plans on merging this one, but wanted to get through with the others to avoid any merging conflicts. I apologise for the lack of communication and want to thank you for the meaningful contribution:).

jcbhmr commented 1 year ago

Sure! ♥️ Sorry about that.

I had just figured that is continue with the fork on my own to avoid spamming you with PR after PR that would increasingly become based on each other. You can check out some of my changes and additions https://github.com/jcbhmr/latexlike

The big one so far is the storybook website example showcase instead of the demo pages. https://jcbhmr.github.io/latexlike/?path=/docs/blockquote--alone

vincentdoerig commented 1 year ago

Thanks again for the PR, I apologise again for the delays... One last thing I noticed is that we probably should not inline all the fonts into the minified file, since the resulting file size of style.min.css is 2.9MB (!). We should either restrict ourselves to only inlining the regular (and maybe the bold) font file or drop them all together and reference them by the @font-face rule like before (and as it's done in style.css). Thoughts?

jcbhmr commented 1 year ago

we probably should not inline all the fonts into the minified file

Good catch! I didn't even think about that. 🤦‍♂️ We could use something like https://github.com/ManBearTM/vite-plugin-no-bundle/#readme and just copy over all the font files. Probably. I haven't tried this yet, but I think this is the solution.

Sitenote: do you know if Chrome or Firefox will always eagerly load fonts if they aren't used (like if I define @font-face for "My Unused Font"), or do they load them on-demand when a font gets used (like font-family: "My Actually Used Font";)? Does font loading block rendering?

You could also require "Load one of the following fonts with your own font-loading mechanism, and we'll automatically use that" though that would be a breaking change and require more justification than just "it was too hard to do what we do now with Vite".

<link rel="stylesheet" href="https://unpkg.com/panduck-font-libertinus" />
<link rel="stylesheet" href="https://unpkg.com/latex.css" />
vincentdoerig commented 1 year ago

Yes, so I would personally avoid introducing a breaking change. I am pretty sure that the browser only downloads the fonts it needs (i.e. are being actively referenced in a class used on the page), so the best solution would be to get rid of the inlined fonts in the minified file and replace them with the font-face declarations like in the unminified stylesheet. I will look into how to do this with Vite/the plugin you referenced.