Yew: Can not use spaces in class names when using List/Vec

[liquidblock]

Problem
When using a List (a tuple within the html! macro) or a Vec of classes and one item contains spaces e.g.

html! {
    <div class=("hello", "hello world")>{ "Example" }</div>
}

• and using yew from master the resulting class string is "hello hello world".
• and using yew version 0.11.0 the application crashes (not due to a panic)
  
  
  
  • this is very similar to #121, which was fixed by #289
  
  
  • #927 fixes the crash, but the results are non-unique class names and i guess that vtag.classes.contains("world") will return false.
  
  

Steps To Reproduce

1. Include the above code within a components view function.
2. Inspect the class string or read the console of the used web browser.

Expected behavior
I expected unique class names: "hello world" or the support of non-unique class names when specifying the classes as string.

Screenshots
master (as of commit 1ede16795a8f08975708e1808c0d528f31d5c946)

Version 0.11.0

(Note that Example is not rendered)

Environment:

• Yew version v0.11.0, master as of commit 1ede16795a8f08975708e1808c0d528f31d5c946
• Rust version 1.41.0 (5e1a79984 2020-01-27)
• stdweb / web-sys version [e.g. web-sys v0.3.33]
• OS: Windows 10, Ubuntu 16.04.6 LTS running on WSL
• Browser Firefox
• Browser version 72.0.2 (64-bit)

Questionnaire

• [ ] I'm interested in fixing this myself but don't know where to start
• [x] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later

Suggestions
I have a solution in mind for both of my expected behaviors, but i am not sure if either of them is a desired one.
Should i open another issue to suggest some kind of feature to support non-unique class names?
Non-unique class names can be desired if e.g. Semantic UI is used, which is also one reason why the ordering of classes is supported in yew: https://github.com/yewstack/yew/issues/393.
I suggest to also add documentation for the expected behavior to

• https://yew.rs/docs/concepts/html/elements#classes
• https://github.com/yewstack/yew/blob/1ede16795a8f08975708e1808c0d528f31d5c946/src/virtual_dom/mod.rs#L59
• https://github.com/yewstack/yew/blob/1ede16795a8f08975708e1808c0d528f31d5c946/src/virtual_dom/vtag.rs#L125

[jstarry]

@liquidblock by non-unique class names do you mean that class names can be repeated?

[liquidblock]

@liquidblock by non-unique class names do you mean that class names can be repeated?

Yes

[jstarry]

Should i open another issue to suggest some kind of feature to support non-unique class names?

I'm in favour of non-unique class names if it's needed for using Semantic-UI. So in that case, we could probably just change this issue to reflect supporting that feature. Thoughts?

[liquidblock]

Semantic-UI has an closed issue, where they discussed the usage of repeating class names: https://github.com/Semantic-Org/Semantic-UI/issues/1526
An example class string would be:

"sixteen wide mobile eight wide tablet four wide computer column"

There are some arguments about the HTML5 spec:

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

As far as i am aware of, this is the reason, that https://github.com/meteor/blaze does not support repeating class names, but there is a library for meteor supporting Semantic-UI: https://github.com/Semantic-Org/Semantic-UI-Meteor
The above quote from the spec is outdated, as far as i know.

Below are some current quotes from the spec:

https://html.spec.whatwg.org/multipage/dom.html#classes

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

Which itself links to https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#set-of-space-separated-tokens:

A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more ASCII whitespace, where words consist of any string of one or more characters, none of which are ASCII whitespace.
[...]
An unordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated.
An ordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated but where the order of the tokens is meaningful.
[...]

Some things i noticed:

• The HTML spec says that the class attribute is a set of space-separated tokens, but it does not specify neither an unordered set of unique space-separated tokens nor an ordered set of unique space-separated tokens
• The classList attribute is defined as a set, which has a different definition:

Some lists are designated as ordered sets. An ordered set is a list with the additional semantic that it must not contain the same item twice.

https://dom.spec.whatwg.org/#dom-element-classlist.

• But the className attribute is defined as must reflect the "class" content attribute.

The classList does not support for repeated class names, but i am not so sure about className or the class HTML attribute.
Maybe someone can elaborate on the definition of the spec regarding unique class names?

Regardless of the spec requiring unique names or not, i would like to suggest at least the optional usage of repeated class names.
E.g. in the case of the spec requiring unique names the cargo features feature could be used for conditional compilation options.

[jstarry]

@ADustyOldMuffin you could try this issue as well. It requires less knowledge of how Yew works internally

[bryanjswift]

I'll be honest, I did not understand the outcome of the comments about the using multiple class names. The implementation proposed in #1084 continues using the IndexSet in the current Classes struct which enforces unique class names.

[jstarry]

@bryanjswift that's fine, this issue was about spaces in class names. We can create a new issue for non-unique classnames if it's really needed