Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Problems with escaped characters #288

Open
canvasplay opened this issue Dec 26, 2020 · 2 comments · May be fixed by #289
Open

Problems with escaped characters #288

canvasplay opened this issue Dec 26, 2020 · 2 comments · May be fixed by #289
Labels
bug

Comments

@canvasplay
Copy link

canvasplay commented Dec 26, 2020 •
edited
Loading

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 canvasplay linked a pull request Dec 26, 2020 that will close this issue
Open
@canvasplay
Copy link
Author

canvasplay commented Dec 26, 2020 •
edited
Loading

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.

@zignd zignd added the bug label Mar 4, 2021
@dziku86
Copy link

dziku86 commented Apr 7, 2021

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow escaped characters in css selectors canvasplay/HTML-CSS-Class-Completion
3 participants
@zignd @canvasplay @dziku86