How can I do it in quasar?

[AIRGG]

Hello, I have been used your module for tailwindcss it's working like a charm. But when I try it in component like quasar or nuxt/ui it's not working. even it only basic component like button. I have this simple reproducible code here.

as you can see the output for "padding" and "gutter" (number 1) it's working, because I type it the class in div. but, when I'm using "component button: q-btn" from quasar (number 2) the class it's not obfuscate, because I guess it generate by component q-btn

can you help me? Thanks

[jd1378]

Hi Obfuscating happens in 2 steps, first step is done by detecting and obfuscating css classes in post css and creating a mapping, second step is to replace it in your files according to the created mapping

my guess is it's failing in the second step, but to make sure, can you check if the first step is being done correctly by searching the obfuscation.map.json generated file for q-btn ?

[AIRGG]

yeah all the class is generated, I have checked one by one, as you can see the output in here. maybe the problem in the second step? because I think the first step is working

[jd1378]

yes, as I suspected it's the second step

sadly currently I don't know a surefire way to replace classes on the final output, however I am willing to accept contributions if you got any idea

this is the piece of code responsible for replacing classes in files: https://github.com/jd1378/nuxt-obfuscator/blob/main/src/build/vite-plugin.ts

from what I remember, what it does is simply to find Quotes and replace the class names that it can find in the mapping

[AIRGG]

I have some interesting again, when I try to copy from generated inspect element, then I put it in code, it's working, maybe it's only working for typing class, not from generated component

[jd1378]

yeah its probably a problem only for components outside the project files

[AIRGG]

is there any config we can try to make it 'post', maybe we can do something like waiting component generated first, then transform it like said in here is there will be problem or break something?

[jd1378]

I'm not sure, but I think I remember there was a problem with post that I didn't use it

can you try changing it locally and see how it goes for you ?

[AIRGG]

using 'post' is not working

[AIRGG]

I revert it back to 'pre', I think I know the problem, I try to check generated 'dist' folder, yeah it's still component or function with parameter I guess (number 1), not the generated button with class. that's why your module can't transform it when build process but in (number 2) I type it directly it's working. Yeah I think there is nothing wrong in your module

[jd1378]

hmm okay I'm sorry that I couldn't help with this let me know if you found a way

[jd1378]

Hi @AIRGG can you try v2 and let me know if it's working as expected ?

edit: Don't there's still bugs

[jd1378]

ok test 2.0.1 v2 uses post, so hopefully, it should work with everything everywhere

[AIRGG]

still not working, right now my assumption the component & the css is generated in runtime process, like I mention in here.

so when user load the page in browser, it will run function with parameter number 1, then the function will be generate the component like button with css, so I guess it will not work in build process, whatever pre or post

I revert it back to 'pre', I think I know the problem, I try to check generated 'dist' folder, yeah it's still component or function with parameter I guess (number 1), not the generated button with class. that's why your module can't transform it when build process but in (number 2) I type it directly it's working. Yeah I think there is nothing wrong in your module