Both style! and style_str! break when using SSR in Leptos

[ilmmatias]

When using SSR, Leptos builds the code twice, and that seems to cause problems as the class names between both builds end up different. style_str! works as long as you put the style string inside every dynamic view you use it, instead of just the root of the component/route, but that doesn't feel like an actual solution.

[abishekatp]

Hi, Thank you for opening an issue. If you have some sample setup that will be helpful to debug and fix this problem.

[ilmmatias]

The code in https://github.com/yuuma03/stylers-ssr triggers the bug when ran with cargo leptos watch. The style only applies after you switch routes, as the initial HTML sent by the server contains the wrong class names.

[abishekatp]

Hi, I think when we implement the idea discussed in this issue will fix this problem also. Once I implement that approach we can check if this problem still exists.

[kekeqy]

In ssr mode, all macros have a problem. Hope it will be fixed soon. @abishekatp

[sambonbonne]

Using the stylers_build branch as a dependency seems to fix the problem (while waiting for the release of this branch).

To fix the problem, add this in your Cargo.toml (don't forget to follow updates about the next release to use it when it's available):

[dependencies]
stylers = { git = "https://github.com/abishekatp/stylers.git", branch = "stylers_build" }

[build-dependencies]
stylers = { git = "https://github.com/abishekatp/stylers.git", branch = "stylers_build" }

You'll need to create a build.rs file with this content (or add it to an existing build.rs if you already use one):

use stylers::build;

fn main() {
    build(Some(String::from("./target/main.css"))); // if you use a Cargo workspace, change the path to use ../target/main.css for example
}

:warning: Don't forget to update your style! (and other) macros calls, you have to remove the "style name":

// before 
style! { "MyComponent",
  div {
    color: ref;
  }
}

// after
style! {
  div {
    color: ref;
  }
}

And tada, it should work! :tada:

[kekeqy]

这是一封自动回复邮件。已经收到您的来信，我会尽快回复。

[abishekatp]

Using the stylers_build branch as a dependency seems to fix the problem (while waiting for the release of this branch).

To fix the problem, add this in your Cargo.toml (don't forget to follow updates about the next release to use it when it's available):

[dependencies]
stylers = { git = "https://github.com/abishekatp/stylers.git", branch = "stylers_build" }

[build-dependencies]
stylers = { git = "https://github.com/abishekatp/stylers.git", branch = "stylers_build" }

You'll need to create a build.rs file with this content (or add it to an existing build.rs if you already use one):

use stylers::build;

fn main() {
    build(Some(String::from("./target/main.css"))); // if you use a Cargo workspace, change the path to use ../target/main.css for example
}

⚠️ Don't forget to update your style! (and other) macros calls, you have to remove the "style name":

// before 
style! { "MyComponent",
  div {
    color: ref;
  }
}

// after
style! {
  div {
    color: ref;
  }
}

And tada, it should work! 🎉

Thank you for the update.

[abishekatp]

The new version stylers 1.0.0-alpha is live now. If this problem is solved by this new version we can close this.

[abishekatp]

Based on the reply from @sambonbonne, I hope this issue has been fixed, so closing it. If someone is still facing this issue, then please open a new issue.