Unexpected unknown type selector ""

[kmthorsnes (Karl-Magnus Thorsnes)]

Hi,

When looking into the reported bugs in our code i get an error off
Unexpected unknown type selector "​"

Which I cannot understand when the code it reports of is:

@media (max-width:1400px) and (min-width:1100px) {
.header-text-longname {
        display:none;
	}
	.header-text-shortname {
		display: inline;
	}
}​

Is there something here I’m not spotting?

[gab (Gabriel Vivas)]

Hi @kmthorsnes,

It seems you have an invisible character at that position!

@media (max-width:1400px) and (min-width:1100px) {
    .header-text-longname {
        display:none;
    }
    .header-text-shortname {
        display: inline;
    }
}<0x200b>

You can enable invisible characters in your IDE to catch these more easily.

I created a ticket since I think it would be very cool if Sonar could warn about this

Best,
Gabriel

[kmthorsnes (Karl-Magnus Thorsnes)]

Thank you Gabriel,

This was very upclearing.

All the best

[gab (Gabriel Vivas)]

You’re welcome!

Any idea how that character got in there? Copy-paste? Key-combination? Something else?

Here’s the Github ticket, it shows how this can actually create a CSS bug that might be hard to find:

CSS parser error on invisible character <0x200b>

Cheers,
Gabriel

[kmthorsnes (Karl-Magnus Thorsnes)]

Thank you,

To be honest i am not really sure. From what I can see this part of the code has not been touched for 3 years - and by someone who is not working here anymore , and I cannot spot the character in github.

However, now I do see it in VSCode, which I did not before. Also not able to spot this when i look at the file in raw view in github.

tor. 19. jan. 2023 kl. 14:47 skrev Gabriel Vivas via Sonar Community <notifications@sonarcommunity.discoursemail.com>:

[gab (Gabriel Vivas)]

That’s intriguing.

In case you want to dig further, git in your terminal can display the invisible characters:

git diff --ws-error-highlight=all

If you want to check the Github raw file, you can use cat to highlight invisible characters. In macOS with cat -v, or in Linux with cat -A.

For example, you can try to show that file in the terminal using cURL:

$ curl -s https://gist.githubusercontent.com/gabriel-vivas-sonarsource/14e52ac0b109931a17bbee1b46b13fe4/raw/4d63d3fe6cdbaebe3e4a0d250e55251f7bfe2870/zero-width-space-css-bug.html | cat -v

Anyway, keep in mind that if the character is at the end of the file, there would be no actual bug. Only if you have a selector below it will be ignored by the browser.

Best,
Gabriel