Proper handling of selectors containing escaped characters

[ghost]

Thanks for your work on this. I noticed it currently does not handle selectors that contain escaped characters such as : used by TailwindCSS, e.g. .focus\:bg-white.

[JPeer264]

Hey @mfarhadpur, I never saw this style of CSS. You think it is ok if .focus\:bg-white gets renamed to e.g. .a? Or must it be .a\:bg-white?

[ghost]

Thanks for the reply. Yes, that should be fine. Just the backslash is only used in the CSS, e.g. the above class is used as focus:bg-white in HTML and JS.

[JPeer264]

Alright. I'll implement it the next days.

[ghost]

Thanks!

[JPeer264]

@mfarhadpur please checkout rename-css-selectors@3.1.2. If your issue is not yet resolved, feel free to reopen this issue.

[ghost]

@JPeer264 Thanks for working on this. I think you should re-open the issue, as there are still bugs.

So, basically such a selector is defined as:

.focus\:bg-white:focus {
  background-color: #fff;
}

And used as:

<a href="#" class="focus:bg-white">Link<a>

Note that unescaped : denotes a pseudo-class in CSS and should not be removed. Right now, the class remains untouched in HTML/JS .i.e. focus:bg-white instead of being renamed to say b, and in CSS it is changed to:

.b {
  background-color: #fff;
}

While it should be:

.b:focus {
  background-color: #fff;
}

[JPeer264]

Uff. Sorry I totally missed that. I hope I can fix this soon.

[ghost]

No worries, whenever you find the time. Just to reiterate, there's also the issue of renames not being applied in HTML/JS.

[JPeer264]

Seems like I did not write enough tests for it ;) Gonna be fixed the next iteration.

[JPeer264]

@mfarhadpur I hope I finally got all the bugs fixed with version 3.1.3 🎉. So again. Feel free to reopen if I missed something, and thanks for your patience ;)

[ghost]

@JPeer264 Thanks! Everything seems to be working fine. Would you mind also updating the PostCSS plugin to use the latest core, whenever you have the time?

[JPeer264]

Done. postcss-rcs@2.0.0