Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions crates/vertigo-macro/src/html_parser/component.rs
Original file line number Diff line number Diff line change
Expand Up @@ -277,13 +277,19 @@ fn punctuated_attribute_to_tokens(
.trim_start_matches(&format!("{}:", group.to_token_stream()))
.to_string();

// If value name is 'tw' then register tailwind classes
if key == "tw"
&& let Err(err) = add_to_tailwind(possible_value.to_token_stream())
{
emit_error!(possible_value.span(), err);
return None;
};
// If value name is 'tw' and it's a string literal, register tailwind classes.
// Block expressions like div:tw={my_tw_class} hold a pre-existing TwClass whose
// classes were already registered when tw!() was called — skip bundler tracing.
if key == "tw" {
let (block, _lit) =
take_block_or_literal_expr(possible_value, COMPONENT_ATTR_FORMAT_ERROR);
if block.is_none()
&& let Err(err) = add_to_tailwind(possible_value.to_token_stream())
{
emit_error!(possible_value.span(), err);
return None;
}
}

match group {
Some(group) => {
Expand Down
1 change: 1 addition & 0 deletions crates/vertigo/src/dom/dom_element.rs
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ impl DomElement {
}
("on_submit", AttrGroupValue::OnSubmit(on_submit))
| ("form", AttrGroupValue::OnSubmit(on_submit)) => self.on_submit_rc(on_submit),
("tw", AttrGroupValue::AttrValue(value)) => self.attr("class", value),
(_, AttrGroupValue::AttrValue(value)) => self.attr(key, value),
(_, _) => {
crate::log::error!("Invalid attribute type for key {key}");
Expand Down
36 changes: 35 additions & 1 deletion crates/vertigo/src/tests/dom/component_dynamic.rs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
use crate::{
self as vertigo, AttrGroup, Computed, EmbedDom, component, css,
dev::inspect::{DomDebugFragment, log_start},
dom,
dom, tw,
};

#[test]
Expand Down Expand Up @@ -99,6 +99,40 @@ fn test_css_attrs_grouping_and_spreading() {
);
}

#[test]
fn test_tw_attrs_grouping_and_spreading() {
#[component]
fn Hello<'a>(name: &'a str, div: AttrGroup, span: AttrGroup) {
dom! {
<div {..div}>
<span {..span}>
"Hello " {name}
</span>
</div>
}
}

let red_css = tw!("px-3 bg-red-500");
let green_css = tw!("py-2 bg-green-500");

log_start();

let _el1 = dom! {
<Hello
name="world"
div:tw={red_css.clone()}
span:tw={green_css.clone()}
/>
};

let el_str = DomDebugFragment::from_log().to_pseudo_html();

assert_eq!(
el_str,
"<div class='px-3 bg-red-500' v-component='Hello'><span class='py-2 bg-green-500'>Hello world</span></div>"
);
}

#[test]
fn test_css_extending() {
use vertigo::{AttrGroup, Value, component, css, dom};
Expand Down
1 change: 1 addition & 0 deletions docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
### Fixed

* Partially fixed SVG tags rendering, for full fix trace [#539]
* `TwClass` in dynamic attribute (`dyn:tw={my_tw_class}`)

## 0.11.4 - 2026-04-18

Expand Down
Loading