Failed to parse css when using "at rules"

radu781 commented 1 year ago

I am trying to use @keyframes and @-webkit-keyframes (https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) in a css file to create a spinning image effect but I get this runtime error:

Failed to Parse CSS, due to:
0: at line 112, in Many0:
@-webkit-keyframes rotating {
^

component.rs code:

use stylist::Style;
const STYLE_FILE: &str = include_str!("../../styles/component.css");
/* ... */
fn view(&self, ctx: &Context<Self>) -> Html {
    /* ... */
    let style_sheet = Style::new(STYLE_FILE).unwrap();
    html! {
    <div class={style_sheet}>
    /* ... */ 
}

component.css code:

@-webkit-keyframes rotating {
    to {
        /* ... */
        transform: rotate(0deg);
    }
    from {
        /* ... */
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    to {
        /* ... */
        transform: rotate(0deg);
    }
    from {
        /* ... */
        transform: rotate(360deg);
    }
}

.spinner {
    /* ... */
    animation: rotating 2s linear infinite;
}

Is there a way I can workaround this issue or is this going to be fixed in the future?

futursolo commented 1 year ago

There is some special handling in the parser with the @keyframes at rule. However, the same is not applied for @-webkit-keyframes.

I think since Safari 9 (the latest version is 16), vendor prefix on keyframes is no longer needed. If you remove the vendor prefix, it should work.

Safari 8 has no web assembly support, so stylist wouldn't work anyways. So I do not intend to make an immediate fix for this at the moment. (I will in the future when I have a chance to work on it.)

If you wish to submit a pull request to fix this, I would be happy to accept it.

https://caniuse.com/?search=keyframes

radu781 commented 1 year ago

Removing the @-webkit-keyframes rotating selector seemed to do the trick. Thanks for the links.

futursolo / stylist-rs

Failed to parse css when using "at rules" #116