Repository navigation
Problems with escaped characters #288
Description
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
Activity
canvasplay commentedon Dec 26, 2020
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.tsto 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 commentedon Apr 7, 2021
Maybe this article will help you somehow https://mathiasbynens.be/notes/css-escapes