You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+57-37Lines changed: 57 additions & 37 deletions
Original file line number
Diff line number
Diff line change
@@ -15,8 +15,7 @@ Project starts on 30-10-2023
15
15
16
16
Visit the [GitHub Page](https://github.com/soranoo/next-css-obfuscator/) for better reading experience and latest docs. 😎
17
17
18
-
---
19
-
18
+
---
20
19
21
20
### 🎉 Version 3 has NOW been released 🎉 (💥 Breaking Changes)
22
21
@@ -26,41 +25,43 @@ Visit the [GitHub Page](https://github.com/soranoo/next-css-obfuscator/) for bet
26
25
>[!TIP]\
27
26
> Don't upgrade to this version unless you are using TailwindCSS 4.0.0 or above. "If it works, don't touch it." :)
28
27
29
-
#### 📌 Feature Changes
28
+
#### 📌 Feature Changes
30
29
31
-
- Support TailwindCSS 4.
32
-
- Support nested CSS.
33
-
- Support CSS idents obfuscation.
30
+
- Support TailwindCSS 4.
31
+
- Support nested CSS.
32
+
- Support CSS idents obfuscation.
34
33
35
-
#### 📌 Configuration Changes
34
+
#### 📌 Configuration Changes
36
35
37
-
-`enableJsAst` option is now enabled by default.
38
-
- Default `generatorSeed` not longer fixed to `-1`, but a random string.
39
-
-`simplify-seedable` mode is not longer supported. Use `random` mode instead.
40
-
- Removed `includeAnyMatchRegexes` and `excludeAnyMatchRegexes` options, the `whiteListedFolderPaths` and `blackListedFolderPaths` options will be used instead.
41
-
- Deprecated `classLength` option, not longer supported.
42
-
- Added `ignorePatterns` option to ignore the class names and idents that match the regexes or strings.
43
-
- Not longer preserve TailwindCSS dark mode class names (ie `.dark`). Add the dark mode class name to the `ignorePatterns.selectors` option to preserve it.
44
-
- Merge `classIgnore` into `ignorePatterns.selectors` option.
45
-
- Renamed `classPrefix` and `classSuffix` to `prefix` and `suffix`.
36
+
-`enableJsAst` option is now enabled by default.
37
+
- Default `generatorSeed` not longer fixed to `-1`, but a random string.
38
+
-`simplify-seedable` mode is not longer supported. Use `random` mode instead.
39
+
- Removed `includeAnyMatchRegexes` and `excludeAnyMatchRegexes` options, the `whiteListedFolderPaths` and `blackListedFolderPaths` options will be used instead.
40
+
- Deprecated `classLength` option, not longer supported.
41
+
- Added `ignorePatterns` option to ignore the class names and idents that match the regexes or strings.
42
+
- Not longer preserve TailwindCSS dark mode class names (ie `.dark`). Add the dark mode class name to the `ignorePatterns.selectors` option to preserve it.
43
+
- Merge `classIgnore` into `ignorePatterns.selectors` option.
44
+
- Renamed `classPrefix` and `classSuffix` to `prefix` and `suffix`.
46
45
47
46
### 💥 Version 2 (Major Update)
47
+
48
48
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.
49
49
50
-
#### 📌 Changes
51
-
- Support basic partial obfuscation
52
-
- Support TailwindCSS Dark Mode
53
-
- New configuration file `next-css-obfuscator.config.cjs`
54
-
- More configuration options
55
-
- Now become a independent solution (no need to patch `PostCSS-Obfuscator` anymore)
56
-
- More tests
57
-
- Better CSS parsing
50
+
#### 📌 Changes
51
+
52
+
- Support basic partial obfuscation
53
+
- Support TailwindCSS Dark Mode
54
+
- New configuration file `next-css-obfuscator.config.cjs`
55
+
- More configuration options
56
+
- Now become a independent solution (no need to patch `PostCSS-Obfuscator` anymore)
57
+
- More tests
58
+
- Better CSS parsing
58
59
59
60
### 📚 Migration Guides
61
+
60
62
-[Migrate from version 1.x to 2.x](docs/upgrade-to-v2.md)
61
63
-[Migrate from version 2.x to 3.x](docs/upgrade-to-v3.md)
@@ -166,7 +167,8 @@ Visit the [npm](https://www.npmjs.com/package/next-css-obfuscator) page.
166
167
167
168
1. Create and add the following code to `next-css-obfuscator.config.cjs` or `next-css-obfuscator.config.ts`:
168
169
169
-
##### Obfuscate all files
170
+
##### Obfuscate all files
171
+
170
172
```javascript
171
173
module.exports= {
172
174
enable:true,
@@ -176,8 +178,9 @@ Visit the [npm](https://www.npmjs.com/package/next-css-obfuscator) page.
176
178
};
177
179
178
180
```
179
-
##### Partially obfuscate
180
-
181
+
182
+
##### Partially obfuscate
183
+
181
184
> [!CAUTION]\
182
185
> Partially obfuscate can be EXTREMELYbuggy. Be cautious when using this feature.
183
186
@@ -193,7 +196,8 @@ Visit the [npm](https://www.npmjs.com/package/next-css-obfuscator) page.
193
196
194
197
```
195
198
196
-
##### TypeScript
199
+
##### TypeScript
200
+
197
201
```ts
198
202
import { Options } from "next-css-obfuscator";
199
203
@@ -202,8 +206,6 @@ Visit the [npm](https://www.npmjs.com/package/next-css-obfuscator) page.
202
206
} satisfies Options;
203
207
```
204
208
205
-
206
-
207
209
Feel free to checkout [📖 Config Options Reference](#-config-options-reference) for more options and details.
208
210
209
211
> [!TIP]\
@@ -250,6 +252,7 @@ to make sure the build is always obfuscated and no need to run `obfuscate-build`
250
252
> It is a good idea to add the `/css-obfuscator` folder to `.gitignore` to prevent the conversion table from being uploaded to the repository.
251
253
252
254
#### Partially obfuscate
255
+
253
256
To partially obfuscate your project, you have to add the obfuscate marker class to the components you want to obfuscate.
254
257
255
258
```diff
@@ -312,13 +315,15 @@ It may not be the best setting but it works for me. :)
312
315
|buildFolderPath|string|"./.next"|The folder path to store the build files built by Next.js.|
313
316
|classConversionJsonFolderPath|string|"./css-obfuscator"|The folder path to store the before obfuscate and after obfuscated classes conversion table.|
314
317
|refreshClassConversionJson|boolean|false|Refresh the class conversion JSON file(s) at every obfuscation. Good for setting tweaking but not recommended for production.|
315
-
|prefix|string|""|The prefix of the obfuscated class and ident name.|
316
-
|suffix|string|""|The suffix of the obfuscated class and ident name.|
318
+
|prefix.selectors|string|""|The prefix of the obfuscated classname.|
319
+
|prefix.idents|string|""|The prefix of the obfuscated ident name.|
320
+
|suffix.selectors|string|""|The suffix of the obfuscated classname.|
321
+
|suffix.idents|string|""|The suffix of the obfuscated ident name.|
317
322
|ignorePatterns|{selectors: [], idents: []}|{selectors: [], idents: []}|The patterns to be ignored during obfuscation.|
318
323
|allowExtensions|string[ ]|[".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"]|The file extensions to be processed.|
319
324
|contentIgnoreRegexes|RegExp[ ]|[/\.jsxs\)\("\w+"/g]|The regexes to match the content to be ignored during obfuscation.|
320
-
|whiteListedFolderPaths|(string \| Regex)[ ]|[ ]|The folder paths/Regex to be processed. Empty array means all folders will be processed.|
321
-
|blackListedFolderPaths|(string \| Regex)[ ]|[ ]|The folder paths/Regex to be ignored.|
325
+
|whiteListedFolderPaths|[string \| Regex]( )|[ ]|The folder paths/Regex to be processed. Empty array means all folders will be processed.|
326
+
|blackListedFolderPaths|[string \| Regex]( )|[ ]|The folder paths/Regex to be ignored.|
322
327
|enableMarkers|boolean|false|Enable or disable the obfuscation markers.|
323
328
|markers|string[ ]|[ ]|Classes that indicate component(s) need to obfuscate.|
324
329
|removeMarkersAfterObfuscated|boolean|true|Remove the obfuscation markers from HTML elements after obfuscation.|
@@ -327,6 +332,7 @@ It may not be the best setting but it works for me. :)
|enableJsAst|boolean|true|Whether to obfuscate JS files using abstract syntax tree parser. <br><br>`contentIgnoreRegexes` option will be ignored if this option is enabled.|Alpha|
@@ -338,12 +344,14 @@ It may not be the best setting but it works for me. :)
338
344
339
345
> [!NOTE]\
340
346
> **Stages** -
347
+
>
341
348
> 1. **PoC**: Proof of Concept. The feature is still in the concept stage and is not recommended in production.
342
349
> 2. **Alpha**: The feature is still in the early stage of development and may not work as expected.
343
350
> 3. **Beta**: The feature is almost completed and should work as expected but may have some issues. (if no issue is reported in a period, it will be considered stable.)
344
351
> 4. **Stable**: The feature is in the final stage of development and should work as expected.
345
352
346
353
### All options in one place 📦
354
+
347
355
```js
348
356
// next-css-obfuscator.config.cjs
349
357
@@ -369,8 +377,14 @@ module.exports = {
369
377
*/
370
378
classSuffix: "", // Suffix of the obfuscated class name.
371
379
372
-
prefix: "", // Prefix of the obfuscated class and ident name.
373
-
suffix: "", // Suffix of the obfuscated class and ident name.
380
+
prefix: {
381
+
selectors: "", // Prefix of the obfuscated classname.
382
+
idents: "", // Prefix of the obfuscated ident name.
383
+
},
384
+
suffix: {
385
+
selectors: "", // Suffix of the obfuscated classname.
386
+
idents: "", // Suffix of the obfuscated ident name.
387
+
},
374
388
375
389
/**
376
390
* @deprecated Merged into `ignorePatterns.selectors` from v3.0.0 and will be removed in the next major version.
@@ -428,6 +442,7 @@ Your conversion table may be messed up. Try to delete the `classConversionJsonFo
428
442
In a normal situation, the package will only remove the original CSS that is related to the obfuscation and you should not see any CSS sharing the same declaration block.
429
443
430
444
You are not expected to see this:
445
+
431
446
```css
432
447
/* example.css */
433
448
@@ -508,6 +523,7 @@ If you are going to obfuscate the whole site, you will get a way more accurate o
508
523
Thank you to all the sponsors who support this project.
509
524
510
525
#### Organizations (1)
526
+
511
527
<table>
512
528
<tr>
513
529
<td align="center">
@@ -520,6 +536,7 @@ Thank you to all the sponsors who support this project.
520
536
</table>
521
537
522
538
#### Individuals (1)
539
+
523
540
<table>
524
541
<tr>
525
542
<td align="center">
@@ -532,6 +549,7 @@ Thank you to all the sponsors who support this project.
532
549
</table>
533
550
534
551
## 🦾 Special Thanks
552
+
535
553
<table>
536
554
<tr>
537
555
<td align="center">
@@ -550,9 +568,11 @@ Contributions are welcome! If you find a bug or have a feature request, please o
550
568
## 🏛️ Commercial Usage
551
569
552
570
#### Individual🕺
571
+
553
572
Are you using this package for a personal project? That's great! You can support us by starring this repo on Github ⭐🌟⭐.
554
573
555
574
#### Organization 👯♂️
575
+
556
576
Are you using this package within your organization and generating revenue from it? Fantastic! We depend on your support to continue developing and maintaining the package under an MIT License. You might consider showing your support through [Github Sponsors](https://github.com/sponsors/soranoo).
Copy file name to clipboardExpand all lines: docs/upgrade-to-v3.md
+4-2Lines changed: 4 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -11,8 +11,10 @@ The following table outlines the changes to the configuration options from versi
11
11
|`generatorSeed` (default: -1) |`generatorSeed` (default: {random}) | Default seed is now a random string. Provide a fixed string if you need consistent output across builds (e.g., for CDN caching). |
12
12
|`mode: "simplify-seedable"`| ⛔ (Removed) | Use `mode: "random"` with a fixed `generatorSeed` instead. |
13
13
|`classLength`| ⛔ (Deprecated) | No longer supported. Will be removed in the next major version. |
14
-
|`classPrefix`|`prefix`| Renamed for clarity, now applies to both selectors and idents. `classPrefix` will be removed in the next major version. |
15
-
|`classSuffix`|`suffix`| Renamed for clarity, now applies to both selectors and idents. `classSuffix` will be removed in the next major version. |
14
+
|`classPrefix`|`prefix.selectors`| Renamed for clarity, now applies to both selectors and idents. `classPrefix` will be removed in the next major version. |
15
+
| ➡️ |`prefix.idents`| New option to add specific prefix idents|
16
+
|`classSuffix`|`suffix.selectors`| Renamed for clarity, now applies to both selectors and idents. `classSuffix` will be removed in the next major version. |
17
+
| ➡️ |`suffix.idents`| New option to add specific suffix idents|
16
18
|`classIgnore`|`ignorePatterns.selectors`| Merged into the new `ignorePatterns` object. `classIgnore` will be removed in the next major version. |
17
19
| ➡️ |`ignorePatterns.idents`| New option to ignore specific CSS idents|
18
20
|`includeAnyMatchRegexes`| ⛔ (Removed) | Use `whiteListedFolderPaths` instead. |
0 commit comments