Trunk does not behave as expected with CSS file #811

djmcmath · 2024-06-18T19:54:29Z

djmcmath
Jun 18, 2024

I am attempting to use a simple CSS file, packaged with Trunk, to use CSS in Yew. I believe I've followed the documentation correctly, and it's almost working. The trunk build puts the hashed CSS file in the correct folder, but the link tag with the hashed filename doesn't end up in the resultant index.html file. Here's the minimum reproducible example.

Trunk.toml:

[build]
dist = "/usr/share/nginx/html"
public_url = "/"
release = false

index.html:

<!doctype html>
<html lang="en">
<head>
    <h2>Loading...</h1>
    <link data-trunk rel="css" href="src/static_html/styles.css" />
    <meta charset="utf-8">
</head>
<body>
    <h3>This should display while loading</h3>
</body>
</html>

main.rs:

use yew::{html, Html};
use yew::function_component;

fn main() {
    yew::Renderer::<Main>::new().render();
}

#[function_component]
fn Main() -> Html {
    html! {
        <div>
            {"I expect large green text on a red background"}
        </div>
    }
}

styles.css:

body { 
    background-color: red; 
    font-size: 5em;
    color: green;
}

I would expect the HTML file to have a link to the CSS file. As you can see, there's no link tag for the CSS file, which has been hashed and placed in the correct place. So it's getting a halfway solution -- it's building correctly, but it isn't putting in the tag in the html that it builds.

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<link rel="preload" href="https://ferrywizard.diverdaniel.com/minimum_yew-7ace0fdbec74656b_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="https://ferrywizard.diverdaniel.com/minimum_yew-7ace0fdbec74656b.js">
</head>
<body>
<div>This should be large green text on a red background</div>
</body>
</html>

I'm hoping that I've just done something silly here, or misread the documentation, rather than that I've found a bug.

Thanks for the help,
Dan

djmcmath · 2024-06-18T21:59:57Z

djmcmath
Jun 18, 2024
Author

Ok, I found the answer, and it's genuinely as silly of a mistake as you might hope:

It's in the head section -- the tag for "Loading, this will take a moment" is an h1 (or h2 tag), and that's causing something in trunk to fail with no error, warning, caution, or note. If you make it a title tag, everything works just like you'd hope.

1 reply

ctron Jun 19, 2024
Maintainer

Yes, the file is not valid HTML. The <h2> start is closed by an </h1>. I assume that the HTML parser simply waits for the end tag, which never happens. Also, to my understanding, the <h2> tag is not a valid element for the <head>.

For HTML processing, trunk is using lol_html, which expects valid HTML.

I do understand that it might be good to have some warning, but that would require some HTML validator in trunk. Which I am not sure is an easy task or in the scope of trunk. Loading that example in IntelliJ (Rust Rover) directly showed me the error.

I think it would make sense to that have, so if you can come up with a PR, I believe that would be a great addition.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trunk does not behave as expected with CSS file #811

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Trunk does not behave as expected with CSS file #811

djmcmath Jun 18, 2024

Replies: 1 comment · 1 reply

djmcmath Jun 18, 2024 Author

ctron Jun 19, 2024 Maintainer

djmcmath
Jun 18, 2024

Replies: 1 comment 1 reply

djmcmath
Jun 18, 2024
Author

ctron Jun 19, 2024
Maintainer