Fail the build if any referenced file is not being found #86

distributev · 2023-12-02T13:03:22Z

distributev
Dec 2, 2023

Is it possible to have the build commands like npm run build and npm run prod fail is any referenced file is not found? (instead of silently continuing without including the missing files)

for instance it should fail the build if src: url('@fonts/geist/GeistVariableVF.woff2') format('woff2'); file which is being referenced is not present.

In the existing fonts.css I tried to use some custom fonts like this
but they don't look like being applied -

/**
 * Custom `@font-face` rules
 *
 * These will be added immediately before Tailwind’s `base` layer.
 */
 @font-face {
    font-display: swap;
    font-family: 'GeistSans';
    font-style: normal;
    font-weight: 400; /* Variable */
    src: url('@fonts/geist/GeistVariableVF.woff2') format('woff2');
  }
  
  @font-face {
    font-display: swap;
    font-family: 'GeistMono';
    font-style: normal;
    font-weight: 400; /* Variable */
    src: url('@fonts/geist/GeistVariableVF.woff2') format('woff2');
  }
  
  .font-geistSans {
    font-family: 'GeistSans', sans-serif;
  }
  
  .font-geistMono {
    font-family: 'GeistMono', monospace;
  }

My folder structure is like this

I also declared the fonts in tailwind.config.js like this

theme: {
		// Extend the default Tailwind theme.
		extend: {
			fontFamily: {
			  geistSans: ['GeistSans', 'sans-serif'],
			  geistMono: ['GeistMono', 'monospace'],
			},
}

and then in header.php I have this

<html class="font-geistSans font-geistMono">

but visually the fonts doesn't look like being applied.

How I can debug this? How I can be sure if fonts are being applied or not? (just looking at the output website is not 100% obvious, some fallback similar font could be used instead)

P.S - I used a very similar approach to include the same fonts in another existing (static) website and I know that the above steps are supposed to work (minus the few differences related with _tw build process)

gregsullivan · 2023-12-02T17:27:56Z

gregsullivan
Dec 2, 2023
Maintainer

Hi—Thanks for posting this!

_tw's build process is as straightforward as possible, so it doesn't move files referenced in your CSS files (like something like webpack might); you need to put them in the appropriate location in your ./theme folder, and then you can reference them relative to ./theme in your CSS.

In your example above, you'll want to move your fonts folder to ./theme/fonts and then remove the @ symbol from the path.

I will also say that I'm not sure about the effect of applying sans serif and monospace fonts on the same element; I think one would be selected over the other.

I'll convert this to a discussion in case you have any other questions!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fail the build if any referenced file is not being found #86

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Fail the build if any referenced file is not being found #86

distributev Dec 2, 2023

Replies: 1 comment

gregsullivan Dec 2, 2023 Maintainer

distributev
Dec 2, 2023

gregsullivan
Dec 2, 2023
Maintainer