Merging is broken for :where selectors

[ygoe]

:where() selectors have zero specificity so their order is the only thing that matters. csso will merge multiple selectors into a single comma-separated selector if they have the same content. But then, it will also change their order and it renders differently in browsers.

Example SASS:

:where(a)
{
    &:where(:link)
    {
        text-decoration: underline;
        :where(.stop) &
        {
            text-decoration: revert;
        }

        &:where(:hover, :focus)
        {
            text-decoration: none;
            :where(.stop) &
            {
                text-decoration: revert;
            }
        }
    }
}

Compiled to CSS:

:where(a):where(:link) {
  text-decoration: underline;
}
:where(.stop) :where(a):where(:link) {
  text-decoration: revert;
}
:where(a):where(:link):where(:hover, :focus) {
  text-decoration: none;
}
:where(.stop) :where(a):where(:link):where(:hover, :focus) {
  text-decoration: revert;
}

Result after csso: (inserted line breaks for readability)

:where(a):where(:link){text-decoration:underline}
:where(.stop) :where(a):where(:link),:where(.stop) :where(a):where(:link):where(:hover, :focus){text-decoration:revert}
:where(a):where(:link):where(:hover, :focus){text-decoration:none}

If anything, the second line needs to come last (merge to last occurrence, not to first). But then again, it's still a different order than declared in the source.

Similar to #301?

[lahmatiy]

@ygoe Which version of CSSO do you use? CSSO recognises :where() selector and calculates its specificity right starting 5.0.

[ygoe]

Oh, I see, I have version 4.2.0. Need to update that again.

[ygoe]

Okay, how can I update this? It doesn't do with npm update -g (all other tools are updated but not csso). The package csso-cli stays at 3.0.0 and csso --version keeps printing 4.2.0. Something is broken here. If I install the package csso, it has the version 5.0.3 but csso --version doesn't change at all.

[ygoe]

Any idea how I should follow your suggestion? It seems impossible with npm. Or there's a packaging bug in csso.

[ygoe]

@lahmatiy Looks like the version you suggested is not available. See https://github.com/css/csso-cli/issues/25

[ygoe]

It looks like :where() and :is() are now completely unmodified with csso 5.0.4. No minifying is happening at all, multiline selectors are kept as-is and not pulled together into a single line without whitespace like all other selectors.