How are tags with dash (-) treated?

[ivanceras]

For example <color-profile> is a valid svg tag.

[chinedufn]

Ah good catch.

So right now we parse tags names here

percy/crates/html-macro/src/tag.rs

Line 107 in 344e757

let name: Ident = input.parse()?;

The problem is that we parse a single identifier, yet in this case there are three identifiers. color - and profile.

---

So what we'd want to do in that code above is peek at the next token and see if it's a -.

An example of peeking for punctuation:

percy/crates/html-macro/src/tag.rs

Line 159 in 344e757

let peek_end_of_tag = input.peek(Token![>]);

---

If it is a - we'd want to input.parse() two identifiers. Then call .to_string() on the two identifiers that we parsed and add them to the name string that I linked to above.

---

We'd want a test case here

https://github.com/chinedufn/percy/blob/e4d86f3b5f6596f38bbaef5ba942760be48b9ce4/crates/html-macro-test/src/lib.rs#L216-L215

that maybe looked something like

#[test]
fn hyphenated_tag_name () {
let expected = VirtualNode::new("color-profile");

HtmlMacroTest {
        desc: "Hyphenated tag names work",
        generated: html! { <color-profile></color-profile> },
        expected,
    }
    .test();
}

The html macro tests are run using

cargo test -p html-macro-test

---

If you're up for it I'd be happy to answer any questions about how to do this if any of the above isn't too clear!

Otherwise I can take a look at this next time I'm working on the macro.