Closed hoangnhan2ka3 closed 7 months ago
Let's check out the v.2.1.2
hmmm... I didn't try to deploy but when I run build + start
, it's:
I lost my main
π₯², run dev
is okay
omg I don't know what or who was wrong :))))
Check out https://hoangnhan.uk, I turned off obfuscation and it still work, which means Tailwind is fine
Looks like the obfuscate was successful:
Take class .side-box
for example, it is obfuscated to .mbzjvf
, you see: 11
But in the output css file:
I just don't think it would break the website like that π£
In View page source
, my main
and header
tag still there but when Inspect
, they disappear π€
Note: Only the main page /
has lost main
and header
; subpages like /about
are still there but the situation is not very good.
I can't reproduce most of the situations you mentioned.
Looks like the obfuscate was successful:
Take class
.side-box
for example, it is obfuscated to.mbzjvf
, you see:11
![]()
But in the output css file:
![]()
I just don't think it would break the website like that π£ Regarding the HTML issue, it is due to the HTML entities.
Did you practice on the repo I shared with you? Can I see the results?
Except for the red text, the rest should look like this:
Looks like the obfuscate was successful:
Take class
.side-box
for example, it is obfuscated to.mbzjvf
, you see:11
![]()
But in the output css file:
![]()
I just don't think it would break the website like that π£
Have you tried checking this?
I can't reproduce most of the situations you mentioned.
Looks like the obfuscate was successful: Take class
.side-box
for example, it is obfuscated to.mbzjvf
, you see:11
![]()
But in the output css file:
![]()
I just don't think it would break the website like that π£
Regarding the HTML issue, it is due to the HTML entities.
Does your .side-box
actually appear in the css file, why doesn't mine, I tried everything yesterday π₯²
The blue gradient box is .side-box
, it doesn't even appear in my output css file:
nope, I didn't see the .side-box
selector in the CSS
but I got the following
Yes, it's not in global.css
, but here:
which point to below motion.div
className:
It's all in /src/app/layouts/Sidebar.tsx
Maybe you're confused because I use Framer Motion, motion.div
in production is just a div
And this is that motion.div
:
Does your
.side-box
actually appear in the css file, why doesn't mine, I tried everything yesterday π₯²The blue gradient box is
.side-box
, it doesn't even appear in my output css file:
The files in src
aren't necessary for the obfuscation.
The obfuscator only looks at the build
Not only when build
, but even when deployed, .side-box
completely exists in the html Soranoo π:
I don't understand what you're wondering, what can I do to answer it for you, the problem seems quite complicated.
What do u mean by "deployed"? the runtime? I guess I misunderstood it. I think it is an alternative word for build
but now I see it is obviously not the case
OK I don't know what I'm talking about or what's going on π€‘.
But the main problem now is that after run build
, the [&...]
classes HAVE BEEN OBFUSCATED, right?
.side-box
WAS EXACTLY OBFUSCATED INTO .fq27tw
, right?
But, in the output css file AFTER run build
, there are no .fq27tw
, see?
Which caused this:
https://github.com/soranoo/next-css-obfuscator/issues/9#issuecomment-1925493318
So, I don't know if you understand what my original problem was?
Remember the problem with *:
class the other day? yes, similar to it.
This means that even though they have been obfuscated, those new classes have NOT BEEN REPLACED IN both the final .html
and .css
files.
Please clone the exact project I shared with you the other day, change enable
to false
, npm i
>npm run build
> npm run start
to see exactly if your package is not used. What will the website look like?
That's exactly what I expected to see on my website, except when I turned on your package it broke.
Check the beta out.
OK I don't know what I'm talking about or what's going on π€‘.
But the main problem now is that after
run build
, the[&...]
classes HAVE BEEN OBFUSCATED, right?![]()
.side-box
WAS EXACTLY OBFUSCATED INTO.fq27tw
, right?But, in the output css file AFTER
run build
, there are no.fq27tw
, see?
Which caused this:
So, I don't know if you understand what my original problem was?
Remember the problem with
*:
class the other day? yes, similar to it.This means that even though they have been obfuscated, those new classes have NOT BEEN REPLACED IN both the final
.html
and.css
files.Please clone the exact project I shared with you the other day, change
enable
tofalse
,npm i
>npm run build
>npm run start
to see exactly if your package is not used. What will the website look like?
That's exactly what I expected to see on my website, except when I turned on your package it broke.
This is a different issue to *:
Yeah there is a difference, but I really don't know what to compare it to so you can understand.
Hey... maybe it works
Ok let me sum up the issue,
Let say we have a selector.\[\&_\#i-am-id\]\
Tailwind will compile the class to the following CSS,
/* CSS */
.\[\&_\#i-am-id\]\{
/* something here */
}
but NEXT JS will do something like escape to the selector in HTML, like the following,
<!-- HTML -->
<div class="[&_#i-am-id]"></div>
Now, you can see we have different classes/selectors and we can't match them directly using exact wording matching. SO to deal with it, simply replace these "Special Symbols" with HTML Character Entities
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'",
Please wait, something happen with my npm :)))
OMG I ran npm in another directory terminal =)))
hmm what was that weird spacing
only this [&_.side-box]:to-85%
is not applied
Ahh I forgot, please refer to: https://tailwindcss.com/docs/gradient-color-stops#specifying-stop-positions
Otherwise, other than the strange spacing, it all works, maybe, let me enable a canvas
Update: also work
I will open a new issue for it. This is not on my priority list. I will take a look at it after I finish my JS compiler.
hmm what was that weird spacing
only this
[&_.side-box]:to-85%
is not applied
![]()
Ahh I forgot, please refer to: https://tailwindcss.com/docs/gradient-color-stops#specifying-stop-positions
where is it? I don't see in any file
Let me update for you, please wait
Updated, please check out @soranoo
same, I didn't find it
I'm really sorry, right now when I sent the update message, I updated the wrong version and moved to-85%
down for .side-box
, then I updated it right away.
Sorry for this inconvenience
Harmless but worth optimizing:
Check out the 2.1.4-beta.1
DONE, CLOSE IT HONEYπ
Yes, this is a variant of
*:
class, it means you can use arbitrary values to target child elements.Please refer to How to access all the direct children of a div in Tailwind CSS? - StackOverflow
Hi @soranoo, me again π«‘, we have a more complicated problem, and the description of this issue is similar to
hover:
or*:
that I mentioned in 2 previous issues.π
[&>{foo}]:
, it can be tag, class or id, the difference with below is>
(direct children):π
[&_{foo}]:
, the difference with above is_
(all descendants ):π
[&_.{className}]:
, the difference with above is_.
(class):π
[&_#{id}]:
, the difference with above is_#
(id):π Result:
I also just updated to the repo I shared with you the other day #7, in
/src/app/layouts/Sidebar.tsx
, please check out.npm run dev
for no obfuscation and u will see it works perfectly, or go to hoangnhan.uk.npm run build + npm run start
(delete/.next/cache
and oldcss-obfuscator
folder if any) or deploy to reproduce the issue.Thank you so much, have a nice day π.