Unexpected token " " space in WebStorm

Question

I just started using JetBrains WebStorm, and it is flagging all blocks of code in the following style with unexpected token errors.

.container.\32 25\25 {
    width: 100%;
    max-width: 125%;
    min-width: 100%;
}

In all cases, the unexpected token is in the same position; the space between .\32 and 25\25.

Would anybody have an idea as to why this happens? The code runs smoothly on all browsers.

Answer 1

The problem in this case seems to be with WebStorm, which flags things as errors that are not errors. The escaped format in your source sample is perfectly fine; it refers to a class named "225%". The W3C validator doesn't return errors; the browsers respond as they should; so it's just WebStorm.
See Using character escapes in markup and CSS.

In short, CSS has the ability to escape characters in a hex format, so that you can refer to a class name that begins with a "2" by writing .\32 instead of .2.
(In CSS, you can't write .2 if you mean a class, because .2 would always be interpreted as the number 0.2, no matter where it occurs. Don't ask me why.)
And the space after the .\32 is a delimiter for the escape code, that says the number ends there, so the following numbers are actual digits in the class name; up to the \25 which denotes a percent sign.

Note that you'll only need the delimiter if the following characters can be hex digits. If the next character is, for example, another \, there's no need for the space at all.

And there's the solution to your issue: if you want no space to appear in the whole class definition, you can escape all the characters in it, so the class becomes \32\32\35\25 and therefore the entire selector becomes .container.\32\32\35\25.

Hope this helps!