From 53e99db69e3afc10d65d43b13524c1accaf8bf28 Mon Sep 17 00:00:00 2001 From: Freeman Date: Sun, 21 Jan 2024 18:54:11 +0000 Subject: [PATCH] v.2.0.0 (#5) #### Changes: - Support partially obfuscation - Support TailwindCSS Dark Mode - New configuration file `next-css-obfuscator.config.cjs` - More configuration options - Now become a independent sulotion (no need to patch `PostCSS-Obfuscator` anymore) - More tests - Better CSS parsing --- .github/workflows/auto_test.yml | 33 + README.md | 350 +- bin/cli-part1.mjs | 5 - bin/cli-part2.mjs | 5 - bin/cli.mjs | 5 + .../.env.example | 14 + .../.eslintrc.cjs | 37 + .../.gitignore | 46 + .../README.md | 14 + .../next-css-obfuscator.config.cjs | 8 + .../next.config.js | 10 + .../package-lock.json | 5587 +++++++++++++++++ .../package.json | 43 + .../postcss.config.cjs | 6 + .../public/favicon.ico | Bin 0 -> 15406 bytes .../screenshot.png | Bin 0 -> 74610 bytes .../src/app/layout.tsx | 26 + .../src/app/page.tsx | 16 + .../src/env.js | 40 + .../src/styles/globals.css | 3 + .../tailwind.config.ts | 14 + .../tsconfig.json | 42 + .../next-css-obfuscator.config.cjs | 6 + demo/next14-app-router/package-lock.json | 101 +- demo/next14-app-router/package.json | 4 +- demo/next14-app-router/postcss.config.cjs | 23 +- demo/next14-app-router/prettier.config.js | 6 - docs/upgrade-to-v2.md | 40 + jest.config.js | 6 + package-lock.json | 3827 ++++++++++- package.json | 65 +- patched-postcss-obfuscator/LICENSE | 21 - patched-postcss-obfuscator/README.md | 385 -- patched-postcss-obfuscator/index.js | 307 - patched-postcss-obfuscator/package-lock.json | 1225 ---- patched-postcss-obfuscator/package.json | 61 - patched-postcss-obfuscator/style.css | 0 patched-postcss-obfuscator/utils.js | 303 - src/config.ts | 47 + src/index.ts | 97 + src/index.tsx | 127 - src/type.ts | 60 + src/utils.test.ts | 455 ++ src/utils.ts | 804 ++- tsconfig.json | 4 +- 45 files changed, 11530 insertions(+), 2748 deletions(-) create mode 100644 .github/workflows/auto_test.yml delete mode 100644 bin/cli-part1.mjs delete mode 100644 bin/cli-part2.mjs create mode 100644 bin/cli.mjs create mode 100644 demo/next14-app-router-partially-obfuscated/.env.example create mode 100644 demo/next14-app-router-partially-obfuscated/.eslintrc.cjs create mode 100644 demo/next14-app-router-partially-obfuscated/.gitignore create mode 100644 demo/next14-app-router-partially-obfuscated/README.md create mode 100644 demo/next14-app-router-partially-obfuscated/next-css-obfuscator.config.cjs create mode 100644 demo/next14-app-router-partially-obfuscated/next.config.js create mode 100644 demo/next14-app-router-partially-obfuscated/package-lock.json create mode 100644 demo/next14-app-router-partially-obfuscated/package.json create mode 100644 demo/next14-app-router-partially-obfuscated/postcss.config.cjs create mode 100644 demo/next14-app-router-partially-obfuscated/public/favicon.ico create mode 100644 demo/next14-app-router-partially-obfuscated/screenshot.png create mode 100644 demo/next14-app-router-partially-obfuscated/src/app/layout.tsx create mode 100644 demo/next14-app-router-partially-obfuscated/src/app/page.tsx create mode 100644 demo/next14-app-router-partially-obfuscated/src/env.js create mode 100644 demo/next14-app-router-partially-obfuscated/src/styles/globals.css create mode 100644 demo/next14-app-router-partially-obfuscated/tailwind.config.ts create mode 100644 demo/next14-app-router-partially-obfuscated/tsconfig.json create mode 100644 demo/next14-app-router/next-css-obfuscator.config.cjs delete mode 100644 demo/next14-app-router/prettier.config.js create mode 100644 docs/upgrade-to-v2.md create mode 100644 jest.config.js delete mode 100644 patched-postcss-obfuscator/LICENSE delete mode 100644 patched-postcss-obfuscator/README.md delete mode 100644 patched-postcss-obfuscator/index.js delete mode 100644 patched-postcss-obfuscator/package-lock.json delete mode 100644 patched-postcss-obfuscator/package.json delete mode 100644 patched-postcss-obfuscator/style.css delete mode 100644 patched-postcss-obfuscator/utils.js create mode 100644 src/config.ts create mode 100644 src/index.ts delete mode 100644 src/index.tsx create mode 100644 src/type.ts create mode 100644 src/utils.test.ts diff --git a/.github/workflows/auto_test.yml b/.github/workflows/auto_test.yml new file mode 100644 index 0000000..c39fa9b --- /dev/null +++ b/.github/workflows/auto_test.yml @@ -0,0 +1,33 @@ +name: Tests + +# Controls when the workflow will run +on: + # Triggers the workflow on push or pull request events but only for the "main" branch + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - uses: actions/checkout@v3 + + # Install dependencie using the runners shell + - name: Install dependencies + run: npm install + + # Runs test using the runners shell + - name: Test + run: npm run test + \ No newline at end of file diff --git a/README.md b/README.md index 20baddb..f96629f 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,28 @@ Project start on 30-10-2023 -![Weekly Download](https://img.shields.io/npm/dw/next-css-obfuscator?color=0066cc&style=flat) [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)   [![Donation](https://img.shields.io/static/v1?label=Donation&message=❤️&style=social)](https://github.com/soranoo/Donation) +![Tests](https://github.com/soranoo/next-css-obfuscator/actions/workflows/auto_test.yml/badge.svg) [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)   [![Donation](https://img.shields.io/static/v1?label=Donation&message=❤️&style=social)](https://github.com/soranoo/Donation) -A temporary solution for using [PostCSS-Obfuscator](https://github.com/n4j1Br4ch1D/postcss-obfuscato) in Next.js. -> [!WARNING]\ -> This is no a plug and play package. You have to invest some time to make it work +[![npm version](https://img.shields.io/npm/v/next-css-obfuscator?color=red&style=flat)](https://www.npmjs.com/package/next-css-obfuscator) [![npm downloads](https://img.shields.io/npm/dt/next-css-obfuscator?color=blue&style=flat)](https://www.npmjs.com/package/next-css-obfuscator) + +### 🎉 Version 2 has NOW been released 🎉 + This version is deeply inspired by [PostCSS-Obfuscator](https://github.com/n4j1Br4ch1D/postcss-obfuscator). Shout out to [n4j1Br4ch1D](https://github.com/n4j1Br4ch1D) for creating such a great package and thank you [tremor](https://github.com/tremorlabs) for sponsoring this project. + + #### Changes: + - Support partially obfuscation + - Support TailwindCSS Dark Mode + - New configuration file `next-css-obfuscator.config.cjs` + - More configuration options + - Now become a independent sulotion (no need to patch `PostCSS-Obfuscator` anymore) + - More tests + - Better CSS parsing + + #### Migration Guide: + - [Migrate from version 1.x to 2.x](docs/upgrade-to-v2.md) + + +[version 1.x README](https://github.com/soranoo/next-css-obfuscator/tree/v.1.1.0) Give me a ⭐ if you like it. @@ -18,7 +34,6 @@ Give me a ⭐ if you like it. - [Where is issue in PostCSS-Obfuscator?](#where-is-issue-in-postcss-obfuscator) - [How does this package solve the issue?](#how-does-this-package-solve-the-issue) - [How does this package work?](#how-does-this-package-work) - - [Why I have to patch `PostCSS-Obfuscator`?](#why-i-have-to-patch-postcss-obfuscator) - [🗝️ Features](#️-features) - [🛠️ Development Environment](#️-development-environment) - [🚀 Getting Started](#-getting-started) @@ -27,8 +42,15 @@ Give me a ⭐ if you like it. - [Usage 🎉](#usage-) - [🔧 My Setting](#-my-setting) - [📖 PostCSS Options Reference](#-postcss-options-reference) -- [👀 Demo](#-demo) +- [💻 CLI](#-cli) +- [💡 Tips](#-tips) + - [1. Not work at Vercel after updated](#1-not-work-at-vercel-after-updated) + - [2. Lazy Setup - Obfuscate all files](#2-lazy-setup---obfuscate-all-files) + - [3. It was working normally just now, but not now?](#3-it-was-working-normally-just-now-but-not-now) +- [👀 Demos](#-demos) +- [⭐ TODO](#-todo) - [🐛 Known Issues](#-known-issues) +- [💖 Sponsors](#-sponsors) - [🤝 Contributing](#-contributing) - [📝 License](#-license) - [☕ Donation](#-donation) @@ -37,10 +59,6 @@ Give me a ⭐ if you like it. Because in the current version of [PostCSS-Obfuscator](https://github.com/n4j1Br4ch1D/postcss-obfuscator) does not work with Next.js. (see [this issue](https://github.com/n4j1Br4ch1D/postcss-obfuscator/issues/15) for more details) -By the way, many thanks to [n4j1Br4ch1D](https://github.com/n4j1Br4ch1D) for creating such a great package. - -> This repository will be archived once the issue is fixed. - ## 💡 How does it work? ### Where is issue in PostCSS-Obfuscator? @@ -53,25 +71,19 @@ Edit the build files directly. (It may not be the best solution but it works.) ### How does this package work? -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. - -### Why I have to patch `PostCSS-Obfuscator`? - -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. +1. Extract and parse CSS files from the build files. +2. Obfuscate the CSS selectors and save to a JSON file. +3. Search and replace the related class names in the build files with the obfuscated class names. ## 🗝️ Features - WORK WITH NEXT.JS !!!!!!!!!!!!!!!!!!! -- Zero Dependencies -> ⚠️ This package is NOT guaranteed to work with EVERYONE. Check the site carefully before using it in production. +> [!NOTE]\ +> This package is NOT guaranteed to work with EVERYONE. Check the site carefully before using it in production. + +> [!WARNING]\ +> As a trade-off, the obfuscation will make your CSS files larger. ## 🛠️ Development Environment @@ -81,10 +93,13 @@ You may ask why I have split the project to patched PostCSS-Obfuscator and the N | Node.js | v.18.17.1 | | NPM | v.10.1.0 | | Next.js (Page Router) | v.13.5.4 & v.13.4.1 | -| postcss-obfuscator | v.1.6.0 Beta | -| tailwindcss | v.3.3.3 | +| Next.js (App Router) | v.14.0.4 | +| TailwindCSS | v.3.3.3 | + +- ✅ Tested and works with Next.js Page Router and App Router. +- ✅ Tested and works with [Vercel](https://vercel.com/). -(You can use any css framework you like, but I tested it with tailwindcss) +(Theoretically it supports all CSS frameworks but I only tested it with TailwindCSS.)