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.