Open hoangnhan2ka3 opened 6 months ago
TOO LONG MUST READ !!! π€£π€£
Not related, but look at your hard work @soranoo , so satisfying π
Compare with π€’
Any sample CSS(before obfuscated) inside the .next
folder can be provided? I guess it's just a bug in recursion.
yaeh maybe 1.
is just a bug, but not 2.
However, u mean this?
Just delete .txt
ext or copy it manually.
And this is the obfuscated version one:
My config:
module.exports = {
enable: true, // Enable or disable the plugin.
mode: "random", // 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: "n", // Prefix of the obfuscated class name.
classSuffix: "", // Suffix of the obfuscated class name.
classIgnore: ["dark", "light", "no-transition", "opa-hidden", "big", "small", /__.*/, /os-*/], // 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: "84817818898", // The seed for the random generator.
//! Experimental feature (Alpha)
enableJsAst: false, // Whether to obfuscate JS files using abstract syntax tree parser (Experimental feature)
logLevel: "info", // Log level
};
Note: Sorry I forgot that I had changed the class .note
in above post to id #note
, please pay attention.
No, I need the stripped CSS file, like the second file u provided
U mean the minified one?? but no obfuscated?
and would u like me to turn the CSS nesting plugin
off?
I'll give u two
Obfuscation disable + CSS nesting plugin enable:
Obfuscation disable + CSS nesting plugin disable:
Sorry but I just keep the &:hover
and p
tag for now.
Btw, in your readme.md
:
Line 3: start -> starts
Line 41: sulotion -> solution
Line 93: is issue -> is the issue
Line 95: change -> changing
Line 209, 228, 377: convertion -> conversion
Line 209: and obfuscation -> and the obfuscation
Line 212: recommanded -> recommended
Line 313: still at the early stage -> still in the early stages
Line 319: and strongly -> and is strongly
Line 369: found the package not work as expected after updated -> find the package does not work as expected after being updated
Line 414: may referenced -> may be referenced
Line 428: that related to class -> that is related to the class
Line 431: component under obfuscation -> component is under the obfuscation
Line 457: component -> components
and children components -> "children" components
(although the right one is child
, but children
maybe a pattern word
in our brain so u can just put it in " "
:)))
Actually, I was going to send you this from the Domes
(Demos) case, but you already edited it, making me forget about this π€£.
Waiting for the next patch πΆβπ«οΈ
Please open a new issue if you are going to mention ANYthing not relevant to the current issue!!
Since I'm not a plugin maker
, I don't understand what it means to have multiple issues in a project :))), but if you want I will, chill~
An issue is something like a topic. It is not relevant whether you are a package creator, It is important to the open-source community!!!
Okay, so sorry, I will do it from now...
What should I choose for that small grammar fix
I think it will be a feature request
, but do I have the right to remove your entire template and just leave a small suggestion like above?
Checkout #21
Okay...
Case 1: Can't reproduce Case 2: I'm not going to support nesting in the current step. It would overthrow the foundation of version 2. I will consider implementing it if there is significant demand in the future.
Note: tested with both v2.2.7
and v2.2.8
.
To reproduce:
// postcss.config.js
module.exports = {
plugins: {
"postcss-import": {}, // add this
"tailwindcss/nesting": {}, // and this
tailwindcss: {},
autoprefixer: {},
},
};
// next-css-obfuscator.config.cjs
module.exports = {
enable: true,
mode: "random",
buildFolderPath: ".next",
classConversionJsonFolderPath: "./css-obfuscator",
refreshClassConversionJson: false,
classLength: 6,
classPrefix: "n",
classSuffix: "",
classIgnore: ["dark", "light", "no-transition", "opa-hidden", "big", "small", /__.*/, /os-*/],
allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"],
contentIgnoreRegexes: [/\.jsxs\)\("\w+"/g],
whiteListedFolderPaths: [],
blackListedFolderPaths: ["./.next/cache"],
enableMarkers: false,
markers: ["obf"],
removeMarkersAfterObfuscated: true,
removeOriginalCss: true,
generatorSeed: "84817818898",
//! Experimental feature (Alpha)
enableJsAst: false,
logLevel: "info",
};
{/* whatever page.tsx you like */}
...
<div className="note">
<p>
<b className="note-title">Note:</b> This demo website is just <u id="note-exp">experimental</u>, so if you see something wrong <i>(like error layout or typography)</i>, please do a "hard reload" (<b>Ctrl + Shift + R</b> or <b>Cmd + Shift + R</b>)
</p>
</div>
...
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
.note {
display: flex;
align-items: center;
transition: opacity 0.2s ease-out;
transition-delay: 1.2s;
opacity: 0.2;
cursor: help;
/* class */
.note-title {
letter-spacing: 1rem;
}
/* id */
#note-exp {
opacity: 0.2;
}
/* pseudo-class */
&:hover {
opacity: 1;
transition-delay: 0s;
}
/*! `&:hover` not `& :hover` <- WITH blank no work */
/* tag */
p {
font-size: 0.875rem;
}
}
Delete
the .next/cache
folder and old css-obfuscator
folder with old conversion.json
file in it.
=> yarn build
Result:
Obfuscated β :
conversion.json
Not replaced in output css file
β:
=> yarn start
Just replaced in output html file
β
:
And of course no style on that obfuscated class.
eg: .nu7dy1l
which is .note-title
and has a style of letter-spacing: 1rem
, but there no style applied:
In expected:
It works @soranoo π
Checklist
Is your feature request related to a problem? Please describe. Maybe not, just a
feature request
.Describe the solution you'd like Supporting obfuscate new
native CSS nesting
.Describe alternatives you've considered
1.
first,2.
later.Additional context
πVersion
v2.2.7
THIS POST HAS 02 BIG SECTIONS:
1. With
CSS nesting plugin *before* Tailwind
enabled.β
next-css-obfuscator
work with these plugin enabled! (but there's still a bug which will not replaced the obfuscated class)2. With
CSS nesting plugin *before* Tailwind
disabled.β
next-css-obfuscator
does not work when not enable these plugin! (I can't capture the log cuz it's too long)So, what is that plugin?
π½ 1. When you using
CSS Nesting
in NextJs with TailwindCSS, you will receive a notification like this in thelog
terminal:And in the instruction link it provides, follow it, and you will get results like this in
postcss.config.js
:Now
CSS Nesting
in yourglobal.css
file will behave much like.sass
afternpm run build
. That means that even though existing CSS supportsnative CSS nesting
, TailwindCSS will still convert it tonormal CSS
.π½ 2. But if you do nothing, just ignore it, it's still works (cuz it became native now), but everytime you
save
the file, TailwindCSS will yell the abovewarning
Before going to the
Big sections
, let's explain a bit.β¨ Main point:
Example TSX:
π In fact, CSS already supports
nesting
natively in the form ofnesting selector
:&
like below (ref):π But recently (I don't know when), CSS has supported
without nesting selector
(ref):Hmmm, except something like
:hover
,::before
,::after
maybe, I tried and it didn't work without&
in front. (I didn't try with:is
cuz I can't think of a suitable case)π On the other hand, there exists something called
CSS Combinators
:+
(ref)Okay, maybe enough...
π 1. With
CSS nesting plugin *before* Tailwind
ENABLED.IMPORTANT: it appears that
TailwindCSS
automatically converts thesenative CSS nesting
tonormal CSS
(without nesting) viaPostCSS
, even though it doesn't need to be done to run normally (as evidenced byrun dev
, or disablenext-css-obfuscator
plugin andrun build + run start
).Obfuscated β :
conversion.json
Not replaced β:
output .css file
withnext-css-obfuscator
pluginenable
:Please ignore the red comment, it seems to be normal behavior in
production
output .css file
withnext-css-obfuscator
plugindisable
:π 2. With
CSS nesting plugin *before* Tailwind
DISABLED.next-css-obfuscator
plugin simply doesn't works whenenabled
.But when disable
next-css-obfuscator
:This is the
output .css file
:Which truly a
native CSS nesting
, but when inproduction
, it's still yell:However, that's just a
warning
not anerror
, the build process still successfully!In conclusion, I think for now you should only focus on fixing part
1.
, as for part2.
, wait until TW and NextJs supportnative CSS nesting
then you can fix it later