Usage without selector

[MrFoxPro]

Hello. I came from Linaria and there is convinient way to write CSS-in-JS:

<div
   class={css`
      background-size: 200%;
      background-repeat: no-repeat;
      @keyframes slide {
         to {
            background-position-x: 100%;
         }
      }
      &:hover {
         animation: 15s infinite forwards slide;
         animation-timing-function: linear;
      }
   `}
/>

I see now stylers doesn't produce output if no parent selector provided:

let class_name = style! {"main",
      color: blue;
};
view! {cx,
      <div class=class_name>
         "Hello world, " {name}
      </div>
}

Is it possible to implement this in stylers? I want to make a PR, but I'm really new to Rust and don't think I can do it right.

[abishekatp]

Hi, Thanks for reporting an issue. we can do this using two approaches. First we can give some css! macro which will just accept style without any selectors and by default it will be scoped to the component inside which css! macro is defined. The other way could be we can give this feature in the style! macro itself by using some placeholder like &. Please let me know which one you are thinking about. first approach,

css!{"component",
   background-size: 200%;
   background-repeat: no-repeat;
}

Second approach will be

style!{
   &{
      background-size: 200%;
      background-repeat: no-repeat;
   }
}

Side note:

As of now we can achieve the same functionality by using parent node of all the elements as the selector. For example

#[component]
fn Hello(cx: Scope, name: &'static str) -> impl IntoView {
    let styler_class = style! {"Hello",
        div{
            color: blue;
        }
    };
    view! {cx, class = styler_class,
        <div class="one">
            <h1 id="two">"Hello"</h1>
            <h2>"World"</h2>
            <h2>{name}</h2>
            <h3>"Hello Kanna"</h3>
        </div>
    }
}

[MrFoxPro]

Thanks for the answer. I think the first option with css! is better if it can be applied directly inside the RSX macro, like this:

view! { cx, 
  <div class=css! {"component"
     color: red;
     font-family: monospace;
  }/>
}

But do you think providing name as first argument is still needed in this case?

[abishekatp]

what do you think about using style attribute? in that case we don't need any class name. For example

<h1 
style={css!{
    color:blue;
    text-align:center
}}
>
This is a header
</h1>

[MrFoxPro]

what do you think about using style attribute? in that case we don't need any class name. For example

<h1 
style={css!{
    color:blue;
    text-align:center
}}
>
This is a header
</h1>

I'm not sure. Maybe css property? style property used in frameworks for setting inline HTMLElement.style attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style