Closed hoangnhan2ka3 closed 7 months ago
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 π€‘.
What a fantastic issue format! I really appreciate your enthusiasm and contribution to this package.
Plus, if you have a test project for this, would you mind to share with me?
Thank you for reply!
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 π).
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.
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 π.
I actually have more than one feature request π
.big
in const bigElement = document.querySelector(".big")
If you can really do this, this will be a huge boom for your package.
Yes, fixing the bugs is my top priority right now.
Regarding the feature request,
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.
@hoangnhan2ka3 The beta version is ready!
npm run next-css-obfuscator@beta
Looking forward to your feedback~
hi there @soranoo =))))
This my first look about the fix of *:
class
Wait for me for full feedback, looks very interesting π£
hover:
and :hover
hover:
is from Tailwind. πselectorClasses.length > 1
and Tailwind universal selector
customTailwindDarkModeSelector
optionNew README
I'm extremely honored to be tagged in the README β¨.
And I'm surprised by the structure of your code after this change quite a bit, thank you for your effective efforts π.
There are actually a lot of improvements, especially with the hover:
class, which is almost fine for now.
You also fixed the problem https://github.com/soranoo/next-css-obfuscator/commit/bb90dd0f259a9aa17e77d427f43fcac246a5c760#commitcomment-138032346
which is noice ππ.
Ok now let's get to the main point.
hi there @soranoo =))))
This my first look about the fix of
*:
class![]()
Wait for me for full feedback, looks very interesting π£
Well~, the problem is the same of hover:
class I've commented on your edit https://github.com/soranoo/next-css-obfuscator/commit/bb90dd0f259a9aa17e77d427f43fcac246a5c760#commitcomment-138032286 yesterday:
Good group separation !
Yeah I mean "replace", not "change":
/* From this */
.\*\:justify-center > * {
justify-content: center;
}
/* To this */
.\*\:hbk62l > * {
justify-content: center;
}
IN THE CSS FILE !!!
Or at least for now, it can be called "add more". Because the problem I'm about to talk about in next part still doesn't seem to be quite right, even though you mentioned it in the Change log.
.hbk62l
in css file β:I also tried deploying to Vercel, Redeploy without caching,... but nothing changed...
In new beta Readme, you said Delete original CSS automatically after obfuscation (only apply at full obfuscation)
, WOW π€―.
After reading carefully the new Tips
section, I think it's an issue.
Looks like I haven't experienced that yet, don't know if it's a problem because I'm using tsx
or if our version
is different.
As u can see, unused classes have not been deleted/ replaced. (I tried with one default and one custom TW class but same output parameter)
Easy-to-see version of View page source:
In conversion.json
file:
But please don't worry, as I said before, let's solve the superficial problems first, a little file size of css file is not a big deal now, but it would be a really great option if it could be done.
In addition, I also discovered some more bugs:
classIgnore
, perhaps this update makes it no longer work.In my next-css-obfuscator.config.cjs
:
without space
with attribute:Yeah this [pop-t]
, [pop-b]
, [pop-l]
and [pop-r]
is my custom attribute used for long-hover popup like this:
Just like title attribute:
The project containing pop
is an old project based on static HTML so I haven't tried it on the Nextjs project this time, but I think it will also have some problem with deleting/ replacing the obfuscated class inside. css files
It seems more correct then ~ @soranoo
Before:
After:
β¨ I don't see classes that should not be duplicated anymore.
But what happen with the new CSS rules count
haha π€.
*\:class
is a single class (like dark\:class
and hover\:class
) so there is no reason to treat it differently.classIgnore
classIgnore
is expected to only accept string[ ]
therefore RegExp
doesn't work with it. (I will support it later on)classIgnore
. But note that .hex.hex-c
are two classes, you should register them as ["hex", "hex-c"]
not ["hex.hex-c"]
β¨Report to commander @soranoo , mission success !
I've been trying with new CSS rules count
but it still doesn't work π₯²
Please provide an official version to npm.
Plus, there are 2 Obfuscation
in the log π:
Let's have a final beta before release!
npm run next-css-obfuscator@beta
I had added/merged some options. Btw classIgnore
option now supports Regex.
New README
Plus, there are 2
Obfuscation
in the log π:![]()
I will remove it before the official release.
Okayyyy newwww buggggg:
// layout.tsx
import localFont from 'next/font/local';
const gilroy = localFont ({
src: [
{
path: "../fonts/SVN-Gilroy.woff2",
weight: "400",
style: "normal",
},
{
path: "../fonts/SVN-GilroyMedium.woff2",
weight: "500",
style: "normal",
},
{
path: "../fonts/SVN-GilroySemiBold.woff2",
weight: "600",
style: "normal",
},
{
path: "../fonts/SVN-GilroyBold.woff2",
weight: "700",
style: "normal",
},
{
path: "../fonts/SVN-GilroyHeavy.woff2",
weight: "800",
style: "normal",
},
{
path: "../fonts/SVN-GilroyBlack.woff2",
weight: "900",
style: "normal",
},
],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className={gilroy.className}>
<head>
<meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="last-modified" content={new Date().toLocaleDateString()}/>
</head>
<body className="dark">
<noscript>You need to enable JavaScript to run this site.</noscript>
<ProgressTopbar />
<main className="flex">
<HomeLayout />
<div className="p-6 size-full">
{children}
</div>
</main>
</body>
</html>
);
}
U see <html lang="en" className={gilroy.className}>
In production, it will look like this if no obfuscation:
Please refer to Nextjs local fonts
I tried not including __className_38b0b7
in classIgnore
so it looks like a normal person.
And when run this package:
In normal pages β :
In 404 page β(a.k.a not-found.tsx page) :
Yes, fonts have not been applied.
In previous comments, I put __className_38b0b7
in classIgnore
so I didn't detect this problem.
__className_38b0b7
will not change even when deploying or run build + run start
or run dev
, but when you add fonts or update fonts I think it will change. So I think adding exactly __className_38b0b7
to classIgnore
is not a good idea, right?
try put /__.*/
into classIgnore
?
Nope,
Result 1:
Result 2:
Do you have any updates about classIgnore
that I missed? Do I need to update?
I tried putting className={gilroy.className}
in body
as well but still the same.
okay I just updated with classIgnore
which already supports Regex
, everything is fine, so a class like __className_38b0b7
cannot be obfuscated, right?
I also just tried with some other Regex
and they work fine too:
Result:
Thanks @soranoo π!
I guess yes... I will add this to the doc
So it seems like there's only one "problem" left, which is replacing the class in querySelector
or something like that.
I tried removing .big
and .small
from classIgnore
and the rotation effect no longer seems to work.
One more :)))) Sorry I'm so annoying just pointing out the bug without doing anything to help you π₯².
filter
tag inside svg
tag:In the comments above, I had to put filter
in classIgnore
to not cause the filter
tag to obfuscate, hmmm... I don't know why it detected filter
tag as a class.
In conversion.json
file:
OMG is it really a class π€―? How.
Note: filter
attribute was not changed β
:
iframe
tag:I thought it was an element of HTML
huh?
With <filter>
:
Without <filter>
:
So it seems like there's only one "problem" left, which is replacing the class in
querySelector
or something like that.![]()
I tried removing
.big
and.small
fromclassIgnore
and the rotation effect no longer seems to work.
I don't think is it a good idea to use querySelector
but not useRef
. You are using React
not jQuery
After some testing, I decided not to edit the regex since the javascript obfuscation will messed up by that .
.
That's okay, don't try too hard
For a temp fix, add the following to the class conversion json,
{
// ....
"..big": ".big",
}
That's not called a natural deployment, right?
Okay, I'll live with .big
and .small
in classIgnore, no problem π€‘
Yes, directly editing the conversion JSON is not recommended. Btw can I mention your site in the dome section?
Ok, but let me provide another domain with same content, cuz I will use hoangnhan.uk for more deployment.
U can use hoangnhan.co.uk, I will update it in a minute
hoangnhan.co.uk is ready @soranoo, I just wait for new npm package to update and u can mention it.
or when I finish my project on my main domain hoangnhanne.id.vn, you can mention it too :D.
Please notify me when your site goes into production! Looking forward to your fantastic work.
It's just a 100dvh website haha π€‘
@hoangnhan2ka3 The 2.1.0
is out
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:
π 1. Also obfuscate something like "hover:" in TailwindCSS class:
There are things that are really easy to confuse like
*:hover
in normal CSS andhover:*
in TailwindCSS class, both havehover
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
, incss-obfuscator/conversion.json
file:(I also delete
.next/cache
folder and oldcss-obfuscator
folder, which containconversion.json
before running this build command).Result:
In expected:
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 thenode_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
: https://github.com/soranoo/next-css-obfuscator/blob/480fbb19b276b629b7eaf9df116fc4fbb65c886e/src/utils.ts#L801When 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) withselectorClasses.length >= 1
. And Irun dev
,run build + run start
ordeploy 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 [":"](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children):**
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 thinkwill do the rest.
Okay and... the remain problem of
*:
is same same ashover:
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 π₯³.