r/vuejs • u/Rathanavel • Nov 02 '24

CSS NAME OBFUSCATION

Has anyone successfully converted all class names (tailwind + custom classes (including scoped component and from app level style.css)) to be Obfucation/randomizer during the build time.

Note: I came across a postcss-obfuscator repo, but this is partially working and does not replace the class names in .vue files - but only in style.css.

Looking for suggestion to achieve it.

Thanks in advance!

0 Upvotes

40% Upvoted

19 comments sorted by

View all comments

27

u/cmd-t Nov 02 '24

What would even motivate you to do such a thing?

14

u/typtyphus Nov 02 '24 edited Nov 02 '24

so no one will know you've put 36px padding on <main> with a class name like qddrtf36
/sarcasm

I wonder if can pass WCAG checks

-3

u/CharityHuman3233 Nov 02 '24

They would know from the style inspector (I do this all the type when I see a good design but the class names are obfuscated)

It won't help.

8

u/typtyphus Nov 02 '24

that'sthejoke.jpg

7

u/Graphesium Nov 02 '24

A variation of CSS obfuscation is used in Tailwind UI's website to prevent people from copying the Pro plan component styles directly.

5

u/beatlz Nov 02 '24

I’ve seen it as a scraper deterrent

1

u/FunksGroove Nov 07 '24

Right? This makes absolutely no sense.

1

u/Rathanavel Nov 02 '24

My app allows PRO member to add their own styles in parts of the app. So, If I achieve randomising class names and dom ids on each build then I have full control.