search

n4j1Br4ch1D / postcss-obfuscator

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

How to use with Next.js? #15

Open zwying0814 opened 1 year ago

zwying0814 commented 1 year ago

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 commented 1 year ago

Did you figure it out @zwying0814 ?

n4j1Br4ch1D commented 1 year ago

@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 commented 1 year ago

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

soranoo commented 1 year ago

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: image and build output: image

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

How can I make it work?

monckey100 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

package.json

image

postcss.config.js

image

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 commented 1 year ago

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

soranoo commented 1 year ago

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