Closed soranoo closed 7 months ago
The problem probably only occurs when I enable
next-css-obfuscator
.If you don't enable it from the beginning, the TW classes will just update the new values ββafter each deployment, and the old classes don't need to be changed, and it will be cached, I think.
Bruhh is that easy ?=))), the problem may actually be caching
, I don't see that being fixed in 2.1.5
, are there any more steps needed?
I still think this will be a Nextjs cache control header
problem, thank you~
If yes, then that is out of the scope of this package.
BUT the issue was just caused by the different obfuscation results in every run. In other words, this is due to the incorrect behaviour of the refreshClassConversionJson
option.
Yes, it's annoying.
I think I'll split the current repo into a separate repo to be the source for hoangnhan.co.uk, it seems to be enough to be considered a demo site
.
After that I thought I would have to turn this plugin off and turn it back on when everything is done, or I need too hard refresh
every time deployed π
Yesss, I think we need to do an option opposite to refreshClassConversionJson
, I mean just updating new classes, that could also help reduce the overall obfuscate time, even though it is already very fast π
Now:
In expected:
Updated 02 more CSS rules to a6ee7635e9d39b73.css
// next-css-obfuscator.config.cjs
module.exports = {
//...
refreshClassConversionJson: false,
//...
};
Haha what a beautiful prospect
I never even set the refreshClassConversionJson
to true
sir π₯²
Every time I want to try 'run build', I delete the old .next/cache
folder and css-obfuscator
folder before running the command. This makes me feel safer.
Yesss, I think we need to do an option opposite to
refreshClassConversionJson
, I mean just updating new classes, that could also help reduce the overall obfuscate time, even though it is already very fast πNow:
In expected:
Updated 02 more CSS rules to a6ee7635e9d39b73.css
Your expectations will never happen. NEXT JS generate a brand new CSS file in every build so the obfuscator has to obfuscate the whole CSS again and again.
I never even set the
refreshClassConversionJson
totrue
sir π₯²Every time I want to try 'run build', I delete the old
.next/cache
folder andcss-obfuscator
folder before running the command. This makes me feel safer.
That is the problem I mentioned as follows.
If yes, then that is out of the scope of this package.
BUT the issue was just caused by the different obfuscation results in every run. In other words, this is due to the incorrect behaviour of the
refreshClassConversionJson
option.
U mean I should set it to true
when deploying or is there an error in refreshClassConversionJson
?
Perhaps there is no way to preserve the previously obfuscated class name? (based on the previous conversion.json file?), if possible, it seems that the pre-production steps will be more cumbersome hmm π€
Please reference to π Config Options.
The obfuscator will use the old table if refreshClassConversionJson = false
and push new obfuscation to the table if needed. Otherwise( if refreshClassConversionJson = true
), a new table will be generated with brand new obfuscated selectors.
It is HIGHLY recommended to run the build cmd twice to see if there are any changes in the conversion.json
and I believe most of your confusion will be resolved by doing this.
But the problem is that Vercel
will build the css-obfuscator
folder from scratch every time it is deployed. Am I right?
And I've also included the css-obfuscator
folder in .gitignore, should I? If not, do I have to run run build
every time I deploy to update conversion.json
?
Can you briefly recount the most accurate workflow for me?
The deployment procedure is up to you.
But I will add css-obfuscator
to .gitignore
and let Vercel do the job. That is no reason I have to update the conversion table by myself. If you are concerned about the cache, yes updating manually maybe an ideal option.
Okay, as I mentioned
But the problem is that
Vercel
will build thecss-obfuscator
folder from scratch every time it is deployed. Am I right?
And
I've also included the css-obfuscator folder in .gitignore
Present:
Then I edited a letter in /home
, then deployed again
So what u mean
The obfuscator will use the old table if refreshClassConversionJson = false and push new obfuscation to the table if needed.
Is that true or did I set it up wrong somewhere?
.gitignore
:
GitHub repo
:
Vercel will download the repo to an empty folder(kind of) and everything has to be generated from scratch so you can see different obfuscated class names.
I can add a predictable obfuscation mode, tell me if u need it.
What u mean predictable
π, any ref?
I just ran run build
twice, it's true that it only updates the new class, you're right.
But I wonder, when I deploy the whole css-obfuscator
folder, what happens? Let me check.
Perhaps run build
before deploying wouldn't be such a bad idea if it solved the caching
problem
predictable
same input same output
Is there any way for Vercel
to keep the old resources? Even though they say they do, perhaps the npm install
process refreshes these resources each time they deploy?
And I just found out, if refreshClassConversionJson
is false
, yes, it will update the new class if there is one and also keep the old obfuscated class intact. But when I delete the newly added class and run build
again, the log says {previous CSS rules} - 1
eg: 236 to 235
But when I check conversion.json
the class has not been removed
Oh no, even when I uploaded css-obfuscator
folder, Vercel
didn't respect my old css-obfuscator
one, they generated brand new class:
First deployment:
I update something not related and deploy again:
It kept the old class (in html), but in new css (view page source):
What's wrong π€‘π€‘π€‘
Try redeploy with the Use existing build cache
option disabled.
Oh sorry, it's my fault again. I should have made a hard reload
to simulate a new user entering the site for the first time before doing the steps above, and I forgot about that. Now everything seems to be fine, there's only the problem of 'not automatically deleting the class'
This is an expected behaviour of the obfuscator to keep the removed selector obfuscation data.
Do u mean to keep unnecessary classes for later use?
Btw...
Yeah, and there's probably no better way than updating conversion.json
manually (I can even give custom names to the classes I want π), just run build
is really long, but if you don't do that the plugin won't run because it gets the build data from .next
It's okay, at least it lives up to my expectations β¨
Hey @soranoo , do you plan to also obfuscate id
too? like PostCSS-Obfuscator
not now, I may do it after fixing the Partial Obfuscation
@hoangnhan2ka3 Check out the latest update, and the following https://github.com/soranoo/next-css-obfuscator?tab=readme-ov-file#6-how-to-deal-with-css-cache-in-paas-like-vercel
Hope this can help you out.
This means just letting the Math.random().toString()
expression do its thing without worrying about whether it will change or if I need to create my own random string
and put it here?
And one more thing, can I safely put the css-obfuscator
folder into .gitignore
now?
I put the css-obfuscator
folder into .gitignore
and I see the class name still changes after each deployment, so caching
problem still there hmmm
First:
Second:
Yes I tried
But useless
Another case is that I still deploy the css-obfuscator
folder but I no longer need to run build
before deploying it.
But it doesn't look very promising...
My config now:
module.exports = {
enable: true, // Enable or disable the plugin.
mode: "predictable", // Obfuscate mode, "random" or "simplify".
buildFolderPath: ".next", // Build folder of your project.
classConversionJsonFolderPath: "./css-obfuscator", // The folder path to store the before obfuscate and after obfuscated classes conversion table.
refreshClassConversionJson: false, // Refresh the class conversion JSON file.
classLength: 6, // Length of the obfuscated class name.
classPrefix: "", // Prefix of the obfuscated class name.
classSuffix: "", // Suffix of the obfuscated class name.
classIgnore: [
"no",
"dark",
"light",
"no-transition",
"opa-hidden",
"big",
"small",
/lenis*/
], // The class names to be ignored during obfuscation.
allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"], // The file extensions to be processed.
contentIgnoreRegexes: [/\.jsxs\)\("\w+"/g], // The regexes to match the file content to be ignored during obfuscation.
whiteListedFolderPaths: [], // Only obfuscate files in these folders
blackListedFolderPaths: ["./.next/cache"], // Don't obfuscate files in these folders
enableMarkers: false, // Enable or disable the obfuscate marker classes.
markers: ["obf"], // Classes that indicate component(s) need to obfuscate.
removeMarkersAfterObfuscated: true, // Remove the obfuscation markers from HTML elements after obfuscation.
removeOriginalCss: true, // Delete original CSS from CSS files if it has a obfuscated version.
generatorSeed: 840817818898, // The seed for the random generator.
logLevel: "info", // Log level
};
I think 'generating a seed' seems like a good and promising idea, just like the seed in 'Stable Diffusion'.
But is it really as easy as you think, like having to prepare the class name in advance for all possible situations?
I think 'generating a seed' seems like a good and promising idea, just like the seed in 'Stable Diffusion'.
But is it really as easy as you think, like having to prepare the class name in advance for all possible situations?
Would you mind showing me how others can reverse a random string back to a class name?
The random function doesn't take the original class name as input, I don't think it can be reversed.
Sorry, I can't because that's not my expertise.
Have you ever used Stable Diffusion
, seed
in SD will look like this:
It means that if the value in the seed
box is -1
then each time generate
the image will use a different number string
(random).
And if you fill in the seed
box with a certain sequence of numbers (it doesn't matter what the number and magnitude limit is: it can be 1, 11, 111 or 9516515132159). So each time you generate
the image with the same initial prompt
the image will look the same (just a very very very little bit diffrent in small details) until you change to a different seed
.
That's what I expect from predictable mode
or it should called preserved mode
if you can do it, it's really difficult just imagining it isn't it?
The issue was fixed
So one last time
can I safely put the css-obfuscator folder into .gitignore now?
And let it automatically added just new
classes?
css-obfuscator
is a generated folder so it is safe to put it into .gitignore
And I hope that in future 'deploys', the old class names will remain the same as last time and only 'new classes' will be added if any?
That's what predictable
mode does, right? I need you to confirm so I can move the css-obfuscator
folder into .gitignore for the 3rd time today π
And I need you to confirm one more issue:
generatorSeed
needs to be a number between 0
and 1
like 0.132156479
(separated by a dot .
), right?
Please read the π Config Options Reference carefully!!!!
generatorSeed
is a STRING, just put some random characters you likeBut every time you deploy, Vercel
will create a new css file
if the same CSS file is provided
, so is predictable mode
useless in production
?
OK, sorry for misleading, it should be,
"predictable" means the obfuscated class name will be the same if the same CSS content is provided.
same content
, do you mean the seed
that I provide to the config file
initially will save the current content of the CSS file, then if I add anything new, it will ONLY OBFUSCATE THE NEW CLASSES (content)
. That's it, right? And then it loops the process again?
Or when I add a new class and the content is changed, the obfuscate process will completely refresh both old and new class name
?
Please choose 1 or 2, I hope it's 1
Neither is correct, the obfuscation is expected to run after the build is completed. A new conversion table will be generated every time but with the given seed(the seed will used to feed the pseudorandom number generator). If the seed is set and the sequence of CSS selectors inside the CSS file is the same as the last build then the table will be the same. So if a new class is added and Tailwind puts it inside the sequence(break the old sequence), an obfuscated class name will be assigned and NEXT JS will give another file name with the new CSS content which will invalidate the old cache (based on my experience).
The answer I want to hear from you is that if a new TW class
is added, all the old class names
will not be kept and will be changed to different class names
, right?
If that's the case, then I think you should leave predictable
out, or merge it with random
if there really is something better than random
.
predictable
to random
and simplify
modeI know but
an obfuscated class name will be assigned and NEXT JS will give another file name with the new CSS content which will invalidate the old cache (based on my experience).
What do u mean assigned
, and don't worry about caching
problem, it's too soon.
I want to know the result, a solid answer, about what would happen if a new TW class were added.
Why don't I make your wish come true instead of explaining it in a text?
Let's move to #14
Sorry, I have a problem unrelated to this issue, which is
caching
.You know, every time you
run build
the obfuscate process will start from the beginning, meaning therandom obfuscated classes
will be completely different from the previous time. This causes nextjscache
related issue.If a user has visited my page before, then after I update (new deployed), and they reload the page without clearing the cache, it will look like this:
And no matter how many times they try to 'refresh' the website, it will still look the same.
Unless they press
Ctrl + Shift + R
(akahard reload
), the site is updated.Even when I try
view page source
withouthard reload
, the css file doesn't have any new obfuscated class, which causes an error like my website doesn't havecss
at all.Do you have the same problem in your version of
Next Js
, or do you have any advice for me, I've been searching for it all night.Originally posted by @hoangnhan2ka3 in https://github.com/soranoo/next-css-obfuscator/issues/10#issuecomment-1925819091
Additional Infomation-
conversion.json