NEXT-CSS-OBFUSCATOR

Project start on 30-10-2023

A temporary solution for using PostCSS-Obfuscator in Next.js.

[!WARNING]
This is no a plug and play package. You have to invest some time to make it work

Give me a ⭐ if you like it.

• 🤔 Why this?
• 💡 How does it work?
  • Where is issue in PostCSS-Obfuscator?
  • How does this package solve the issue?
  • How does this package work?
  • Why I have to patch PostCSS-Obfuscator?
• 🗝️ Features
• 🛠️ Development Environment
• 🚀 Getting Started
  • Installation
  • Setup
  • Usage 🎉
• 🔧 My Setting
• 📖 PostCSS Options Reference
• 👀 Demo
• 🐛 Known Issues
• 🤝 Contributing
• 📝 License
• ☕ Donation

Because in the current version of PostCSS-Obfuscator does not work with Next.js. (see this issue for more details)

By the way, many thanks to n4j1Br4ch1D for creating such a great package.

This repository will be archived once the issue is fixed.

PostCSS-Obfuscator will not edit the build files instead it will create a new folder and put the obfuscated source code files in it. This is where the issue is. Next.js will not recognize the obfuscated files and will not include them in the build. I tried to point Nextjs to build the obfuscated files (by simply change the obfuscated source code folder to src) but it didn't work.

Edit the build files directly. (It may not be the best solution but it works.)

1. Extract the css files from the build files and put them in a temporary folder.
2. Obfuscate the css files in the temporary folder using Patched-PostCSS-Obfuscator.
3. Replace the css files in the build files with the obfuscated css files in the temporary folder. And the obfuscate map json generated in this step.
4. Extract all ".jsx", ".tsx", ".js", ".ts", ".html" files from the build files and replace the css keys according to the obfuscate map json.

   You can specify the file extensions to be processed in the extensions option in postcss.config.cjs.

5. Delete the temporary folder.

I found fresh option not working properly in PostCSS-Obfuscator. When fresh is false new random class names will be generated every time PostCSS processes CSS but none of these new class names will be put into the conversion table for the coming HTML-related content process. As a result, the HTML content never gets the correct obfuscated class names. So I decided to patch it. You can find the patched code within the //! Patch - Start and //! Patch - End block.

You may ask why I have split the project to patched PostCSS-Obfuscator and the Next.js specific part instead of mixing them together. The reason is that I am not a big fan of javascript so you can see the Next.js specific part is written in typescript. Keeping the patch to a minimum scale can make it easier to upgrade the PostCSS-Obfuscator to the latest version.

• WORK WITH NEXT.JS !!!!!!!!!!!!!!!!!!!
• Zero Dependencies

⚠️ This package is NOT guaranteed to work with EVERYONE. Check the site carefully before using it in production.

(You can use any css framework you like, but I tested it with tailwindcss)

1. Install PostCSS

npm install -D postcss postcss-cli

2. Install this package and other required packages

npm install -D cross-env next-css-obfuscator

Visit the npm page.

1. Create / Add the following code to postcss.config.cjs:

   // @ts-ignore
   const isObfscMode = process.env.NODE_ENV === "obfuscation";
   
   module.exports = {
     plugins: {
       // other plugins ...
       "next-css-obfuscator/patched-postcss-obfuscator": {
         enable: isObfscMode,
         extensions: [".jsx", ".tsx", ".js", ".ts", ".html"],
         formatJson: true, // 👈 must be true
         keepData: true, // 👈 must be true
         blackListedPaths: ["./next/cache"],
         classIgnore: ["static"],
         callBack: function () {
           // @ts-ignore
           process.env.NODE_ENV = "production"; // to make sure postcss-obfuscator doesn't re-run.
         },
       },
     },
   };

   Feel to checkout 📖 PostCSS Options Reference for more details.

   ⚠️ formatJson, keepData must be true to make sure the obfuscation works properly.

   The obfuscation will never work as expected, tweak the options with your own needs.

2. Add the following code to package.json:

   "scripts": {
    // other scripts ...
    "obfuscate-build": "next-css-obfuscator-part1 && cross-env NODE_ENV=obfuscation postcss ./temp-css/*.css --dir ./temp-css && next-css-obfuscator-part2"
    },

1. Run npm run build to build the project.
2. Run npm run obfuscate-build to obfuscate the css files.

(You may need to delete the .next/cache folder before running npm run start to make sure the obfuscation takes effect. And don't forget to shift + F5 refresh the page.`)

⚠️ NEVER run obfuscate-build twice in a row. It will mess up the build files and obfuscation convertion table. You can remove the jsonsPath(default: css-obfuscator) folder to reset the convertion table.

You may update your build script to:

// package.json

"scripts": {
  // other scripts ...
  "build": "next build && npm run obfuscate-build"
},

to make sure the build is always obfuscated and no need to run obfuscate-build manually.

If you are interested in my setting (from my production site), here it is

// @ts-ignore
const isObfscMode = process.env.NODE_ENV === "obfuscation";

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "next-css-obfuscator/patched-postcss-obfuscator": {
      enable: isObfscMode,
      extensions: [".jsx", ".tsx", ".js", ".ts", ".html"],
      formatJson: true, // 👈 must be true
      keepData: true, // 👈 must be true
      whiteListedPaths: [],
      blackListedPaths: ["./next/cache"],
      excludeAnyMatchRegex: [
        /\.next\/server\/pages\/api/,
        /_document..*js/,
        /_app-.*/,
      ],
      classIgnore: ["static"],
      callBack: function () {
        // @ts-ignore
        process.env.NODE_ENV = "production"; // to make sure postcss-obfuscator doesn't re-run.
      },
    },
  },
};

It may not be the best setting but it works for me. :)

Compared to the original PostCSS-Obfuscator options, I have removed some to make the patch work as expected. And I have added some new options to make the obfuscation more flexible.

1. Next 14 App Router

• Failed to obfuscate in MacOS (Next 14)

  If there are no serious issues, I tend to leave them alone.

Contributions are welcome! If you find a bug or have a feature request, please open an issue. If you want to contribute code, please fork the repository and submit a pull request.

This project is licensed under the MIT License - see the LICENSE file for details

Love it? Consider a donation to support my work.

<- click me~