Repository navigation
Merging is broken for :where selectors #454
Description
: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?
Activity
lahmatiy commentedon May 9, 2022
@ygoe Which version of CSSO do you use? CSSO recognises
:where()selector and calculates its specificity right starting5.0.ygoe commentedon May 9, 2022
Oh, I see, I have version 4.2.0. Need to update that again.
ygoe commentedon May 12, 2022
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 andcsso --versionkeeps printing 4.2.0. Something is broken here. If I install the package csso, it has the version 5.0.3 butcsso --versiondoesn't change at all.ygoe commentedon Jun 11, 2022
Any idea how I should follow your suggestion? It seems impossible with npm. Or there's a packaging bug in csso.
ygoe commentedon Jun 17, 2022
@lahmatiy Looks like the version you suggested is not available. See css/csso-cli#25
ygoe commentedon Nov 13, 2022
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.