add 2 rules for same property

[futurist]

I've try to add 2 rules for same property like below:

console.log(b.cursor('ns-resize').cursor('-webkit-grab').style)

But result is only last style, is this an issue?

[porsager]

It might be, but I haven't implemented the functionality since i thought most use cases were for vendor prefixes and cross browser support, which it's possible to handle dynamically without multiple identical properties, with css in js. The case you represent here might not fit that scenario though, and could be a good reason to add support for it. Would you care to describe why you'd need to do like in your example here? Thanks :)

…

On 3 Jun 2018, at 01:47, James Yang ***@***.***> wrote: I've try to add 2 rules for same property like below: console.log(b.cursor('ns-resize').cursor('-webkit-grab')) But result is only last style, is this an issue? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[futurist]

When adding style to drag & drop element, I like the -webkit-grab cursor style, but for others don't support it, I'd like to fallback to ns-resize, but cannot get it in one rule, that's why I post this issue.

[porsager]

Ah I see. That makes perfect sense. I'll look into it.

Until then you can define them in separate instances like this :

b.cursor('ns-resize') + b.cursor('-webkit-grab')

That will generate 2 classes but still achieve the desired end result.

[futurist]

About this issue, I'm also facing the flexbox problem:

.page-wrap {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  width: 20%;            /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;       /* Safari 6.1+. iOS 7.1+, BB10 */
  -ms-flex: 1;           /* IE 10 */
  flex: 1;               /* NEW, Spec - Firefox, Chrome, Opera */
}

I'm struggled to include above into bss also.

[porsager]

Thanks a lot for the examples @futurist I'll look into it today ;)

[porsager]

Hi @futurist.. So I did look into it, but got caught up in a small mind game about the last flex-box example you posted. So optimally I'd want bss to handle this behind the scenes. That means I'd want bss to simply take display: flex; and flex: 1, and then do the cross-browser support automatically. This is probably something that will take some time to do properly, and your initial use case of doing various cursors would still be present.

So — I'll be introducing support for multiple same named properties (as one expects would be possible), but I'll hold out on documenting it for now until I've thought through a proper solution for seamless cross-browser support..

I've just pushed the changes now, but I'll hold on with a new release until I've done some more testing.

Would you mind trying out how it works for you with the latest commit?

[futurist]

Yes, the lastest commit allow same property repeation, thanks!