v0.1.5

[regisphilibert]

This release mostly addresses fonts and adds an experimental "Tailwind JIT" transformation to styles.

huge/Fonts: performance optimization with preload and more!

preload

A past mistake was to use prefetch in order to direct browsers to load the font files ASAP. This has been corrected by implementing a preload setting and retiring prefetch. Huge will no longer use rel="prefetch" for fonts "preloading". but a rel="preload" along side other proper attributes:

<link as="font" crossorigin="anonymous" href="/fonts/my-font.woff2" rel="preload" type="font/woff2">

WARNING: This for now is limited to woff2 files as this is the most supported, most efficient format. Other file formats won't be "preloaded".

Only preload certain fonts.

It's good practice to only preload certain font files (needed above the fold, or on most of the pages), so while by default, Huge will preload every woff2 file, users can overwrite the preload setting as per declaration regardless of the global preload setting.

fonts:
- family: Open
  preload: false
  file: fonts/OpenSans-ExtraBold
  weight: 900
  style: normal

@font-face src list order.

It recently came to the attention of this project's maintainers that the browser will load the first "supported" font file from the @font-face declaration! So listing the font files in alphabetical order would result in woff being used instead of the much better woff2 and for projects also using ttf, making the much heavier ttf used over woff or woff2.

From now on, Huge will declare the font files in the following order: woff2, woff, ttf, svg, eot.

huge/Styles: Tailwind JIT

This is an experimental feature based on the work of @Gioni06 detailed here. It allows Hugo users to upgrade to Tailwind 3 pending resolution of gohugoio/hugo#8343

It introduced a new transformation called tailwind-jit for use in the use array of a registered style.

This won't be documented while it's experimental but you should know using this will generate a new resource in your resource/_gen directory every time you save. It's perfectly fine if like many your whole resource folder is ignored by git, but be aware and use it at your own risk.

What's Changed

• Fonts: Fine-tune preload, retire prefetch by @regisphilibert in Fonts: Fine tune preload, retire prefetch #64
• Allow per-declaration preload setting by @regisphilibert in Allow per-declaration preload setting #66
• WIP: Add tailwind-jit transformation by @regisphilibert in WIP: Add tailwind-jit transformation #58

Full Changelog: v0.1.4...v0.1.5

---

This discussion was created from the release v0.1.5.

[regisphilibert]

In order to start "experimenting" with Tailwind JIT, all you need to do is

• install the latest tailwind,
• make sure to update your tailwind.config.js with the proper content settings.
• make sure you're using node v16^
• and use the tailwind-jit transformation in your style's use array like so:

styles:
- name: main
  path: css/style.scss
  use:
    - tailwind-jit

Also be aware this will produce a new resource in the resources/_gen directory every time a watched file is saved.