search

futursolo / stylist-rs

A CSS-in-Rust styling solution for WebAssembly Applications
https://crates.io/crates/stylist
MIT License
366 stars 22 forks source link

cant use css! inside a <Link> component from yew #74

Closed alexzanderr closed 2 years ago

alexzanderr commented 2 years ago

im trying to customize the component from yew

this is an erronoues example

use stylist::yew::styled_component;
use yew::prelude::*;
use yew_router::prelude::*;

#[styled_component(Demo)]
fn demo_comp() -> Html {
    html! {
        <Link<AppRoutes> classes={
            css!(r#"
                    -webkit-appearance: button;
                    -moz-appearance: button;
                    appearance: button;
                    margin-top: 10px;
                    padding: 10px;
                    text-decoration: none;

                    position: absolute;

                    border-radius: 25px;
                    color: greenyellow;
                    background-color: #333;
                    font-family: monaco;
                    font-weight: bold;
                "#)
        } to={AppRoutes::HomeRoute}>{ "go back where you came from" }</Link<AppRoutes>>
    }
}

im trying to make this work, how do i do it?

here is the error

error[E0277]: the trait bound `StyleSource<'_>: IntoPropValue<Classes>` is not satisfied
  --> src/components/about.rs:9:26
   |
9  |         <Link<AppRoutes> classes={
   |                          ^^^^^^^ the trait `IntoPropValue<Classes>` is not implemented for `StyleSource<'_>`
   |
note: required by a bound in `LinkPropsBuilder::<R, LinkPropsBuilderStep_missing_required_prop_to, Q>::classes`

is there a possible way to customize <Link> component with this crate ?

WorldSEnder commented 2 years ago

Can you add which version of stylist you are using?

alexzanderr commented 2 years ago 
stylist = { version = "0.10.0", features = ["yew_integration"] }
WorldSEnder commented 2 years ago

Sorry for the wait time. I just can't reproduce the issue on my end. Can you double check that you don't have two versions of yew in your dependency tree, maybe you are depending on the git version of yew, but not overriding the dependency in stylist?

If you run cargo tree -d on your project, it should come out clean. If it shows something like

yew v0.19.3 (*)

yew v0.19.3 (https://github.com/yewstack/yew#0fa83e7d) (*)

... etc gloo will probably also be duplicate in this case

then I understand the error: There are two versions of Classes and stylist only implements IntoPropValue for one of them.

alexzanderr commented 2 years ago

dependecines inside Cargo.toml:

[dependencies]
gloo = "0.7.0"
gloo-dialogs = "0.1.1"
js-sys = "0.3.57"
log = "0.4.17"
reqwasm = "0.5.0"
serde = { version = "1.0.137", features = ["derive"] }
stylist = { version = "0.10.0", features = ["yew_integration"] }
wasm-bindgen-futures = "0.4.30"
wasm-logger = "0.2.0"
web-sys = "0.3.57"
weblog = "0.3.0"
yew = "0.19.3"
yew-router = "0.16"

output of cargo tree -d

❱  cargo tree -d
gloo v0.4.2
├── yew v0.19.3
│   ├── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
│   ├── stylist v0.10.0
│   │   └── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
│   └── yew-router v0.16.0
│       └── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
└── yew-router v0.16.0 (*)

gloo v0.7.0
└── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)

gloo-net v0.1.0
└── reqwasm v0.5.0
    └── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)

gloo-net v0.2.0
└── gloo v0.7.0 (*)

log v0.4.17
├── stylist-macros v0.10.0 (proc-macro)
│   └── stylist v0.10.0 (*)
└── wasm-bindgen-backend v0.2.80
    └── wasm-bindgen-macro-support v0.2.80
        └── wasm-bindgen-macro v0.2.80 (proc-macro)
            └── wasm-bindgen v0.2.80
                ├── console_error_panic_hook v0.1.7
                │   └── yew v0.19.3 (*)
                ├── gloo-console v0.2.1
                │   ├── gloo v0.4.2 (*)
                │   ├── gloo v0.7.0 (*)
                │   └── gloo-worker v0.1.0
                │       └── gloo v0.7.0 (*)
                ├── gloo-dialogs v0.1.1
                │   ├── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
                │   ├── gloo v0.4.2 (*)
                │   └── gloo v0.7.0 (*)
                ├── gloo-events v0.1.2
                │   ├── gloo v0.4.2 (*)
                │   ├── gloo v0.7.0 (*)
                │   ├── gloo-file v0.2.1
                │   │   ├── gloo v0.4.2 (*)
                │   │   └── gloo v0.7.0 (*)
                │   ├── gloo-history v0.1.0
                │   │   └── gloo v0.7.0 (*)
                │   └── stylist v0.10.0 (*)
                ├── gloo-file v0.2.1 (*)
                ├── gloo-history v0.1.0 (*)
                ├── gloo-net v0.1.0 (*)
                ├── gloo-net v0.2.0 (*)
                ├── gloo-render v0.1.1
                │   ├── gloo v0.4.2 (*)
                │   └── gloo v0.7.0 (*)
                ├── gloo-storage v0.2.1
                │   ├── gloo v0.4.2 (*)
                │   └── gloo v0.7.0 (*)
                ├── gloo-timers v0.2.4
                │   ├── gloo v0.4.2 (*)
                │   └── gloo v0.7.0 (*)
                ├── gloo-utils v0.1.3
                │   ├── gloo v0.4.2 (*)
                │   ├── gloo v0.7.0 (*)
                │   ├── gloo-history v0.1.0 (*)
                │   ├── gloo-net v0.1.0 (*)
                │   ├── gloo-net v0.2.0 (*)
                │   ├── gloo-storage v0.2.1 (*)
                │   ├── gloo-worker v0.1.0 (*)
                │   ├── yew v0.19.3 (*)
                │   └── yew-router v0.16.0 (*)
                ├── gloo-worker v0.1.0 (*)
                ├── js-sys v0.3.57
                │   ├── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
                │   ├── gloo-console v0.2.1 (*)
                │   ├── gloo-file v0.2.1 (*)
                │   ├── gloo-net v0.1.0 (*)
                │   ├── gloo-net v0.2.0 (*)
                │   ├── gloo-storage v0.2.1 (*)
                │   ├── gloo-timers v0.2.4 (*)
                │   ├── gloo-utils v0.1.3 (*)
                │   ├── gloo-worker v0.1.0 (*)
                │   ├── serde-wasm-bindgen v0.3.1
                │   │   ├── gloo-history v0.1.0 (*)
                │   │   └── yew-router v0.16.0 (*)
                │   ├── wasm-bindgen-futures v0.4.30
                │   │   ├── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
                │   │   ├── gloo-net v0.1.0 (*)
                │   │   ├── gloo-net v0.2.0 (*)
                │   │   └── yew v0.19.3 (*)
                │   ├── web-sys v0.3.57
                │   │   ├── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
                │   │   ├── gloo-console v0.2.1 (*)
                │   │   ├── gloo-dialogs v0.1.1 (*)
                │   │   ├── gloo-events v0.1.2 (*)
                │   │   ├── gloo-file v0.2.1 (*)
                │   │   ├── gloo-history v0.1.0 (*)
                │   │   ├── gloo-net v0.1.0 (*)
                │   │   ├── gloo-net v0.2.0 (*)
                │   │   ├── gloo-render v0.1.1 (*)
                │   │   ├── gloo-storage v0.2.1 (*)
                │   │   ├── gloo-utils v0.1.3 (*)
                │   │   ├── gloo-worker v0.1.0 (*)
                │   │   ├── stylist v0.10.0 (*)
                │   │   ├── wasm-logger v0.2.0
                │   │   │   └── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
                │   │   ├── weblog v0.3.0
                │   │   │   └── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
                │   │   ├── yew v0.19.3 (*)
                │   │   └── yew-router v0.16.0 (*)
                │   ├── yew v0.19.3 (*)
                │   └── yew-router v0.16.0 (*)
                ├── serde-wasm-bindgen v0.3.1 (*)
                ├── stylist v0.10.0 (*)
                ├── stylist-core v0.10.0
                │   ├── stylist v0.10.0 (*)
                │   └── stylist-macros v0.10.0 (proc-macro) (*)
                ├── wasm-bindgen-futures v0.4.30 (*)
                ├── wasm-logger v0.2.0 (*)
                ├── web-sys v0.3.57 (*)
                ├── weblog v0.3.0 (*)
                ├── yew v0.19.3 (*)
                └── yew-router v0.16.0 (*)

log v0.4.17
├── alexzanderr-dev v0.1.0 (/home/alexzander/Alexzander__/programming/rust/alexzanderr-dev)
└── wasm-logger v0.2.0 (*)

from what you said I see no duplication there, or am I mistaken ?

is my Cargo.toml fine ? in the dependecines section.

my project runs perfect.

WorldSEnder commented 2 years ago

That looks good. Sorry for the delay.. I can definitely reproduce it now and know what I missed when staring at this: Classes has impls From<Style> and From<StyleSource> but there is no IntoPropValue<Classes>. The reason this works for elements is that those actually have special handling, using the former conversion instead of the IntoPropValue one. So my recommendation for now would be to use

#[styled_component(Demo)]
fn demo_comp() -> Html {
    html! {
        <Link<AppRoutes> classes={classes![
            css!(r#"
                    -webkit-appearance: button;
                    -moz-appearance: button;
                    appearance: button;
                    margin-top: 10px;
                    padding: 10px;
                    text-decoration: none;

                    position: absolute;

                    border-radius: 25px;
                    color: greenyellow;
                    background-color: #333;
                    font-family: monaco;
                    font-weight: bold;
                "#)
        ]} to={AppRoutes::HomeRoute}>{ "go back where you came from" }</Link<AppRoutes>>
    }
}

I might have gotten this mixed this up with #75 also when commenting about me not reproducing, sorry for that.

alexzanderr commented 2 years ago 
        <Link<AppRoutes> classes={classes![
            css!(r#"
                    -webkit-appearance: button;
                    -moz-appearance: button;
                    appearance: button;
                    margin-top: 10px;
                    padding: 10px;
                    text-decoration: none;

                    position: absolute;

                    border-radius: 25px;
                    color: greenyellow;
                    background-color: #333;
                    font-family: monaco;
                    font-weight: bold;
                "#)
        ]} to={AppRoutes::HomeRoute}>{ "go back where you came from" }</Link<AppRoutes>>

this is the solution. thanks. its working now.