Skip to content

Commit 9b51f35

Browse files
committed
Updated Docs and Default Config
1 parent cc64ff0 commit 9b51f35

File tree

7 files changed

+53
-33
lines changed

7 files changed

+53
-33
lines changed

README.md

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,27 @@ Project start on 30-10-2023
44

55
![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)
66

7+
[![banner](./docs/imgs/banner.png)](https://github.com/soranoo/next-css-obfuscator)
78

89
[![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)
910

10-
Visit the [GitHub Page](https://github.com/soranoo/next-css-obfuscator/) for better reading experience.
11+
---
12+
13+
Visit the [GitHub Page](https://github.com/soranoo/next-css-obfuscator/) for better reading experience and latest docs. 😎
14+
15+
---
16+
1117

1218
### 🎉 Version 2.1.0 has NOW been released 🎉
13-
Shout out to [hoangnhan2ka3](https://github.com/hoangnhan2ka3) for providing a wonderful [issue](https://github.com/soranoo/next-css-obfuscator/issues/6) report.
19+
Shout out to [hoangnhan2ka3](https://github.com/hoangnhan2ka3) for providing a 💪wonderful [issue](https://github.com/soranoo/next-css-obfuscator/issues/6) report and a demo site.
1420

15-
#### Changes:
21+
#### 📌 Changes
1622
- Much Much Much better quality of CSS selector obfuscation
1723
- Delete original CSS automatically after obfuscation (only apply at full obfuscation)
1824
- Support TailwindCSS Universal Selector (eg. `*:pt-4`)
1925
- More tests
2026

21-
### Configuration Changes:
27+
#### 📌 Configuration Changes
2228
- Removed `customTailwindDarkModeSelector` option, the dark mode selector will be automatically obfuscated at full obfuscation.
2329
- Merged `includeAnyMatchRegexes` and `excludeAnyMatchRegexes` options into `whiteListedFolderPaths` and `blackListedFolderPaths` options. (Directly move the regexes to the `whiteListedFolderPaths` and `blackListedFolderPaths` options)
2430
- Added `removeOriginalCss` option, default to `false`. Set to `true` to delete original CSS from CSS files if it has a obfuscated version.
@@ -27,7 +33,7 @@ Visit the [GitHub Page](https://github.com/soranoo/next-css-obfuscator/) for bet
2733
### 💥 Version 2 (Major Update)
2834
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.
2935

30-
#### Changes:
36+
#### 📌 Changes
3137
- Support basic partial obfuscation
3238
- Support TailwindCSS Dark Mode
3339
- New configuration file `next-css-obfuscator.config.cjs`
@@ -36,7 +42,7 @@ Visit the [GitHub Page](https://github.com/soranoo/next-css-obfuscator/) for bet
3642
- More tests
3743
- Better CSS parsing
3844

39-
### Migration Guide:
45+
### 📚 Migration Guides
4046
- [Migrate from version 1.x to 2.x](docs/upgrade-to-v2.md)
4147

4248

@@ -71,6 +77,7 @@ Give me a ⭐ if you like it.
7177
- [⭐ TODO](#-todo)
7278
- [🐛 Known Issues](#-known-issues)
7379
- [💖 Sponsors](#-sponsors)
80+
- [🦾 Special Thanks](#-special-thanks)
7481
- [🤝 Contributing](#-contributing)
7582
- [📝 License](#-license)
7683
- [☕ Donation](#-donation)
@@ -215,6 +222,9 @@ For convenience, you may update your build script to:
215222
216223
to make sure the build is always obfuscated and no need to run `obfuscate-build` manually.
217224
225+
> [!NOTE]\
226+
> It is a good idea to add the `/css-obfuscator` folder to `.gitignore` to prevent the convertion table from being uploaded to the repository.
227+
218228
#### Partially obfuscate
219229
To partially obfuscate your project, you have to add the obfuscate marker class to the components you want to obfuscate.
220230
@@ -260,9 +270,11 @@ module.exports = {
260270
/\.next\/server\/pages\/api/,
261271
/_document..*js/,
262272
/_app-.*/,
263-
]
273+
/__.*/, // <= maybe helpful if you are using Next.js Lcal Fonts [1*]
274+
],
264275
};
265276
```
277+
[*1] See this [comment](https://github.com/soranoo/next-css-obfuscator/issues/6#issuecomment-1919495298)
266278
267279
It may not be the best setting but it works for me. :)
268280
@@ -278,11 +290,11 @@ It may not be the best setting but it works for me. :)
278290
|classLength|number|5|The length of the obfuscated class name if in random mode.|
279291
|classPrefix|string|""|The prefix of the obfuscated class name.|
280292
|classSuffix|string|""|The suffix of the obfuscated class name.|
281-
|classIgnore|(string | Regex)[ ]|[ ]|The class names to be ignored during obfuscation.|
293+
|classIgnore|(string \| Regex)[ ]|[ ]|The class names to be ignored during obfuscation.|
282294
|allowExtensions|string[ ]|[".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"]|The file extensions to be processed.|
283-
|contentIgnoreRegexes|RegExp[ ]|[ ]|The regexes to match the content to be ignored during obfuscation.|
284-
|whiteListedFolderPaths|(string | Regex)[ ]|[ ]|The folder paths/Regex to be processed. Empty array means all folders will be processed.|
285-
|blackListedFolderPaths|(string | Regex)[ ]|[ ]|The folder paths/Regex to be ignored.|
295+
|contentIgnoreRegexes|RegExp[ ]|[/\.jsxs\)\("\w+"/g]|The regexes to match the content to be ignored during obfuscation.|
296+
|whiteListedFolderPaths|(string \| Regex)[ ]|[ ]|The folder paths/Regex to be processed. Empty array means all folders will be processed.|
297+
|blackListedFolderPaths|(string \| Regex)[ ]|[ ]|The folder paths/Regex to be ignored.|
286298
|enableMarkers|boolean|false|Enable or disable the obfuscation markers.|
287299
|markers|string[ ]|[ ]|Classes that indicate component(s) need to obfuscate.|
288300
|removeMarkersAfterObfuscated|boolean|true|Remove the obfuscation markers from HTML elements after obfuscation.|
@@ -303,15 +315,16 @@ module.exports = {
303315
classSuffix: "", // Suffix of the obfuscated class name.
304316
classIgnore: [], // The class names to be ignored during obfuscation.
305317
allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"], // The file extensions to be processed.
306-
contentIgnoreRegexes: [], // The regexes to match the file content to be ignored during obfuscation.
318+
contentIgnoreRegexes: [
319+
/\.jsxs\)\("\w+"/g, // avoid accidentally obfuscate the HTML tag
320+
], // The regexes to match the file content to be ignored during obfuscation.
307321
308322
whiteListedFolderPaths: [], // Only obfuscate files in these folders
309323
blackListedFolderPaths: ["./.next/cache"], // Don't obfuscate files in these folders
310324
enableMarkers: false, // Enable or disable the obfuscate marker classes.
311325
markers: ["next-css-obfuscation"], // Classes that indicate component(s) need to obfuscate.
312326
removeMarkersAfterObfuscated: true, // Remove the obfuscation markers from HTML elements after obfuscation.
313327
removeOriginalCss: false, // Delete original CSS from CSS files if it has a obfuscated version.
314-
315328
logLevel: "info", // Log level
316329
};
317330
```
@@ -377,6 +390,7 @@ Since the original CSS may referenced by other components not included in the ob
377390
378391
1. [Next 14 App Router](https://github.com/soranoo/next-css-obfuscator/tree/main/demo/next14-app-router)
379392
2. [Next 14 App Router Partially Obfuscated](https://github.com/soranoo/next-css-obfuscator/tree/main/demo/next14-app-router-partially-obfuscated)
393+
3. [hoangnhan.co.uk](https://hoangnhan.co.uk/) (BY [hoangnhan2ka3](https://github.com/hoangnhan2ka3))
380394
381395
## ⭐ TODO
382396
@@ -408,6 +422,18 @@ Since the original CSS may referenced by other components not included in the ob
408422
409423
#### Individuals (0)
410424
425+
## 🦾 Special Thanks
426+
<table>
427+
<tr>
428+
<td align="center">
429+
<a href="https://github.com/hoangnhan2ka3">
430+
<img src="https://avatars.githubusercontent.com/u/147973044?v=4" width="100" alt=""/>
431+
<br><sub><b>hoangnhan2ka3</b></sub>
432+
</a>
433+
</td>
434+
</tr>
435+
</table>
436+
411437
## 🤝 Contributing
412438
413439
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 run `npm run test` before submit a pull request.

demo/next14-app-router/package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

demo/next14-app-router/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"type": "module",
66
"scripts": {
7-
"build": "next build && npm run obfuscate-build",
7+
"build": "next build ",
88
"dev": "next dev",
99
"lint": "next lint",
1010
"start": "next start",
@@ -28,7 +28,7 @@
2828
"cross-env": "^7.0.3",
2929
"eslint": "^8.54.0",
3030
"eslint-config-next": "^14.0.4",
31-
"next-css-obfuscator": "^2.0.0",
31+
"next-css-obfuscator": "^2.1.0-beta2",
3232
"postcss": "^8.4.32",
3333
"postcss-cli": "^11.0.0",
3434
"prettier": "^3.1.0",

docs/imgs/banner.pdn

429 KB
Binary file not shown.

docs/imgs/banner.png

223 KB
Loading

package.json

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{
22
"name": "next-css-obfuscator",
3-
"version": "2.1.0-beta2",
4-
"description": "A temporary solution for using postcss-obfuscator in Next.js.",
3+
"version": "2.1.0",
4+
"description": "A package deeply inspired by PostCSS-Obfuscator but for Next.js.",
55
"main": "dist/index.js",
66
"type": "commonjs",
77
"scripts": {
88
"build": "npm run test && tsc",
99
"dev": "tsc -w",
1010
"test": "jest",
11-
"publish": "npm run build && npm publish",
12-
"publish@beta": "npm run build && npm publish --tag beta"
11+
"pub": "npm run build && npm publish",
12+
"pub@beta": "npm run build && npm publish --tag beta"
1313
},
1414
"repository": {
1515
"type": "git",
@@ -52,19 +52,11 @@
5252
"Protect CSS code",
5353
"Prevent CSS reverse-engineering",
5454
"tailwindcss",
55-
"tailwindcss classes list",
56-
"tailwindcss classes array json",
5755
"bootstrap",
58-
"bootstrap classes array json",
5956
"Scramble HTML classes",
6057
"CSS anti-theft protection",
6158
"code privacy",
6259
"CSS code obfuscator",
63-
"CSS class name encryption",
64-
"anti web scraping",
65-
"Anti-scraping tools",
66-
"Anti-scraping technology",
67-
"Web scraping prevention",
68-
"Web crawling protection"
60+
"CSS class name encryption"
6961
]
7062
}

src/config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ const defaultOptions: Options = {
1212
classSuffix: "", // Suffix of the obfuscated class name.
1313
classIgnore: [], // The class names to be ignored during obfuscation.
1414
allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"], // The file extensions to be processed.
15-
contentIgnoreRegexes: [], // The regexes to match the file content to be ignored during obfuscation.
15+
contentIgnoreRegexes: [
16+
/\.jsxs\)\("\w+"/g, // avoid accidentally obfuscate the HTML tag
17+
], // The regexes to match the file content to be ignored during obfuscation.
1618

1719
whiteListedFolderPaths: [], // Only obfuscate files in these folders
1820
blackListedFolderPaths: ["./.next/cache"], // Don't obfuscate files in these folders

0 commit comments

Comments
 (0)