Is this possible to obfuscate "hover:" class name or something like that from TailwindCSS? I also have some question and feature request

[hoangnhan2ka3]

First of all, I really appreciate your efforts on this project ✨, thank you @soranoo and all Sponsors !

This is almost what I needed, really easy to use, really full features and highly customizable.
Besides, it also helps my code look mysterious 😈 and professional.

I want to make some contributions to make this project even more perfect, to be widely known and to be a perfect replacement for a certain "no longer maintained package" named Post*** 😄.

My specs:

OS: Windows 11
IDE: VS Code v1.85.2
Nextjs 14.1
Frontend cloud: Vercel
Using: next-css-obfuscator v2.0.6

👉 1. Also obfuscate something like "hover:" in TailwindCSS class:

There are things that are really easy to confuse like *:hover in normal CSS and hover:* in TailwindCSS class, both have hover and :.

In my test project, I have ONLY one class end with "...text-yellow-300" (I mean there is no other class named "yellow") like this:

And when npm run build, in css-obfuscator/conversion.json file:

(I also delete .next/cache folder and old css-obfuscator folder, which contain conversion.json before running this build command).

Result:

In expected:

".hover\\:text-yellow-300": ".kj33u9",

// or at least

".hover\\:text-yellow-300": ".hover\\:kj33u9",

But no. So... I don't know what is the :hover suffix (which is the main problem) when detecting that class name 🥲. And why it detect another alone class ".text-yellow-300" which doesn't exist.

Actually, I found a temporary solution when editing your utils.js file in the node_modules folder, I will talk about this problem in part 2.

👉 2. The problem of selectorClasses.length > 1:

I think part of the problem lies in this line of utils.js:

next-css-obfuscator/src/utils.ts

Line 801 in 480fbb1

if (selectorClasses.length > 1) {

When I edit it to selectorClasses.length >= 1, this is the result:

"Nears". But of course this does not work ⛔ too because of wrong class detected with :hover suffix.

Doesn't stop there, this edit also affects "single character" then "-[${custom parameter}]"
eg: z-[9999], min-h-[80rem], etc. (almost all)

With selectorClasses.length > 1:

With selectorClasses.length >= 1:

Almost every TW custom parameter class except hover: works perfectly (for me) with selectorClasses.length >= 1. And I run dev, run build + run start or deploy to Vercel with no error (I haven't tried all the TW classes and don't know if there are any special cases or exceptions, but this works for me for now)

🫶 If possible, please update an option for this selectorClassesLength as a temporary solution for custom parameter TW class.

👉 3. Truth about select direct child "*:":

If u know u know:

Even though this *: class exists in the parent div, it really only has an effect on the children div.

I'm really not sure what will happen if we successfully obfuscate this *: class ⁉️

I think it's possible but quite difficult to do hmmm...

The script is to just obfuscate the .\\*\\:font-extrabold part and I think

.jzn6lz > * {
    font-weight: 800;
}

will do the rest.

Okay and... the remain problem of *: is same same as hover:

It is true that it must be .\\*\\:font-extrabold > * to work but we don't need to detect the > * part but .\\*\\:font-extrabold right?

At last I do think that fix the hover: problem is much possible than *: haha 😄.

👉 4. Feature request:

You know 👉👈... I think this feature is not useless but it's really not as useful as doing the opposite. I mean the tag with marker class will not be obfuscated, it is more valuable to use than having to add a marker to each tag you want to obfuscate, but yes, don't delete the current option because it is usable in some cases. Is it possible?

And once again I really thank you and everyone who has contributed and built this project, please continue to develop it further 🥳.

[hoangnhan2ka3]

Oh, I forgot, I was very surprised that when using selectorClasses.length >= 1, the class .animate-\\[pulse-404_3s_linear_infinite\\] becomes a super concise class like .w2zhoa but still used okay haha, that's the unexpected effect of this package.

Edited:
Hmmm... I am wrong. I wonder why it didn't delete the old TW class because now it's useless huh 🥲.

Now I know why you said in Warning "As a trade-off, the obfuscation will make your CSS files larger"

Maybe it's still not optimized as well as I thought 🤡.

[soranoo]

What a fantastic issue format! I really appreciate your enthusiasm and contribution to this package.

1. Regarding the issues, I will investigate them ASAP.
2. Regarding the opposite of obfuscate marker, I don't think it is a good idea to implement it right now. There is serious issue (see the 🐛 Known Issues) with the current obfuscate marker feature and I don't think I can solve it shortly. The bigger obstacle at this moment is the way to track functions being called within a component so that we can obstacles its children's component. I tried to parse the JS and have some proof of concepts but I don't think I have enough knowledge handling this. If you are familiar with it please, please give me some hints.

[soranoo]

Plus, if you have a test project for this, would you mind to share with me?

[hoangnhan2ka3]

Thank you for reply!

1. Actually, I've been intending to obfuscate this TW class for a long time. I only see facebook.com and blueagle.top available. like this, but it seems that the two still cannot agree on the number of characters in the obfuscated class, which is still not perfect (unlike your package 💕).

2. Yeah you're right, the issue of opposite markers is probably not the highest priority right now. If feasible, can you address the fixable issues first? I mean the selectorClasses.length >= 1 problem.

3. Regarding testing project, I will comment here ASAP when I finish preparing. (Again, sorry that's as far as I can help right now).
   This is my test domain, you can check out. Try the 404 page with mouse wheel scroll 😄.

4. I actually have more than one feature request 😄

• Like being able to identify and replace the class .big in const bigElement = document.querySelector(".big")
• A feature to delete the old TW class because really after If there is a new obfuscated class, the old class is no longer needed, and if it exists, it will really increase the weight of the css file. It might be really difficult but try reversing the way you detect the classes before obfuscating and saving, then after everything is done, delete it.
  
  (I'm not sure if after running this package, new classes are created. Did it release at once and then add it with TW's css file? Or the obfuscate process is done "in parallel" with TW's css file export process, because I see each new obfuscated class coming next to a class with similar functionality but of TW. Rather than the entire new obfuscated class being located at the bottom of the css file or separated into another file).

If you can really do this, this will be a huge boom for your package.

#waitingforamiracle

[soranoo]

Yes, fixing the bugs is my top priority right now.

Regarding the feature request,

1. So you would like to replace a specific class with a class you want?
2. Maybe I should add an option to del all TW classes if they have an obfuscated version (for full obfuscation). The reason I keep the TW classes is to prevent breaking the site when some obfuscation fails.

[hoangnhan2ka3]

Yeah if you can actually delete exactly the OBFUSCATED TW classes then maybe there won't be any problem 🫡, otherwise you can try making a beta version of the package for example.

But I think you can fix the other problems first and then remove the old TW class problem for the end.

[soranoo]

@hoangnhan2ka3 The beta version is ready!

npm run next-css-obfuscator@beta

Looking forward to your feedback~

[hoangnhan2ka3]

hi there @soranoo =))))

This my first look about the fix of *: class

Wait for me for full feedback, looks very interesting 💣

[soranoo]

Investigation Report

1. hover: and :hover
   • Since I have used Tailwind for quite a long time I had forgotten the hover: is from Tailwind. 🙃
   • Incorrect pseudo-classes handling. bb90dd0
2. The problem of selectorClasses.length > 1 and Tailwind universal selector
   • Due to some defect of class extraction regex. bb90dd0 ce8d783

Feature Update

• Removed customTailwindDarkModeSelector option
• Delete original CSS automatically after obfuscation (for full obfuscation)

New README