`[&>{sth}]:`, `[&_{sth}]:`, `[&_.{className}]:` and `[&_#{id}]:`. Tailwind is truly incredibly strong !

[hoangnhan2ka3]

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 old css-obfuscator folder if any) or deploy to reproduce the issue.

Thank you so much, have a nice day 💕.

[soranoo]

Let's check out the v.2.1.2

[hoangnhan2ka3]

hmmm... I didn't try to deploy but when I run build + start, it's:

I lost my main 🥲, run dev is okay

[hoangnhan2ka3]

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

[hoangnhan2ka3]

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 💣

[hoangnhan2ka3]

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.

[soranoo]

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.

[hoangnhan2ka3]

Did you practice on the repo I shared with you? Can I see the results?

[soranoo]

[hoangnhan2ka3]

Except for the red text, the rest should look like this:

[hoangnhan2ka3]

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?

[soranoo]

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.

[hoangnhan2ka3]

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:

[soranoo]

nope, I didn't see the .side-box selector in the CSS

but I got the following

[hoangnhan2ka3]

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

[hoangnhan2ka3]

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:

[soranoo]

The files in src aren't necessary for the obfuscation.

[soranoo]

The obfuscator only looks at the build

[hoangnhan2ka3]

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.

[soranoo]

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

[hoangnhan2ka3]

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.

[soranoo]

Check the beta out.

[soranoo]

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:

#9 (comment)

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.

This is a different issue to *:

[hoangnhan2ka3]

Yeah there is a difference, but I really don't know what to compare it to so you can understand.

[hoangnhan2ka3]

Hey... maybe it works

[soranoo]

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="[&amp;_#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

 "&": "&",
  "<": "&lt;",
  ">": "&gt;",
  '"': "&quot;",
  "'": "&#39;",

[hoangnhan2ka3]

Please wait, something happen with my npm :)))

[hoangnhan2ka3]

OMG I ran npm in another directory terminal =)))

[hoangnhan2ka3]

hmm what was that weird spacing

[hoangnhan2ka3]

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

[hoangnhan2ka3]

Otherwise, other than the strange spacing, it all works, maybe, let me enable a canvas

Update: also work

[soranoo]

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

[soranoo]

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

[hoangnhan2ka3]

Let me update for you, please wait

[hoangnhan2ka3]

Updated, please check out @soranoo

[soranoo]

same, I didn't find it

[hoangnhan2ka3]

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

[hoangnhan2ka3]

Harmless but worth optimizing:

[soranoo]

Check out the 2.1.4-beta.1

[hoangnhan2ka3]

DONE, CLOSE IT HONEY💕