RSX `style` element causes runtime error while style attribute works correctly

[sir-stevie]

Description:

When using the style element inside the rsx! macro, I encounter a JavaScript Runtime error. However, using the style attribute as a property works correctly.

Error Message:

wasm-bindgen: imported JS function that was not marked as `catch` threw an error: this.nodes[this.u32buf[(tonumeric this.u32bufp)]] is undefined
31794e2e3877eb2e
3

Stack trace:

run/assets/demo-c.js:1:12254
wbg_get_imports/imports.wbg.wbg_run_b869ac02fd3748d0/</assets/demo-c.js:5:47591
logError/assets/demo-c.js:1:22245
wbg_get_imports/imports.wbg.wbg_run_b869ac02fd3748d0/assets/demo-c.js:5:47562
demo-hash.wasm.wbg_run_b869ac02fd3748d0 externref shim/assets/demo_bg-3.wasm:wasm-function[21139]:0x5d089d
demo-hash.wasm.dioxus_interpreter_js::unified_bindings::Interpreter::flush::hcba5943280159a92/assets/demo_bg-3.wasm:wasm-function[2194]:0x32df74
demo-hash.wasm.dioxus_web::mutations::<impl dioxus_web::dom::WebsysDom>::flush_edits::h8ec79c47a98ec56e/assets/demo_bg-3.wasm:wasm-function[20148]:0x5cd61e
demo-hash.wasm.dioxus_web::launch::launch_virtual_dom::{{closure}}::h2fa00bebb753cda7/assets/demo_bg-3.wasm:wasm-function[942]:0x23253b
demo-hash.wasm.wasm_bindgen_futures::queue::Queue::new::{{closure}}::h93d11af5dd32ab5a/assets/demo_bg-3.wasm:wasm-function[3995]:0x4098b1
demo-hash.wasm.<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h97ba987db8c8ad16/assets/demo_bg-3.wasm:wasm-function[15705]:0x5b4cb4
demo-hash.wasm.closure5492 externref shim/assets/demo_bg-3.wasm:wasm-function[17584]:0x5c12a5
wbg_adapter_72/assets/demo-c.js:5:1535
real/assets/demo-c.js:4:2418
demo-c.js:1:19718
Uncaught TypeError: this.nodes[this.u32buf[(tonumeric this.u32bufp)]] is undefined
    run /assets/demo-c.js:1
    wbg_run_b869ac02fd3748d0 /assets/demo-c.js:5
    logError /assets/demo-c.js:1
    wbg_run_b869ac02fd3748d0 /assets/demo-c.js:5
    __wbg_adapter_72 /assets/demo-c.js:5
    real /assets/demo-c.js:4
demo-c.js:1:12254

Problematic code:

rsx! {
      div { id: "theme-preview-container",
        style { "{css_variables}" }
        main { id: "scoped-theme", {content} }
      }
    }

Working Alternative:

rsx! {
      div { id: "theme-preview-container", style: "{css_variables()}",
        main { id: "theme-previewer", {content} }
      }
    }

[jjvn84]

@bigg-S What is the content of "css_variables"?

[sir-stevie]

when I used the style element css_variables value was as below:

#scoped-theme { --primary: #0070f3; --primary-foreground: white; --secondary: #383838; --secondary-foreground: white; --accent: #7928CA; --accent-foreground: white; --bg-color: #fff; --foreground: #000; --card: #f9f9f9; --card-foreground: #111; --border: #eaeaea; --ring: #BBBBBB; --destructive: #ef4444; --destructive-foreground: #fff; --muted: #f3f4f6; --muted-foreground: #64748b;  --font-sans: Times New Roman; --font-heading: Helvetica, sans-serif; --font-size-base: 16px; --line-height-normal: 1.5;    --font-weight-bold: 700;   --font-weight-normal: 700;   --font-weight-semibold: 800;   --font-weight-light: 300;   --font-weight-medium: 500;  --spacing-unit: rem;   --spacing-0: 0px;   --spacing-2: 0.5rem;   --spacing-1: 0.25rem;   --spacing-16: 4rem;   --spacing-3: 0.75rem;   --spacing-5: 1.25rem;   --spacing-8: 2rem;   --spacing-4: 1rem;   --spacing-10: 2.5rem;   --spacing-6: 1.5rem;   --spacing-12: 3rem;  --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 1rem; --radius-full: 9999px;  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

but for the style attribute, I used it this way:

--primary: #0070f3; --primary-foreground: white; --secondary: #383838; --secondary-foreground: white; --accent: #7928CA; --accent-foreground: white; --bg-color: #fff; --foreground: #000; --card: #f9f9f9; --card-foreground: #111; --border: #eaeaea; --ring: #BBBBBB; --destructive: #ef4444; --destructive-foreground: #fff; --muted: #f3f4f6; --muted-foreground: #64748b;  --font-sans: Times New Roman; --font-heading: Helvetica, sans-serif; --font-size-base: 16px; --line-height-normal: 1.5;    --font-weight-bold: 700;   --font-weight-normal: 700;   --font-weight-semibold: 800;   --font-weight-light: 300;   --font-weight-medium: 500;  --spacing-unit: rem;   --spacing-0: 0px;   --spacing-2: 0.5rem;   --spacing-1: 0.25rem;   --spacing-16: 4rem;   --spacing-3: 0.75rem;   --spacing-5: 1.25rem;   --spacing-8: 2rem;   --spacing-4: 1rem;   --spacing-10: 2.5rem;   --spacing-6: 1.5rem;   --spacing-12: 3rem;  --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 1rem; --radius-full: 9999px;  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

[jjvn84]

I could not reproduce the issue. I was able to set those CSS variables using a <style> element and a style attribute. Maybe the problem is in how the content is using those variables. Is the content exactly the same in both cases?

[sir-stevie]

This is the actual structure of the code:

#[component]
pub fn ThemeEditor(props: ThemeDesignerProps) -> Element {
	
div {
  ThemePreview {
  	props
    }
  }
}

#[component]
pub fn ThemePreview(props: ThemePreviewProps) -> Element {

rsx! {
    div { id: "theme-preview-container", style: "{css_variables()}",
      main { id: "theme-previewer", {content} }
    }
  }
}

or maybe this is the wrong way to do it?

[ealmloff]

Can you share a standalone reproduction of this issue and the platform you are using (web vs fullstack)? I cannot reproduce this issue with this code:

use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let css_variables = "#scoped-theme { --primary: #0070f3; --primary-foreground: white; --secondary: #383838; --secondary-foreground: white; --accent: #7928CA; --accent-foreground: white; --bg-color: #fff; --foreground: #000; --card: #f9f9f9; --card-foreground: #111; --border: #eaeaea; --ring: #BBBBBB; --destructive: #ef4444; --destructive-foreground: #fff; --muted: #f3f4f6; --muted-foreground: #64748b;  --font-sans: Times New Roman; --font-heading: Helvetica, sans-serif; --font-size-base: 16px; --line-height-normal: 1.5;    --font-weight-bold: 700;   --font-weight-normal: 700;   --font-weight-semibold: 800;   --font-weight-light: 300;   --font-weight-medium: 500;  --spacing-unit: rem;   --spacing-0: 0px;   --spacing-2: 0.5rem;   --spacing-1: 0.25rem;   --spacing-16: 4rem;   --spacing-3: 0.75rem;   --spacing-5: 1.25rem;   --spacing-8: 2rem;   --spacing-4: 1rem;   --spacing-10: 2.5rem;   --spacing-6: 1.5rem;   --spacing-12: 3rem;  --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 1rem; --radius-full: 9999px;  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); }";
    let content = "hi there";
    rsx! {
      div { id: "theme-preview-container",
        style { "{css_variables}" }
        main { id: "scoped-theme", {content} }
      }
    }
}