Repeated class names not rendered correctly

[StanLindsey]

meteor/meteor#5632

Original Post

Using Semantic-UI sometimes you need to add the same class name twice, i.e.

but this is translated into

<div class="ui two column computer one mobile grid container">

breaking the interface.
This is because of DiffingAttributeHandler call this.parseValuewhich reduces the repeated element into one since the element is the key in the array where values are stored

`parseValue: function (attrString) {
var tokens = {};

_.each(attrString.split(' '), function(token) {
  if (token)
    tokens[token] = token;
});
return tokens;

}`

Here is the repo to reproduce the error with step by step guide: https://github.com/bitIO/repeated-class-issue

---

The outcome was of a pull request that appears to fix the issue but lacked tests, comments and was not readable.
meteor/meteor#5753

[mitar]

Can you explain why repeating classes is important?

[mitar]

Do you have an idea how this could be optional behavior?

[StanLindsey]

I'm just moving issues over as per #25. Not by priority but from top to bottom to slowly move them over. Maybe we could get some priority labels as well as this one in particular isn't a high priority.

The Semantic-UI Framework sometimes needs repeated classes, which Meteor merges to one instance in the HTML which breaks the UI. Though this is an edge case of CSS use, there may be users who rely on this or other frameworks that adopt this pattern.

Does it need to be optional? Is there a case where duplicate classes are bad and need to be stripped?

[mitar]

Does it need to be optional? Is there a case where duplicate classes are bad and need to be stripped?

I would say esthetics. :-)

[mitar]

And thanks for copying the issue over. I labeled it as low priority.

[ghost]

@StanLindsey Is this issue supposed to break every time when using the same class twice on the same html tag ? I'm asking because i've just used the ui middle aligned center aligned grid on a new app, which use the latest SUI package from atmosphere and Meteor v.1.3.2.4, and it's working, both aligned are shown, and SUI works as expected...

[StanLindsey]

Well, if nobody can replicate it then I guess we have our first closed ticket.

My issue now is we will need to close the meteor/meteor ticket to make things easier for us to move forward with the rest of the issues.

[ghost]

Actually, i've been able to reproduce the problem. Not sure of what's happening. Here's how i'm getting the problem :

If i have a template with ui two column computer one column mobile grid container, without another template loading inside of it, then no problem, the two column are there. But if i load a template inside it (like you're repo is doing) then i loose the column on the first template, but the second template is fine, even if i have another two column in it, and as long as i don't load a third template in the second, in which case the column are reduced to one on the second template too...

Is it what you've found ?

[laosb]

So that might be the exact symptom.

[talha-asad]

I am the author of the PR and would be willing to help if the need be, though I think I tried to explain what my one-liner does hehe.

Basically the problem appears whenever Blaze updates a template. So you can see it pretty easily with Dynamic templates.

[markudevelop]

+1 i have this issue with blaze this is why I'm switching slowly to react, but I'm not happy about it some stuff are easier with react but other are harder.

[cluxter]

I don't understand why this issue was labeled as "low priority". It's not at all since this bug is actually breaking a functionality.

I confirm what @shadowRR described, this is how I got the issue too.

[mitar]

Please see discussion in this pull request. Blaze is behaving based on 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.)

(Emphasis mine.)

And Meteor is ignoring duplicates per spec.

[StanLindsey]

I guess this can be closed now as technically its an issue with Semantic-UIs use of class names and not Blaze.

[mitar]

As a consequence of fixing #141 order inside inline style and class attributes is now preserved. Duplicate values are still not supported.