From b80f9e3871e6cdd34b38652347a3e07477866ff2 Mon Sep 17 00:00:00 2001 From: Greg Johnston Date: Fri, 21 Apr 2023 12:42:35 -0400 Subject: [PATCH] fix: issue with ordering of `class` attribute and `class=("fancy-name-200", true)` (closes #907) (#914) --- leptos_dom/src/html.rs | 9 +++++++++ leptos_macro/src/view.rs | 9 +++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/leptos_dom/src/html.rs b/leptos_dom/src/html.rs index 4405d8d5a..6b77a7eec 100644 --- a/leptos_dom/src/html.rs +++ b/leptos_dom/src/html.rs @@ -658,6 +658,15 @@ impl HtmlElement { } /// Adds a class to an element. + /// + /// **Note**: In the builder syntax, this will be overwritten by the `class` + /// attribute if you use `.attr("class", /* */)`. In the `view` macro, they + /// are automatically re-ordered so that this over-writing does not happen. + /// + /// # Panics + /// This directly uses the browser’s `classList` API, which means it will throw + /// a runtime error if you pass more than a single class name. If you want to + /// pass more than one class name at a time, you can use [HtmlElement::classes]. #[track_caller] pub fn class( self, diff --git a/leptos_macro/src/view.rs b/leptos_macro/src/view.rs index 242aa9de3..7f46ea774 100644 --- a/leptos_macro/src/view.rs +++ b/leptos_macro/src/view.rs @@ -842,7 +842,8 @@ fn element_to_tokens( }; let attrs = node.attributes.iter().filter_map(|node| { if let Node::Attribute(node) = node { - if node.key.to_string().trim().starts_with("class:") { + let name = node.key.to_string(); + if name.trim().starts_with("class:") || fancy_class_name(&name, cx, node).is_some() { None } else { Some(attribute_to_tokens(cx, node, global_class)) @@ -853,7 +854,11 @@ fn element_to_tokens( }); let class_attrs = node.attributes.iter().filter_map(|node| { if let Node::Attribute(node) = node { - if node.key.to_string().trim().starts_with("class:") { + let name = node.key.to_string(); + if let Some((fancy, _, _)) = fancy_class_name(&name, cx, node) { + Some(fancy) + } + else if name.trim().starts_with("class:") { Some(attribute_to_tokens(cx, node, global_class)) } else { None