How to use with Next.js?

[zwying0814]

Thank you for developing such a great library, but how can it be used in Next.js? Please give me some advice, thank you

[nilansaha]

Did you figure it out @zwying0814 ?

[n4j1Br4ch1D]

@zwying0814 @nilansaha what's the exact problem??
I got it running the only issue I faced was I had to use one single src folder.
check this replit: https://replit.com/@n4j1Br4ch1D/postcss-obfuscator-nextjs-tailwindcss#

[nilansaha]

Can you add some instruction. Like which commands to run in sequence to generate obfuscated production build?

[soranoo]

Hi, I am trying to implement the obfuscator into my project which is built with create T3 app(also using nextjs) with tailwind. Here is my postcss.config.cjs setup:

and build output:

The CSS is obfuscated successfully but the rendered HTML still uses the tailwind classname

How can I make it work?

[monckey100]

I'm also having this same issue with Nuxt.js
The postcss is triggering before the html files are being made which causes a webpack build fail.

[drakgons]

It is not updated for the new version of NextJS 13+

app folder not working

It would be nice if there was an option to choose the route of our components

[drakgons]

Temporary solution at least it worked for me, NextJS 13.4.7 app/page router

package.json

postcss.config.js

Do not run any start, dev, test, build commands

Before following the steps, delete PostCSS Obfuscator generated folder and files, (css-obfuscator and other folders and files)

Have the packages installed:
postcss
postcss-cli
cross-env

1 - Only run 1 time

npm run tailwindPostcss

Don't run the command twice, npm run tailwindPostcss

Do not execute any command, dev, build, start

2 - It will generate the files with the obfuscated styles

What I do is copy the obfuscated files and replace it in a new folder

In the new folder I uninstall the postcss-obfuscator package

Sometimes you have to replace the style.css file, with the obfuscated style.css file

I don't know if my English is good
Thank you

[ddoan]

How do I get this to work with Nextjs 13 without Tailwind?

[soranoo]

For anyone who still wants to obfuscate his/her code in Next.js,
Let's checkout https://www.npmjs.com/package/next-css-obfuscator