New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
postcss-uuid-obfuscator
Advanced tools
postcss-uuid-obfuscator - npm Package Compare versions
Comparing version 0.1.5 to 0.1.6
| { | ||
| "name": "postcss-uuid-obfuscator", | ||
| "type": "module", | ||
| "version": "0.1.5", | ||
| "version": "0.1.6", | ||
| "repository": { | ||
@@ -14,3 +14,3 @@ "type": "git", | ||
| "keywords": [ | ||
| "gulp-plugin", "postcss", "postcss-plugin", "obfuscator", "css", "classname", "hash" | ||
| "gulp-plugin", "postcss", "postcss-plugin", "obfuscator", "obfuscation", "css", "classname", "hash", "uuid" | ||
| ], | ||
@@ -17,0 +17,0 @@ "author": "hadukinei", |
276
README.md
| # PostCSS UUID Obfuscator | ||
| > State in Draft (2024-07-22 15:45 JST) | ||
| > State in Draft (2024-07-22 18:08 JST) | ||
| > | ||
| > **update** | ||
| > - changed hash-nization algorism | ||
| > - write README.md | ||
| > | ||
| > **remaining task** | ||
| > - write README.md: en.ja | ||
| > - finalize | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| This is a [PostCSS] plugin which works to hash-nization (randomizing) class-name with [UUID]. | ||
@@ -18,5 +16,5 @@ And also applying to HTML class-attribute, Javascript string replacing. | ||
| This plugin is very inspired a [postcss-obfuscator], and thank you so much. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| この[PostCSS]プラグインはクラス名を[UUID]などでハッシュ化します。 | ||
@@ -27,2 +25,3 @@ そしてハッシュ化したクラス名を、HTMLファイルのclass属性やJavascriptの文字列に対して置換処理を適用します。 | ||
| このプラグイン作成には[postcss-obfuscator]から多くの影響を受けています。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -48,18 +47,18 @@ [PostCSS]: https://github.com/postcss/postcss | ||
| - [package.json](#packagejson) | ||
| - [Install npm package](#install-npm-package) | ||
| - [Load packages](#load-packages) | ||
| - [Variables](#variables) | ||
| - [Task: main](#task-main) | ||
| - [Important 1.: targetPath method](#important-1-targetpath-method) | ||
| - [Install npm package / npmパッケージのインストール](#install-npm-package--npmパッケージのインストール) | ||
| - [Load packages / パッケージの読み込み](#load-packages--パッケージの読み込み) | ||
| - [Variables / 変数](#variables--変数) | ||
| - [Task: main / メインタスク](#task-main--メインタスク) | ||
| - [Important 1.: targetPath property / targetPathプロパティ](#important-1-targetpath-property--targetpathプロパティ) | ||
| - [Export functions to npm scripts / npm.scriptsへのエクスポート](#export-functions-to-npm-scripts--npmscriptsへのエクスポート) | ||
| - [Task: apply](#task-apply) | ||
| - [Task: clean](#task-clean) | ||
| - [Task: apply / HTML・Javascriptファイルへの適用タスク](#task-apply--htmljavascriptファイルへの適用タスク) | ||
| - [Task: clean / 中間ファイルの削除タスク](#task-clean--中間ファイルの削除タスク) | ||
| - [How to use with JS-API / JS-APIでの使い方](#how-to-use-with-js-api--js-apiでの使い方) | ||
| - [package.json](#packagejson-1) | ||
| - [Install npm package](#install-npm-package-1) | ||
| - [Load packages](#load-packages-1) | ||
| - [Variables](#variables-1) | ||
| - [Task: main](#task-main-1) | ||
| - [Important 1.: targetPath method](#important-1-targetpath-method-1) | ||
| - [Important 2.: Single entrypoint](#important-2-single-entrypoint) | ||
| - [Install npm package / npmパッケージのインストール](#install-npm-package--npmパッケージのインストール-1) | ||
| - [Load packages / パッケージの読み込み](#load-packages--パッケージの読み込み-1) | ||
| - [Variables / 変数](#variables--変数-1) | ||
| - [Task: main / メインタスク](#task-main--メインタスク-1) | ||
| - [Important 1.: targetPath property / targetPathプロパティ](#important-1-targetpath-property--targetpathプロパティ-1) | ||
| - [Important 2.: Single entrypoint / エントリーポイントとなるファイルは必ず1個](#important-2-single-entrypoint--エントリーポイントとなるファイルは必ず1個) | ||
| - [API](#api) | ||
@@ -80,3 +79,3 @@ - [options.enable](#optionsenable) | ||
| - [options.callBack](#optionscallback) | ||
| - [Notice 1.: hashed className](#notice-1-hashed-classname) | ||
| - [Notice 1.: hash-nated className / ハッシュ化したクラス名](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
@@ -88,8 +87,8 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Original package -- postcss-obfuscator -- is very excellent, but I faced to some fatal probrems. So I made this package that named PostCSS UUID Obfuscator. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 元となったpostcss-obfuscatorはとても素晴らしいパッケージですが、いくつかの重大な問題に直面したためにPostCSS UUID Obfuscatorを作成しました。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -99,12 +98,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| postcss-obfuscator uses `Math.random()` for generating a new class-name hash-nized. | ||
| This method is not good at random number collisions unfortunally, and I could not find that it took especially measures. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| postcss-obfuscatorでは新しいクラス名を得るために`Math.random()`を使っています。 | ||
| 乱数衝突の観点からこれは好ましいものではありませんし、実際に衝突が発生した場合の特別な処理が行われているとは思えませんでした。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -123,12 +122,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| postcss-obfuscator replaces all effective characters in a lump, by CSS syntax analyzing, by CSS selectors extracting. | ||
| In the case there are CSS like a above, so it might replace **all effective characters** like belows. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| CSSの文法からクラス名となるセレクタを抽出し、一括して置換処理を行います。 | ||
| 上例のCSSがあったなら、下例のクラス名に一致した文字を**全て**変換するでしょう。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -147,10 +146,10 @@ ```html | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| In the 3rd case, there are no classes in documents. | ||
| Nothing but it contains a character similar class-name with quote symbols in plain text area. | ||
| But replacement is executed, that is unwanted. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 3例目。クラス名ではない文字列も、正規表現パターンにマッチしてしまった場合には変換されてしまいますがこの動作は望みません。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -161,9 +160,8 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| And above sample does not work also. | ||
| This syntax -- connected name with prefix `.` and class-name -- might not collect by RegExp patterns postcss-obfuscator uses, but some functions require this syntax for example querySelector, querySelectorAll, closest, etc.. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| そして上例もまた機能しません。 | ||
@@ -175,2 +173,3 @@ | ||
| HTMLではclass属性だけを置換対象とします。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -191,8 +190,8 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| I will prepare for workable sample in test/gulp folder. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 動作サンプルをtest/gulpフォルダに用意してあります。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -212,11 +211,11 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Define scripts above in a package.json. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 上記のscriptsがpackage.jsonに用意されているものとします。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Install npm package | ||
| ### Install npm package / npmパッケージのインストール | ||
@@ -227,3 +226,2 @@ ``` | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Install npm packages above. | ||
@@ -235,5 +233,5 @@ | ||
| Please should finish initalizing a `npx tailwindcss init`. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 上記のnpmパッケージがインストールされているものとします。 | ||
@@ -244,2 +242,3 @@ | ||
| `npx tailwindcss init`の初期化処理は完了しているものとします。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -251,3 +250,3 @@ [TailwindCSS]: https://tailwindcss.com/ | ||
| ### Load packages | ||
| ### Load packages / パッケージの読み込み | ||
@@ -273,3 +272,2 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Only ESModule (import declation) supports. | ||
@@ -279,5 +277,5 @@ This might not be work by CommonJS (require function). | ||
| Please load these functions -- cleanObfuscator, obfuscator, applyObfuscated -- from PostCSS UUID Obfuscator package. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ESModule形式のみ。 | ||
@@ -287,5 +285,6 @@ CommonJS (require関数) による動作は保証しません。 | ||
| PostCSS UUID ObfuscatorからはcleanObfuscator・obfuscator・applyObfuscatedを読み込んでください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Variables | ||
| ### Variables / 変数 | ||
@@ -300,3 +299,2 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 1. In a developing mode will be disturbed by obfuscator which mode run with auto-reload. Hash-nization task requires some seconds. | ||
@@ -309,5 +307,5 @@ So pre-define a variable for executing or not. | ||
| You need not to use in same with above sample. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 1. オートリロードを想定している開発モードではハッシュ化処理に時間がかかって邪魔になります。 | ||
@@ -317,15 +315,16 @@ 処理の可否を決定するための変数を定義しておきます。 | ||
| 上例では `process.title` を使っていますが、環境変数を使うなど方法に制限はありません。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 2. Save JSON file a result hash-nization. | ||
| Decide a name of folder that contains JSON file. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 2. ハッシュ化処理の結果をJSON形式で保存します。 | ||
| そのためのフォルダ名を変数として定義します。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Task: main | ||
| ### Task: main / メインタスク | ||
@@ -360,3 +359,2 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Before starting a task for PostCSS, initialized by `cleanObfuscator(jsonsPath)`. | ||
@@ -367,5 +365,5 @@ It is removing a JSON files the previous execution, strictly speaking. | ||
| Important things is only below in this section notice. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| PostCSSの処理を始める前に、`cleanObfuscator(jsonsPath)`で初期化処理を実行します。 | ||
@@ -375,7 +373,7 @@ 具体的には（前回に実行した）ハッシュ化処理の結果をJSONファイルを削除します。 | ||
| `obfuscator({})`のオプション引数について詳細は後述しますが、ここで重要なのは1点。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| #### Important 1.: targetPath method | ||
| #### Important 1.: targetPath property / targetPathプロパティ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Please designate the output folder's name by gulp in the `targetPath`. | ||
@@ -385,8 +383,9 @@ | ||
| After finished it, PostCSS UUID Obfuscator will try to replace characters in dist folder's files. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| `targetPath`にgulpの出力先フォルダを指定してください。 | ||
| 上例ではsrcフォルダの中身を変換してdistフォルダに出力し、その後でdistフォルダにあるファイルに対して文字置換を行います。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -413,3 +412,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Before describing about `applyObfuscated()` function, I will guide a order that calling tasks. | ||
@@ -420,5 +418,5 @@ Please sort to locate the CSS task at rear against HTML and Javascript task. | ||
| If this orders are upside-down, replacer refer to JSON file that created in previous session; so obfuscation is failure. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| `applyObfuscated()`関数について述べる前に、タスクの呼び出し順を指定します。 | ||
@@ -429,5 +427,6 @@ CSSの処理は必ずHTMLやJavascriptの処理よりも後に並び替えてください。 | ||
| この順序が前後すると正常な動作は期待できません。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Task: apply | ||
| ### Task: apply / HTML・Javascriptファイルへの適用タスク | ||
@@ -442,13 +441,13 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| After PostCSS execution, call a task that defines `applyObfuscated()`. | ||
| At final, please code about HTML and Javascript characters replacement. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| CSS処理が完了した後で、`applyObfuscated()`のタスクを呼び出します。 | ||
| ここでHTML・Javascriptの文字置換処理を行います。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Task: clean | ||
| ### Task: clean / 中間ファイルの削除タスク | ||
@@ -476,12 +475,12 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| This package create intermediate files, and also might remain files at previous sessions. | ||
| For the convenient, prepare task for cleaning these, I recommended. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| このパッケージでは中間ファイルが発生するほか、以前の出力結果が不必要なファイルとして取り残されたままになることもあります。 | ||
| それらを一掃するためのタスクも用意しておくと便利になることでしょう。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -493,8 +492,8 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| I will prepare for workable sample in test/postcss folder. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 動作サンプルをtest/postcssフォルダに用意してあります。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -518,3 +517,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Define scripts above in a package.json. | ||
@@ -527,5 +525,5 @@ | ||
| Please set CSS task to order in the last. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 上記のscriptsがpackage.jsonに用意されているものとします。 | ||
@@ -536,5 +534,6 @@ | ||
| タスクの順番は、必ずCSS処理を最後にしてください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Install npm package | ||
| ### Install npm package / npmパッケージのインストール | ||
@@ -545,3 +544,2 @@ ``` | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Install npm packages above. | ||
@@ -553,5 +551,5 @@ | ||
| Please should finish initalizing a `npx tailwindcss init`. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 上記のnpmパッケージがインストールされているものとします。 | ||
@@ -562,5 +560,6 @@ | ||
| `npx tailwindcss init`の初期化処理は完了しているものとします。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Load packages | ||
| ### Load packages / パッケージの読み込み | ||
@@ -585,3 +584,2 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Only ESModule (import declation) supports. | ||
@@ -591,5 +589,5 @@ This might not be work by CommonJS (require function). | ||
| Please load these functions -- cleanObfuscator, obfuscator, applyObfuscated -- from PostCSS UUID Obfuscator package. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ESModule形式のみ。 | ||
@@ -599,5 +597,6 @@ CommonJS (require関数) による動作は保証しません。 | ||
| PostCSS UUID ObfuscatorからはcleanObfuscator・obfuscator・applyObfuscatedを読み込んでください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Variables | ||
| ### Variables / 変数 | ||
@@ -616,3 +615,2 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 1. In a developing mode will be disturbed by obfuscator which mode run with auto-reload. Hash-nization task requires some seconds. | ||
@@ -625,5 +623,5 @@ So pre-define a variable for executing or not. | ||
| You need not to use in same with above sample. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 1. オートリロードを想定している開発モードではハッシュ化処理に時間がかかって邪魔になります。 | ||
@@ -633,25 +631,26 @@ 処理の可否を決定するための変数を定義しておきます。 | ||
| 上例では `process.title` を使っていますが、環境変数を使うなど方法に制限はありません。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 2. Save JSON file a result hash-nization. | ||
| Decide a name of folder that contains JSON file. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 2. ハッシュ化処理の結果をJSON形式で保存します。 | ||
| そのためのフォルダ名を変数として定義します。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 3. Let loop PostCSS function by each files. | ||
| This variable is counting for condition to proceed to next. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 3. ファイルごとにPostCSSをループさせています。 | ||
| 処理済みファイルの数をカウントし、次の処理へ進んでいいかの条件分岐に使います。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ### Task: main | ||
| ### Task: main / メインタスク | ||
@@ -716,3 +715,2 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 1. Before starting a task for PostCSS, initialized by `cleanObfuscator(jsonsPath)`. | ||
@@ -723,5 +721,5 @@ It is removing a JSON files the previous execution, strictly speaking. | ||
| Important things is only below in this section notice. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 1. PostCSSの処理を始める前に、`cleanObfuscator(jsonsPath)`で初期化処理を実行します。 | ||
@@ -731,7 +729,7 @@ 具体的には（前回に実行した）ハッシュ化処理の結果をJSONファイルを削除します。 | ||
| `obfuscator({})`のオプション引数について詳細は後述しますが、ここで重要なのは2点。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| #### Important 1.: targetPath method | ||
| #### Important 1.: targetPath property / targetPathプロパティ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Please designate the output folder's name by build-css.mjs in the `targetPath`. | ||
@@ -741,13 +739,13 @@ | ||
| After finished it, PostCSS UUID Obfuscator will try to replace characters in dist folder's files. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| `targetPath`にbuild-css.mjsの出力先フォルダを指定してください。 | ||
| 上例ではsrcフォルダの中身を変換してdistフォルダに出力し、その後でdistフォルダにあるファイルに対して文字置換を行います。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| #### Important 2.: Single entrypoint | ||
| #### Important 2.: Single entrypoint / エントリーポイントとなるファイルは必ず1個 | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| There are no problems while the package might be disabling by developping mode (`npm run dev`). | ||
@@ -757,5 +755,5 @@ But in build mode case ('npm run build') and then the package will be availabled, so final processing SCSS file will overwrite all. | ||
| Please let exist an only one entrypoint SCSS file, like a 'index.scss'. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 開発モード (`npm run dev`) でPostCSS UUID Obfuscatorを無効化している間は問題ありません。 | ||
@@ -765,13 +763,13 @@ しかしビルドモード (`npm run build`) でこのパッケージを有効にした場合、最後に処理したSCSSファイルが以前のハッシュ化処理を上書きしてしまいます。 | ||
| 必ず'index.scss'など、エントリポイントとなるファイルは1つだけにしてください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| 3. After PostCSS execution, call a task that defines `applyObfuscated()`. | ||
| At final, please code about HTML and Javascript characters replacement. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 3. CSS処理が完了した後で、`applyObfuscated()`のタスクを呼び出します。 | ||
| ここでHTML・Javascriptの文字置換処理を行います。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -783,10 +781,10 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| There are no optional variables in `cleanObfuscator()` and `applyObfuscated()`. | ||
| It has only in the `obfuscator({})`. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| cleanObfuscatorとapplyObfuscatedには設定すべきオプション引数は存在しません。 | ||
| obfuscatorの設定で全ては完結しています。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -820,12 +818,12 @@ ```javascript | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Does execute hash-nization class-names. | ||
| Default value: true (boolean) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| クラス名のハッシュ化処理を行うか否か。 | ||
| 初期値: true (boolean) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -835,12 +833,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Character length a hash-nized class-name. [notice 1](#notice-1-hashed-classname) | ||
| Character length a hash-nized class-name. [notice 1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| Default value: 5 (number) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ハッシュ化クラス名の文字数。[注釈1](#notice-1-hashed-classname) | ||
| ハッシュ化クラス名の文字数。[注釈1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| 初期値: 5 (number) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -850,12 +848,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Upper limitation counts for re-generate a hash-nized class-name when it occurs random number collisions. | ||
| Default value: 100 (number) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 乱数衝突が発生した場合の再生成を行う回数上限。[注釈1](#notice-1-hashed-classname) | ||
| 乱数衝突が発生した場合の再生成を行う回数上限。[注釈1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| 初期値: 100 (number) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -865,12 +863,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| A prefix word that appends to hash-nized class-name. [notice 1](#notice-1-hashed-classname) | ||
| A prefix word that appends to hash-nized class-name. [notice 1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| Default value: '' (string) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| クラス名の接頭語。[注釈1](#notice-1-hashed-classname) | ||
| クラス名の接頭語。[注釈1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| 初期値: '' (string) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -880,10 +878,10 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| A suffix word that appends to hash-nized class-name. [notice 1](#notice-1-hashed-classname) | ||
| A suffix word that appends to hash-nized class-name. [notice 1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| クラス名の接尾語。[注釈1](#notice-1-hashed-classname) | ||
| クラス名の接尾語。[注釈1](#notice-1-hash-nated-classname--ハッシュ化したクラス名) | ||
| 初期値: '' (string) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -893,3 +891,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| These class-name would not be executing to hash-nization work flow. | ||
@@ -902,5 +899,5 @@ | ||
| Must not be included a leading period character. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| ハッシュ化処理に含めないクラス名。 | ||
@@ -912,2 +909,3 @@ | ||
| 指定するには`['scrollbar-track', 'scrollbar-thumb']`のように記述して、先頭のピリオドを含めないようにしてください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -917,12 +915,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| There is folder so named which contains JSON file that saved a list table to connect between original class-names and hash-nized class-names. | ||
| Default value: 'css-obfuscator' (string) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| クラス名とハッシュ化クラス名の対照表を記録したJSONファイルのフォルダ名。 | ||
| 初期値: 'css-obfuscator' (string) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -932,3 +930,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Set to name of **output folder** which contains HTML, CSS, Javascript etc. files by the output of task runner process. | ||
@@ -938,5 +935,5 @@ This package runs after task runner's outputting, character replaces to each files in this folder. | ||
| Bad case: if set a **input folder** to this option, this package might disrupt original files unfortunally. Don't be forget. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| タスクランナーなどによってHTML・CSS・Javascriptなど各ファイルを出力するフォルダの名前を指定します。 | ||
@@ -948,2 +945,3 @@ ファイルの出力が終わった後で、このフォルダに格納されるファイルの文字置換を行います。 | ||
| 初期値: 'out' (string) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -953,3 +951,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| It defines filename extensions that is target by this package. | ||
@@ -963,5 +960,5 @@ | ||
| Even if you set a value like `{html: ['.php'], javascript['.ts', '.jsx']}` (even if you wish other files to be enabled as same about PHP, TypeScript, and JSX.); but these are ignored because the parser does not implement yet. Best regards, thank you. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 変換対象のファイル拡張子を定義しています。 | ||
@@ -976,2 +973,3 @@ | ||
| JSXやTypeScript、PHPなどを読み込ませようと`html: ['.php']`のように設定したとしても動作しません。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -984,3 +982,2 @@ [node-html-parser]: https://github.com/taoqf/node-html-parser | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| Set filename extensions not to replace characters. | ||
@@ -995,5 +992,5 @@ | ||
| Ought to be including a leading period character. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 変換対象にしないファイル拡張子を定義します。 | ||
@@ -1005,2 +1002,3 @@ | ||
| `['.js', '.html']`のように、ピリオド付きのファイル拡張子を指定してください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -1010,12 +1008,12 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| After processed this package, you want to remove intermediate JSON files or not. | ||
| Default value: true (boolean) | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| 一連の処理が終了したらJSONファイルを削除するか否か。 | ||
| 初期値: true (boolean) | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -1025,3 +1023,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| In Javascript case. | ||
@@ -1044,5 +1041,5 @@ In normally process, let replace class-name leaded by prefix `.` characters (for example: `.c-className`) to hash-nized characters (with leading prefix `.`). | ||
| I think the pattern reducts a obfuscator's greedy replacement by separator (white spaces and quotation marks), but do not rely too much that is a overconfidence. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| Javascriptでの文字置換処理において、`.c-className`のような先頭にピリオドが付いたものだけでなく、`c-className`のようなピリオドを伴わない文字列もハッシュ化クラス名に置き換えるか否か。 | ||
@@ -1060,2 +1057,3 @@ | ||
| 特に「dark」「red」などの単純な命名を行った場合は非常に危険ですのでご注意ください。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -1065,3 +1063,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| This function is inserted to run before obfuscator(). | ||
@@ -1077,5 +1074,5 @@ | ||
| ``` | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| obfuscator関数 (PostCSS内部で実行される) が実行される直前に挿入される処理です。 | ||
@@ -1091,2 +1088,3 @@ | ||
| ``` | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -1096,3 +1094,2 @@ | ||
| <img width="36" height="36" align="left" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| This function is inserted to run after cleanObfuscator() which executes replaceing about HTML or Javascript files. | ||
@@ -1108,5 +1105,5 @@ | ||
| ``` | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| <img width="36" height="36" align="left" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| cleanObfuscator関数 (HTMLやJavascriptファイルの書き換え) が実行された後に挿入される処理です。 | ||
@@ -1122,2 +1119,3 @@ | ||
| ``` | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
@@ -1127,19 +1125,29 @@ | ||
| #### Notice 1.: hashed className | ||
| #### Notice 1.: hash-nated className / ハッシュ化したクラス名 | ||
| クラス名は単純なハッシュ化処理だけではありません。 | ||
| There are not only simple hash-nations to generate new class-name. | ||
| [UUID]v4 (ランダムな値)をシード値として作成。 | ||
| クラス名とシード値を文字列結合した上で[hasha]のSHA512でハッシュ化したものをbase64形式で出力し、クラス名として使えない文字を置き換えた上で全て小文字に揃える。 | ||
| ここからoptions.lengthの文字数だけ切り出します。 | ||
| + Generate a seed of randomizer by [UUID] v4 (random value); if there is already generated, so re-generate a it. | ||
| + Connecting between seed value and target class-name, hash-nizing into SHA512 method by [hasha], converting number to binary, adding the prefix '111', and then it generate a hash-nated value which take a syntax of base32. | ||
| + Truncate that character's length by options.length. | ||
| + When occurring a collision of randomizer, back to No. 1. | ||
| > However, in the case of re-generation's count that reach to options.retryCount, display warning and go next. | ||
| + Convined with hash-nated value, options.prefix, and options.suffix. | ||
| もし乱数衝突により同じハッシュ化クラス名が生成されてしまった場合はシード値を更新して、options.retryCountの再探索回数の上限に引っかからないまで処理を行います。 | ||
| By the function of No. 5, I can not vouch a length of hash-nated value as equal to option.length. | ||
| <img width="24" height="24" align="right" src="README.img/1f1fa-1f1f8.png" alt="🇺🇸"> | ||
| > 上限回数を超えてしまった場合は警告文を表示します。 | ||
| [hasha]: https://github.com/sindresorhus/hasha | ||
| 新しいクラス名の生成方法は、単純な文字列のハッシュ化処理だけではありません。 | ||
| + [UUID] v4 (ランダムな値) をシード値として生成し、既に生成されている場合は生成し直す。 | ||
| + 変換したいクラス名とシード値を結合し、[hasha]のSHA512形式でハッシュ化し、2進数に変換し、先頭に'111'を追加して、base32形式で出力する。 | ||
| + options.lengthの文字数に従って文字列を切り詰める。 | ||
| + 変換済みのクラス名と乱数衝突を起こしていた場合は1番目に戻る | ||
| > ただしoptions.retryCountで指定した再探索回数の上限に到達してしまった場合、警告文を表示して次に進みます。 | ||
| + options.prefixとoptions.suffixを変換後の文字列の前後に付け足す。 | ||
| 数字で始まる文字列はクラス名に使用できないため、先頭に`_` (アンダースコア)を追加します。 | ||
| 特に5番目の手順を行っているため、ハッシュ化されたクラス名の文字長はoptions.lenthと必ず一致するとは限りません。 | ||
| <img width="24" height="24" align="right" src="README.img/1f1ef-1f1f5.png" alt="🇯🇵"> | ||
| そして最後にoptions.prefixとoptions.suffixを前後に付け足すため、options.lengthとハッシュ化クラス名の文字数は**絶対に**一致しません。 | ||
| [hasha]: https://github.com/sindresorhus/hasha |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.03%
10927367
- Number of package files
- increased by1.75%
58
- Number of lines in readme file
- increased by0.75%
1074
No dependency changes