Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merging is broken for :where selectors #454

Open
ygoe opened this issue May 8, 2022 · 6 comments
Open

Merging is broken for :where selectors #454

ygoe opened this issue May 8, 2022 · 6 comments
Labels

Comments

@ygoe
Copy link

ygoe commented May 8, 2022

: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
Copy link
Member

lahmatiy commented May 9, 2022

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

@ygoe
Copy link
Author

ygoe commented May 9, 2022

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

@ygoe
Copy link
Author

ygoe commented 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 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
Copy link
Author

ygoe commented 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
Copy link
Author

ygoe commented Jun 17, 2022

@lahmatiy Looks like the version you suggested is not available. See css/csso-cli#25

@lahmatiy lahmatiy added the cli label Jul 14, 2022
@ygoe
Copy link
Author

ygoe commented 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants