[BUG] `dark` and `light` in [data-theme] attribute of <html> tag were detected as className

hoangnhan2ka3 commented 6 months ago

Type

[x] Incorrect Class Name Extraction
[x] Incorrect JavaScript Obfuscation
[ ] Incorrect HTML Obfuscation
[ ] Incorrect CSS Obfuscation
[ ] Others

Checklist

[x] Updated the package to the latest version
[x] Read all documentation
[x] No related issue
[x] Meaningful issue title

Environment

Package Version: v.2.2.10
Node Version: v.20.10.0

Describe the bug dark and light in [data-theme] attribute of tag were detected as className

To Reproduce Steps to reproduce the behavior:

Use this package https://www.npmjs.com/package/next-app-theme
Check out the ./src/theme-script.tsx

type Theme = "dark" | "light";

declare global {
    interface Window {
        __theme: Theme;
        __onThemeChange: (theme: Theme) => void;
        __setPreferredTheme: (theme: Theme) => void;
    }
}

const code = function () {
    window.__onThemeChange = function () {};

    function setTheme(newTheme: Theme) {
        // document.documentElement.classList.remove(window.__theme);
        window.__theme = newTheme;
        preferredTheme = newTheme;
        document.documentElement.dataset.theme = newTheme;
        window.__onThemeChange(newTheme);
        // document.documentElement.classList.add(newTheme);
    }

    var preferredTheme;

    try {
        preferredTheme = localStorage.getItem("theme") as Theme;
    } catch (err) {}

    window.__setPreferredTheme = function (newTheme: Theme) {
        setTheme(newTheme);
        try {
            localStorage.setItem("theme", newTheme);
        } catch (err) {}
    };

    var darkQuery = window.matchMedia("(prefers-color-scheme: dark)");

    darkQuery.addEventListener("change", function (e) {
        window.__setPreferredTheme(e.matches ? "dark" : "light");
    });

    setTheme(preferredTheme || (darkQuery.matches ? "dark" : "light"));
};

const getTheme = `(${code})();`;

export function ThemeScript() {
    return <script dangerouslySetInnerHTML={{ __html: getTheme }} />;
}

Expected behavior [data-theme] is not a className so... dark and light in [data-theme]="dark" or [data-theme]="light" is shouldn't be obfuscated.

Screenshots

First load on the website maybe was right, but try add a toggle and press it:

In conversion.json:

Config

module.exports = {
  enable: true,
  mode: "random",
  buildFolderPath: ".next",
  classConversionJsonFolderPath: "./css-obfuscator",
  refreshClassConversionJson: false,

  classLength: 6,
  classPrefix: "n",
  classSuffix: "",

  classIgnore: ["no-transition", "opa-hidden", /nprogress*/, /__.*/, /os-*/],

  allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"],

  contentIgnoreRegexes: [/\.jsxs\)\("\w+"/g],

  whiteListedFolderPaths: [],

  blackListedFolderPaths: ["./.next/cache", "./src", "./public", "./tests"],

  enableMarkers: false,
  markers: ["obf"],
  removeMarkersAfterObfuscated: true,

  removeOriginalCss: true,

  generatorSeed: "84817818898",

  //! Experimental feature (Alpha)
  enableJsAst: false,

  logLevel: "info",
};

Related files Obfuscated version: 97fb199871848870.css.txt

Demos (if any) N/A

Additional context ...

soranoo commented 6 months ago

As a temporary solution, add the following to the config

classIgnore = ["dark", "light"]

I will get back to the issue after a month.

hoangnhan2ka3 commented 6 months ago

Yes, I will. My issues all want to aim for a config file that doesn't require much adjustment and is as simple as possible, I hope you understand.

Also, what are you busy with in the next month?

soranoo commented 6 months ago

Mate, I can't eat with open source.

Feel free to check out, https://github.com/soranoo/Donation https://github.com/sponsors/soranoo

hoangnhan2ka3 commented 6 months ago

Sooo embarrassing, very sorry, I'm just a student, I can't help you any more than helping your package become more perfect so that more people can pay attention to it, at some point it will definitely work, keep trying. Come on up.

This is the first time in half a year that I have come into contact with Front-end development and I am so interested in a package.

I still dream that one day Facebook will buy this package, they created StyleX because they somehow hate Tailwind's cumbersome classes :)))

hoangnhan2ka3 commented 6 months ago

Something wrong :)))

If you need a real demo, I will update to the previous repo I shared with you after I finished lunch

soranoo commented 6 months ago

May I have the related HTML file(.html) (both before and after obfuscation) and the conversion.json?

hoangnhan2ka3 commented 6 months ago

No obfuscation:

index.html.txt

With obfuscation:

index.html.txt

conversion.json:

conversion.json

Please wait a minute, I will update the repo

hoangnhan2ka3 commented 6 months ago

@soranoo I updated, but now I'm using pnpm so let run pnpm install

hoangnhan2ka3 commented 6 months ago

All expected behavior is at hoangnhan.uk (except https://github.com/soranoo/next-css-obfuscator/issues/27)

hoangnhan2ka3 commented 6 months ago

Files related to this issue:

./src/scripts/theme-script.ts

./src/components/ModeToggle.tsx

component <ThemeScript /> in ./src/app/layout.tsx (head tag)

soranoo commented 6 months ago

And what is your expected output? for the html file

hoangnhan2ka3 commented 6 months ago

No, maybe you misunderstood something.

The data-theme attribute only appears at runtime, but in the static html file it will not.

data-theme appears through this script in the head tag (which was created by theme-script.ts):

hoangnhan2ka3 commented 6 months ago

Basically after run build, everything is fine, however when running with the current 2.2.10 version, as I said above

Expected behavior [data-theme] is not a className so... dark and light in [data-theme]="dark" or [data-theme]="light" is shouldn't be obfuscated.

Screenshots

First load on the website maybe was right, but try add a toggle and press it:

In conversion.json:

And things are even worse in the canary version...

hoangnhan2ka3 commented 6 months ago

I noticed that there is not a word data-theme in theme-script.ts (but created by document.documentElement.dataset.theme), so how can u make this pkg realize that dark and light should not be obfuscated there?

Or perhaps in the end, the best way is still to add dark and light to the whitelist heh 🤔. I don't see any ways...

soranoo commented 6 months ago

I hadn't released the patch as an official release. So if you like to check out the canary, you have to npm/pnpm I -D next-css-obfuscator@beta

hoangnhan2ka3 commented 6 months ago

Because 2.2.11 and 2.2.11-beta.2 broke the site in https://github.com/soranoo/next-css-obfuscator/issues/27 so I'm not able to check this issue yet

hoangnhan2ka3 commented 6 months ago

Solved, but problem remain https://github.com/soranoo/next-css-obfuscator/issues/30

soranoo commented 6 months ago

Because 2.2.11 and 2.2.11-beta.2 broke the site in #27 so I'm not able to check this issue yet

[For future reference - DEV]

The error - "Minified react error #148" is due to

Missing necessary HTML comment (e.t. )
Invalid HTML void tag (eg. <br/>valid, <br></br>invalid)

hoangnhan2ka3 commented 6 months ago

Yes, I have one around my <noscript /> tag, but it depend on next build, I can't control that (?):

No, I don't have that. The proof is that when you revert the update, it still runs normally and without any errors.

soranoo commented 6 months ago

Im still working on it.

hoangnhan2ka3 commented 6 months ago

Solved in v2.2.14-beta.2 & v2.2.14-beta.5

soranoo / next-css-obfuscator

[BUG] `dark` and `light` in [data-theme] attribute of <html> tag were detected as className #25