n4j1Br4ch1D / postcss-obfuscator

PostCSS plugin that helps you protect your CSS code by obfuscating class names and ids. with advanced customizable configuration.
MIT License
132 stars 5 forks source link

TailwindCSS Data Attributes #11

Closed Publicker closed 1 year ago

Publicker commented 1 year ago

Hey guys!

First off, I'm really impressed with what you're all doing here!

I started using your incredible plugin today, but I've stumbled upon a problem that seems to originate from the plugin itself.

Basically, I'm struggling to get the Tailwind data attributes selectors to function correctly. Here are the TailwindCSS data attributes docs for your reference: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes.

I've put together a Tailwind Playground using data attributes so you can see how it's supposed to work: https://play.tailwindcss.com/JzZ0NY8Q2F.

Contrastingly, this is how it functions after obfuscation, which I've forked from your React + Vite + TailwindCSS Project: https://replit.com/@PabloMaldonado5/DataAttr-PostCSS-Obfuscator-React-Vite-TailwindCSS.

As you can notice, it's not obfuscating the data attributes in the JSX, which results in the failure to apply the styles from the intended classes.

I've also recorded a demo video (low quality due to GitHub's 10MB limit) to show how it operates in the Playground and then in the Replit, illustrating how it behaves in a standard React development mode (prior to obfuscation) and post-obfuscation.

https://github.com/n4j1Br4ch1D/postcss-obfuscator/assets/52673485/8199e8e5-3b01-4b03-a046-8c071760a27b

n4j1Br4ch1D commented 1 year ago

@Publicker thanks for submitting the issue. and for your detailed description. ill check it

Publicker commented 1 year ago

@Publicker thanks for submitting the issue. ill check it

Appreciate it!

n4j1Br4ch1D commented 1 year ago

https://github.com/n4j1Br4ch1D/postcss-obfuscator/pull/12#issuecomment-1553043126