Svelte 5 can't seem to handle certain valid CSS syntax

[jamesxliu]

Describe the bug

Seems like the compiler chokes on CSS selectors that have unusual but perfectly valid syntax?

Specifically selectors that start with hyphens, like .--foo { ... }

Seems like something that should be fixed?

Reproduction

https://svelte.dev/playground/06094d830e0d432f95098170db35c2ca?version=5.20.2

Logs

System Info

Not relevant, can be reproduced in Svelte REPL

Severity

annoyance

[gterras]

As far as validators are concerned .--foo { ... } isn't a valid selector, you need to escape the hypens .\-\-foo { ... } working in playground.

[jamesxliu]

Are you answering on behalf of maintainers?

[gterras]

No I'm just repeating what the W3C says.

[baseballyama]

However, when testing this simple case with HTML and CSS, it works. Therefore, shouldn’t the Svelte compiler be able to handle it as well?

https://codepen.io/baseballyama/pen/mydEZBZ

[jamesxliu]

No I'm just repeating what the W3C says.

Would you mind clarifying which part of their spec you are referring to?

The only mention I could find about double hyphens being problematic was in an old CSS2 spec, and seems to be contradicted by more recent CSS3 spec railroad diagrams?

This feels like something to engage the maintainers in discussion with, rather than something to try to shut down with snark, no?

[gterras]

try to shut down with snark

You may feel that way I was just answering your question. Don't shoot the messenger.

Would you mind clarifying which part of their spec you are referring to?

As written I'm just referring to validators, the W3C CSS validator or any other I tried for the matter. Submit .--foo { ... } and you will get a validation error.

I'm not shutting down the idea just nitpicking about what you call "perfectly valid".

[paoloricciuti]

I went to fix this and found this link in a comment

https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F"

Also this is specifically checked for in the code

svelte/packages/svelte/src/compiler/phases/1-parse/read/style.js

Lines 568 to 579 in bbeeed4

	/**
	* https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
	* @param {Parser} parser
	*/
	function read_identifier(parser) {
	const start = parser.index;
	let identifier = '';
	if (parser.match('--') || parser.match_regex(REGEX_LEADING_HYPHEN_OR_DIGIT)) {
	e.css_expected_identifier(start);
	}

So i would be inclined to leave it as is.

[paoloricciuti]

Ok let's close this since by spec is not supported...thanks for reporting!

[jamesxliu]

I went to fix this and found this link in a comment

I saw that. This is what I meant by my earlier comment of:

The only mention I could find about double hyphens being problematic was in an old CSS2 spec

However, newer CSS3 spec docs seem to contradict this: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

Per this doc, -- is a valid prefix for identifier tokens.

The doc for CSS3 even calls out:

Replaces CSS2§4.1, CSS2§4.2, CSS2§4.4, and CSS2§G, redefining how CSS is parsed.

And your excerpt is from CSS2§4.1.3, which falls under CSS2§4.1.

So I don't think it's quite as clear cut as claiming it's not supported by the spec, since there's more than 1 version of the spec, and the conflict in question is with an older version that seems to be contradicted by its intended successor.

[Rich-Harris]

good catch, reopening