Problems with escaped characters

[canvasplay]

I have faced some issues related with class names with escaped characters like .color-red\@mobile or .focus\:color-red.

Please, find here are some of my findings:

/* available for autocomplete */
.color-red { color: rgba(255,0,0,1); }

/* available for autocomplete but as .color-red-1 */
.color-red-1\/4 { color: rgba(255,0,0,.25); }

/* available for autocomplete */
.color-green { color: rgba(0,255,0); }

/* not available, probably detected as duplicated of .color-green */
.color-green\@mobile { color: rgba(0,255,0); }

/* available as .color-green-2 */
.color-green-2\@mobile { color: rgba(0,255,0); }

/* available as .focus */
.focus\:color-green:focus { color: rgba(0,255,0); }

/* the following line totally breaks autocomplete for the whole file contents */
@keyframes animation-slideshow-slide-1\/3 {} 

/* but this does not */
@keyframes animation-slideshow-slide-1 {}

Maybe is as "easy" as fixing a regex ;)

I have not had time to look deeper in the code. I will try a PR if I have enough time.

Thanks :D

[canvasplay]

I spent some time with this. I submitted a PR to allow the escaped characters. I have modified the regex in the css-class-extractor.ts to allow @, / and : which is what is was needing.

Are there any other "escapable" valid characters for css selectors worth for adding? Is there any "better" regex than the "manual" approach I did?

Unfortunately I was not able solve the issue with escaped characters in the keyframes name definition like the following: @keyframes animation-slideshow-slide-1\/3 {} This single line totally breaks the autocomplete for any other rule in the css source file! :( Needs further investigation. Maybe this is a higher order issue and has nothing to do with the plugin.

Anyways, IMHO the PR adds some value to the plugin. I am pretty sure lot of developers are also using css selectors with escaped characters.

Thanks.

[dziku86]

I spent some time with this. I submitted a PR to allow the escaped characters. I have modified the regex in the css-class-extractor.ts to allow @, / and : which is what is was needing.

Are there any other "escapable" valid characters for css selectors worth for adding? Is there any "better" regex than the "manual" approach I did?

Unfortunately I was not able solve the issue with escaped characters in the keyframes name definition like the following: @keyframes animation-slideshow-slide-1\/3 {} This single line totally breaks the autocomplete for any other rule in the css source file! :( Needs further investigation. Maybe this is a higher order issue and has nothing to do with the plugin.

Anyways, IMHO the PR adds some value to the plugin. I am pretty sure lot of developers are also using css selectors with escaped characters.

Thanks.

Maybe this article will help you somehow https://mathiasbynens.be/notes/css-escapes