leptos generated CSS is wrong

[beckend]

The ids differs and so the CSS never applies.

cargo.toml

[package]
name = 'this-app'
version = '0.1.0'
edition = '2021'

[lib]
crate-type = ['cdylib', 'rlib']

[dependencies]
anyhow = '1.0.75'
axum = { version = '0.6.4', features = ['headers', 'http2'], optional = true }
blake3 = { version = "1.4.1", optional = true }
cfg-if = '1'
console_error_panic_hook = '0.1'
console_log = '1'
http = '0.2.8'
leptos = { version = '0.5.0-beta', features = ['nightly'] }
leptos_axum = { version = '0.5.0-beta', optional = true }
leptos_i18n = { path = './.internals/deps/VCS/leptos_i18n/leptos_i18n' }
leptos_meta = { version = '0.5.0-beta', features = ['nightly'] }
leptos_router = { version = '0.5.0-beta', features = ['nightly'] }
log = '0.4'
moka = { version = "0.11.3", features = ["future"], optional = true }
once_cell = "1.18.0"
serde = { version = '1.0.183', features = ['derive'] }
serde_json = "1.0.105"
simple_logger = '4'
thiserror = "1.0.38"
time = { version = '0.3.25', features = ['wasm-bindgen'] }
tokio = { version = '1.25.0', optional = true }
tower = { version = '0.4.13', optional = true }
tower-http = { version = '0.4', features = ['fs'], optional = true }
tracing = { version = '0.1.37', features = ['async-await', 'log'] }
tracing-subscriber = { version = "0.3.17", features = ["time", "local-time"] }
tracing-subscriber-wasm = { version = '0.1.0', optional = true }
turf = { version = "0.6.1", features = ["once_cell"] }
url = { version = "2.4.0", optional = true }
uuid = { version = "1.4.1", features = [
  "fast-rng",
  "v4",
  "macro-diagnostics",
  "wasm-bindgen",
] }
validator = { version = "0.16.1", features = [
  "derive",
  "phone",
  "phonenumber",
] }
wasm-bindgen = '=0.2.87'

[features]
hydrate = [
  'leptos/hydrate',
  'leptos_meta/hydrate',
  'leptos_router/hydrate',
  'dep:tracing-subscriber-wasm',
]
ssr = [
  'dep:axum',
  'dep:blake3',
  'dep:moka',
  'dep:tokio',
  'dep:tower',
  'dep:tower-http',
  'dep:leptos_axum',
  'dep:url',
  'leptos/ssr',
  'leptos_meta/ssr',
  'leptos_router/ssr',
]
all = ['ssr', 'hydrate']

turf::style_sheet!("src/components/portal.scss");

.opening {
  transition: all 1s;
}

.closing {
  transition: all 1s;
}

.background {
  width: 100%;
  height: 100%;
  position: relative;
}

.content {
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  border: 2px solid red;
  border-radius: 5px;
  z-index: 10;
}

[beckend]

here is portal.rs

use crate::globals::StatePortalMain;
use leptos::*;
use std::{cell::RefCell, fmt::Debug, sync::Arc, time::Duration};

turf::style_sheet!("src/components/portal.scss");

#[derive(Clone)]
struct StateLocal {
  pub children: Arc<RefCell<Option<ChildrenFnMut>>>,
}

#[component]
pub fn ComponentModal() -> impl IntoView {
  let (state_local, state_local_set) = create_signal(StateLocal {
    children: Arc::new(RefCell::new(None::<ChildrenFnMut>)),
  });
  let state_signal = expect_context::<RwSignal<StatePortalMain>>();

  create_effect(move |_| {
    let state = state_signal.get();
    let state_component = state.component.get();
    let component_new_read = state_component.borrow();
    let component_new_exists = component_new_read.is_some();
    drop(component_new_read);

    // always use the new one, removing the old
    if component_new_exists {
      state.is_rendered.update(|x| {
        *x = true;

        state_local_set.update(|value| {
          *value.children.borrow_mut() = state_component.take();
        });
      });
    }
  });

  let fn_get_should_show = move || state_signal.get().is_rendered;

  view! {
    <style>{STYLE_SHEET}</style>

    {move || {
        view! {
          <AnimatedShow
            when=fn_get_should_show()
            show_class="this--modal--main this--modal--main--opening"
            hide_class="this--modal--main this--modal--main--closing"
            hide_delay=Duration::from_millis(1000)
          >
            {move || {
                let cell = state_local.get();
                let mut lock = cell.children.borrow_mut();
                if let Some(children) = lock.as_mut() {
                    return Some(
                        view! {
                          <aside class=ClassName::BACKGROUND>
                            <div class=ClassName::CONTENT>{children()}</div>
                          </aside>
                        },
                    );
                }
                None::<HtmlElement<leptos::html::Aside>>
            }}

          </AnimatedShow>
        }
    }}
  }
}

#[derive(Debug)]
pub struct APIModal {}

impl APIModal {
  pub fn get_context() -> RwSignal<StatePortalMain> {
    expect_context::<RwSignal<StatePortalMain>>()
  }

  pub fn open(signal: RwSignal<StatePortalMain>, frag: Fragment) {
    let state = signal.get();

    state.component.update(move |x| {
      x.replace_with(move |_| Some(Box::new(move || frag.to_owned())));
    });
  }

  pub fn close(signal: RwSignal<StatePortalMain>) {
    signal.get().is_rendered.update(|x| *x = false);
  }
}

[myFavShrimp]

I am not able to reproduce this. The provided code can't compile because it depends on declarations from your project. I have tried to reproduce a similar use case but have not encountered any problems.

To help me understand the problem can you please create a minimal reproducible example? In addition, could you please check what class names turf generates? You can make turf print the generated class names by adding the following code to your projects Cargo.toml:

[package.metadata.turf]
debug = true

You will need to trigger recompilation though, as the syle_sheet! macro only gets executed during compilation and not when running a cached build.

[beckend]

Ok thanks. I have paused my rust project for now.