How to use with Parcel + React + Tailwind?

[ezekiel747]

How can we configure this to work with Parcel + React + Tailwind? I tried a few configurations, but the output files with renamed classes are not used at build time.

The obfuscation would be needed only when building, not during development. I can selectively run the obfuscation process, based on the example in the readme file.

Thank you in advance!

[ezekiel747]

I've created a replit for this, to illustrate the issues i'm facing: https://replit.com/@dev747/parcel-react-tailwind-obfuscator#package.json Tailwind is configured and working properly when the obfuscator is disabled. However, if the obfuscator is enabled, when running npm run build:

• the build/index.[hash].css file has the obfuscated class names
• but the build/index.[hash].js has the original class names
• there is the "out" dir also, which contains a version of the initial js files, but with the renamed classes. However the css file in this dir doesn't contain any classes (seems to be a copy of the initial css file in src dir)

How can we get this working? Any help would be appreciated. Thank you in advance.

cc @n4j1Br4ch1D

[ezekiel747]

I found a solution, it's working for me but let me know if there's a better way of doing this. Having postcss & tailwind installed and configured:

1. npm i postcss-cli
2. create/adjust your postcss.config.js file with the following content:

   module.exports = {
   plugins: [
   require("tailwindcss")({}),
   require("postcss-obfuscator")({
     enable: process.env.NODE_ENV === "obfuscate",
     extensions: [".html", ".js"], // adjust to your needs, ie: .ts, .tsx, .jsx etc
     desPath: 'src-obfuscated', // i'd suggest to add this folder to .gitignore
     keepData: false // this is required since running multiple times seems to mess up the classnames
   }),
   ],
   };

3. if you have .postcssrc config file, remove it. Only postcss.config.js should be used.
4. Adjust your package.json file scripts. This example uses index.html as the entry point, and index.css as the only css file.

   "scripts": {
   //...
   "obfuscate": "NODE_ENV=obfuscate npx postcss src/index.css -o src-obfuscated/index.css",
   "build": parcel build 'src-obfuscated/index.html' --no-cache --dist-dir './build'",
   //...
   }

5. npm run obfuscate // this will create the folder src-obfuscated with original source files but with the renamed classes
6. npm run build // will output the "build" folder with the final result.

---

Be aware of some issues (unrelated to this configuration). For example, using the class "container" from tailwind, also replaces the container var name in the code below (default from Parcel example in their docs):

const container = document.getElementById("app");
const root = createRoot(container)
root.render(<App />);

to this code, breaking the functionality:

const k9hs2 = document.getElementById("app");
const root = createRoot(container)
root.render(<App />);

As a workaround, you may use a different var name like appContainer

Hope it helps. Let me know your thoughts.