Wrong compiling for :is, :has, :where

[cyfung1031]

:is(section.is-styling, aside.is-styling, footer.is-styling) {
  a {
    color: red;
  }
}

is wrongly composed as

:is(section.is-styling a, aside.is-styling a, footer.is-styling) a{
  color: red;
}

[cyfung1031]

https://stylus-lang.com/try.html

Same result in official playground.

[cyfung1031]

Currently I am doing this way to ensure the correct compiling output.

buildL4(type, args...) {
    st1 = join('', ':', type, '(', join('\, ', args), ')')
    selector(st1)
}

[EmmanuelBeziat]

This is still an issue today, even with simpler examples:

.menu-item:is(:hover, :focus)
    color red

Should render:

.menu-item:is(:hover, :focus) { color: red; }

But render this instead:

.menu-item:is(:hover, .menu-item :focus) { color: red; }

[kyohei-23]

This problem also appears to occur when :not is used

From this I can infer that the problem is apparently occurring in pseudo-classes that accept a list of selectors in general.

[iChenLei]

Hello, everyone. I don't have enough bandwidth to fix it, so you can use @css as a workaround.

[cyfung1031]

Hello, everyone. I don't have enough bandwidth to fix it, so you can use @css as a workaround.

can use this function to avoid the problem, but I just want it to be fixed officially.

buildL4(type, args...) {
    st1 = join('', ':', type, '(', join('\, ', args), ')')
    selector(st1)
}

{buildL4('is', 'section.is-styling', 'aside.is-styling', 'footer.is-styling')} {
  a {
    color: red;
  }
}


.is-styling{buildL4('is', 'section', 'aside', 'footer')} {
  b {
    color: blue;
  }
}

It is proven working since I created this issue.

[idangoldman]

@iChenLei, can you please point me in the direction where the codebase might break on this issue? I want to try and fix it.