[Bug?]: Storybook not generating when there's a custom @font-face

ahaywood commented 1 year ago

What's not working?

Storybook is erroring out if there's a custom @font-face block within my index.css

Here's a Loom video demonstrating: https://www.loom.com/share/d75b96e132cc44219bb44fa503d5dd73

My fonts are within a public/fonts directory, which is aligned with the documentation.

A few notes:

I am using Tailwind. I haven't tried replicating without Tailwind
In the Loom video, I'm using this repo: https://github.com/ahaywood/redwoodjs-partner-badges but I have been able to replicate the problem within a fresh install

How do we reproduce the bug?

yarn create redwood-app my-redwood-project
cd my-redwood-project
yarn install
yarn rw setup ui tailwindcss

Add a custom font to public/fonts
Within index.css, add a custom @font-face block. (Here's mine):

@font-face {
  font-family: "Eagle Sight";
  src: url("/fonts/eagleSight/EagleSightRegular.ttf") format("truetype"),
    url("/fonts/eagleSight/eaglesightregular-webfont.woff") format("woff"),
    url("/fonts/eagleSight/eaglesightregular-webfont.woff2") format("woff2");
}

/* sherman */
@font-face {
  font-family: "Sherman";
  src: url("/fonts/sherman/Sherman-Display.woff") format("woff"),
    url("/fonts/sherman/Sherman-Display.woff2") format("woff2");
}

Run yarn rw storybook

Everything seems to be running fine in dev yarn rw dev

What's your environment? (If it applies)

System:
    OS: macOS 13.3
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.0 - /private/var/folders/f4/q5j7cnt15hvftx0cp3w8h8nr0000gn/T/xfs-3121f286/node
    Yarn: 3.6.1 - /private/var/folders/f4/q5j7cnt15hvftx0cp3w8h8nr0000gn/T/xfs-3121f286/yarn
  Databases:
    SQLite: 3.39.5 - /usr/bin/sqlite3
  Browsers:
    Chrome: 116.0.5845.140
    Edge: 116.0.1938.62
    Safari: 16.4
  npmPackages:
    @redwoodjs/auth-dbauth-setup: 6.1.0 => 6.1.0 
    @redwoodjs/cli-storybook: 6.1.0 => 6.1.0 
    @redwoodjs/core: 6.1.0 => 6.1.0

Are you interested in working on this?

[ ] I'm interested in working on this

rkmitra1 commented 1 year ago

Get the same error (but due to markdown file) Screenshot 2023-08-31 at 6 40 00 PM

I have narrowed down my problem to loading a markdown file in my component.

import helpContent from './Help.md?raw'

This works in the normal dev server, not storybook.

if I comment out that line and replace with

const helpContent = 'test'

it works

Does Storybook still use webpack? if so, does the loader need to be configured.

rkmitra1 commented 1 year ago

Update to my previous comment. Note: my problem is with loading a markdown file (but I believe the fonts issue is similar)

As suspected my storybook is still using webpack (even though my project is vite). Redwood version 6.1.0

My fix (workaround)

Setup additional webpack configuration
- yarn rw setup webpack
edit the created web/config/webpack.config.js file
- add a rule for markdown files
- I have attached my file
In my case, I also had to add the raw-loader package
- yarn add raw-loader

EXTRA CREDIT I found the redwood stats functionality command that I had not used before. Might be useful to track down webpack issues and easily determine if your new configuration is working.

yarn rw build --stats

jtoar commented 11 months ago

I recently looked at this and at least for Amy's cause, it seems like it's because of new lines in the properties using the url function:

@font-face {
  font-family: "My font";
  /* 👇 The new lines here may cause an error */
  src: url("/fonts/myFont/MyFont.ttf") format("truetype"),
    url("/fonts/myFont/myfontbold.woff") format("woff"),
    url("/fonts/myFont/myfontregular.woff2") format("woff2");
}

When I got rid of those new lines, the error went away:

@font-face {
  font-family: "My font";
  src: url("/fonts/myFont/MyFont.ttf") format("truetype"), url("/fonts/myFont/myfontbold.woff") format("woff"), url("/fonts/myFont/myfontregular.woff2") format("woff2");
}

So, there's one possible workaround.

Tobbe commented 9 months ago

@ahaywood Can you confirm that @rkmitra1's and/or @jtoar's workarounds work for you with your font?

ahaywood commented 7 months ago

@jtoar 's workaround did work for me! I've just been sticking the url on a single line.

ahaywood commented 1 day ago

This seems to have bee resolved. 🙌

redwoodjs / redwood