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.

Sign up for GitHub

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

Jump to bottom

u + a selector is minified to u+a #289

Open
romainmenke opened this issue Sep 15, 2022 · 8 comments
Open

u + a selector is minified to u+a #289

romainmenke opened this issue Sep 15, 2022 · 8 comments

Comments

@romainmenke
Copy link

romainmenke commented Sep 15, 2022 •
edited 

u + a {
  color: green;
}

becomes :

u+a{color:green}

I expected lightningcss to avoid forming <urange> tokens.

https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#urange-syntax

There are likely more error cases.

Link text is #ff0000 because u+a is not a valid selector.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		u + a{color:red}

		u+a{color:green}
	</style>
</head>
<body>
	<u>Underlined</u>
	<a href="#">A link</a>
</body>
</html>
@devongovett
Copy link
Member

hmm interesting case. I think this is correct though. It looks like a bug in Chrome. In both Firefox and Safari, the link is green.

<urange> is not a token type. It is composed of other tokens (ident, number, etc.). Therefore, unless explicitly called for in a property or value grammar, <urange> should not be parsed.

@romainmenke
Copy link
Author

ha, I was just think that I should check more than just Chrome.

Could it be that Safari and Firefox are lagging behind?
I think this might have been added to the spec in the 2019 version : https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#changes-CR-20140220

@romainmenke
Copy link
Author

https://wpt.fyi/results/css/css-syntax/urange-parsing.html?label=master&label=experimental&aligned&view=subtest&q=urange

https://github.com/web-platform-tests/wpt/blob/09b8d2f86a/css/css-syntax/urange-parsing.html

If I read those tests correctly the parser/tokenizer should only form <urange> in certain contexts.

  • Chrome is incorrectly parsing u+a {}.
  • Safari and Firefox are correct.

@devongovett
Copy link
Member

If so seems like the other way? That was removing a token. Chrome seems to still be treating it as one. Or maybe it's not related to urange at all, just another bug.

I'd file a bug report and see what they say. You could also look in the web platform tests, or ask the CSS workiNg group.

@romainmenke
Copy link
Author

Given the WPT tests I think it might make sense for lightningcss to avoid minifying as u+a but only to work around the Chrome bug. Not because it is actually invalid.

@romainmenke
Copy link
Author

There is also already a chromium bug related to those WPT tests : https://bugs.chromium.org/p/chromium/issues/detail?id=1215071&q=urange%20css&can=2

Leaving it up to you to ignore this issue or maybe apply a patch.
I don't have any real world bug that requires fixing.

@devongovett
Copy link
Member

Thanks for digging those up. I'll look into doing a workaround.

@romainmenke romainmenke mentioned this issue Sep 15, 2022
Open
@alexander-akait
Copy link

alexander-akait commented Sep 15, 2022 •
edited

I agree with @devongovett, sounds like a bug in chrome because #289 (comment), also the same issue was in firefox bug tracker and it was marked as a bug and fixed

UPDATED: cssnano/cssnano#1433 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@devongovett @alexander-akait @romainmenke