@charcoal-ui/tailwind-diff 4.0.0-beta.7 → 4.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/Check.mdx +108 -0
- package/src/Dump.mdx +37 -0
- package/src/REAMDE.mdx +84 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/tailwind-diff",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.9",
|
|
4
4
|
"bin": "bin/tailwind-diff.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsc",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
26
26
|
"directory": "packages/tailwind-diff"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "50820678ee3b5340ab936f7982554bb650ff0021"
|
|
29
29
|
}
|
package/src/Check.mdx
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
<Meta title="tailwind-diff/Check" />
|
|
4
|
+
|
|
5
|
+
# tailwind-diff check
|
|
6
|
+
|
|
7
|
+
## 概要
|
|
8
|
+
|
|
9
|
+
Tailwind CSS のバージョンや設定ファイルの変更をもとに、利用できるクラスの差分を出力します。
|
|
10
|
+
内部的には、Tailwind CSS のビルドを 2 回実行し、結果を tmp ディレクトリに保存し、内容を比較しています。
|
|
11
|
+
|
|
12
|
+
## オプション
|
|
13
|
+
|
|
14
|
+
| name | description | alias | type | required |
|
|
15
|
+
| ------------- | -------------------------------------------------------------------------------------------------------- | -------------------- | ------------- | -------- |
|
|
16
|
+
| after-config | 2 回目のビルド時に使用する Tailwind CSS の設定ファイル。設定ファイルが変化するシナリオで用いる | --after-config のみ | string | NO |
|
|
17
|
+
| before-config | 1 回目のビルド時に使用する Tailwind CSS の設定ファイル。設定ファイルが変化するシナリオで用いる | --before-config のみ | string | NO |
|
|
18
|
+
| config | ビルド時に使用する Tailwind CSS の設定ファイル。設定ファイルが特に変化しない場合これだけを指定する。(※1) | -c または --config | string | NO |
|
|
19
|
+
| json | 出力フォーマットを JSON にするかどうか | --json のみ | boolean | NO |
|
|
20
|
+
| packages | 1 回目のビルドと 2 回目のビルドの間にアップデートすべきパッケージ群 | --packages のみ | string[] (※2) | NO |
|
|
21
|
+
|
|
22
|
+
※1 `config` と `before-config` あるいは `after-config` がどちらも指定されないときの動作は未定義。どちらかは必ず指定する。
|
|
23
|
+
また、たとえば `config` と `before-config` だけを指定した際の動作も未定義。
|
|
24
|
+
|
|
25
|
+
※2 `--packages a b` と `--packages a --packages b` はどちらも OK。詳しくは [yargs](https://yargs.js.org/docs/#api-reference-arraykey) のドキュメントを参照。
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
$ npx @charcoal-ui/tailwind-diff check --help
|
|
29
|
+
tailwind-diff check
|
|
30
|
+
|
|
31
|
+
checks diffs due to package updates
|
|
32
|
+
|
|
33
|
+
Options:
|
|
34
|
+
--version Show version number [boolean]
|
|
35
|
+
--help Show help [boolean]
|
|
36
|
+
--before-config tailwind config used in first build [string]
|
|
37
|
+
--after-config tailwind config used in second build [string]
|
|
38
|
+
--packages packages to be update [array]
|
|
39
|
+
--json print result as JSON format [boolean]
|
|
40
|
+
-c, --config tailwind config file [string]
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## 使い方の例
|
|
44
|
+
|
|
45
|
+
### `tailwindcss` はそのまま、`@charcoal-ui/tailwind-config` をアップデートする
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npx @charcoal-ui/tailwind-diff check -c ./tailwind.config.js --packages @charcoal-ui/tailwind-config@3.13.0
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### `@charcoal-ui/tailwind-config` はそのまま、`tailwindcss` をアップデートする
|
|
52
|
+
|
|
53
|
+
```bash
|
|
54
|
+
npx @charcoal-ui/tailwind-diff check -c ./tailwind.config.js --packages tailwindcss@latest
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### パッケージをアップデートせず、`tailwind.config.js` を変更する
|
|
58
|
+
|
|
59
|
+
手動で新たに `tailwind.config.new.js` のようなファイルを作成した上で以下を実行します。
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
npx @charcoal-ui/tailwind-diff check --before-config ./tailwind.config.js --after-config ./tailwind.config.new.js
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## 出力の形式
|
|
66
|
+
|
|
67
|
+
### デフォルトの形式
|
|
68
|
+
|
|
69
|
+
変更内容の詳細は出力せず、増減があったかだけを出力します。
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
$ npx @charcoal-ui/tailwind-diff check --packages @charcoal-ui/tailwind-config@latest --config tailwind.config.js
|
|
73
|
+
|
|
74
|
+
1 classes added, 0 classes removed.
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
増減に変化が 0 件であることを確認したいケースなどはそちらが適用です。
|
|
78
|
+
|
|
79
|
+
### JSON 形式
|
|
80
|
+
|
|
81
|
+
`--json` を指定した場合
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
$ npx @charcoal-ui/tailwind-diff check --packages @charcoal-ui/tailwind-config@latest --json
|
|
85
|
+
|
|
86
|
+
[{"className":"w-fit","status":"added","css":[".w-fit {\n width: fit-content;\n}"]}]
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
この場合、`@charcoal-ui/tailwind-config` をアップデートすると w-fit というクラスが新しく使えるようになることがわかります。
|
|
90
|
+
|
|
91
|
+
人間に見やすくするオプションなどはありません。その場合は [jq](https://jqlang.github.io/jq/) など、JSON をフォーマットできるコマンドと併用するのが推奨されます。
|
|
92
|
+
|
|
93
|
+
```bash
|
|
94
|
+
$ npx @charcoal-ui/tailwind-diff check --packages @charcoal-ui/tailwind-config@latest --json | jq
|
|
95
|
+
|
|
96
|
+
[
|
|
97
|
+
{
|
|
98
|
+
"className": "w-fit",
|
|
99
|
+
"status": "added",
|
|
100
|
+
"css": [
|
|
101
|
+
".w-fit {\n width: fit-content;\n}"
|
|
102
|
+
]
|
|
103
|
+
}
|
|
104
|
+
]
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
**ステータスの種類は `added` または `removed` の 2 種類です。**
|
|
108
|
+
クラスが変更された場合に `改名した` と訳してくれることはなく、1 件の追加と 1 件の削除としてカウントされます。
|
package/src/Dump.mdx
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
<Meta title="tailwind-diff/Dump" />
|
|
4
|
+
|
|
5
|
+
# tailwind-diff dump
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx @charcoal-ui/tailwind-diff dump -c ./path/to/tailwind.config.js -o dump.css
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 概要
|
|
12
|
+
|
|
13
|
+
指定したコンフィグファイルをもとに CSS を出力します。
|
|
14
|
+
できることは Tailwind CSS などの `build` と同じです。
|
|
15
|
+
|
|
16
|
+
**[check](/docs/tailwind-diff-check--docs)コマンドとは内部的に`dump`が利用されています。**
|
|
17
|
+
内部分の利用以外でこのコマンドを直接利用するケースは（デバッグなどを除いて）あまりないと言って良いでしょう。
|
|
18
|
+
|
|
19
|
+
## オプション
|
|
20
|
+
|
|
21
|
+
| name | description | alias | type | required |
|
|
22
|
+
| ------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------ | -------- |
|
|
23
|
+
| config | ビルド時に使用する Tailwind CSS の設定ファイル。省略した場合は `tailwind.config.js`が使われれる（現在のパスからの相対）。 | -c または --config | string | YES |
|
|
24
|
+
| output | ビルド結果の CSS を出力するファイル。省略した場合は標準出力に出る。 | -o または --output | string | YES |
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
$ npx @charcoal-ui/tailwind-diff dump --help
|
|
28
|
+
tailwind-diff dump
|
|
29
|
+
|
|
30
|
+
dump Tailwind CSS with config
|
|
31
|
+
|
|
32
|
+
Options:
|
|
33
|
+
--version Show version number [boolean]
|
|
34
|
+
--help Show help [boolean]
|
|
35
|
+
-o, --output output file [string]
|
|
36
|
+
-c, --config tailwind config file [string]
|
|
37
|
+
```
|
package/src/REAMDE.mdx
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
<Meta title="tailwind-diff/README" />
|
|
4
|
+
|
|
5
|
+
# @charcoal-ui/tailwind-diff クイックスタート
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@charcoal-ui/tailwind-diff)
|
|
8
|
+
|
|
9
|
+
## インストール
|
|
10
|
+
|
|
11
|
+
### npm
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install --save-dev @charcoal-ui/tailwind-diff
|
|
15
|
+
npx tailwind-diff --help
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### yarn
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
yarn add -D @charcoal-ui/tailwind-diff
|
|
22
|
+
yarn tailwind-diff --help
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### pnpm
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
pnpm add -D @charcoal-ui/tailwind-diff
|
|
29
|
+
pnpm tailwind-diff --help
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### bun
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
bun add -d @charcoal-ui/tailwind-diff
|
|
36
|
+
bunx tailwind-diff --help
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
あるいは、ローカルにインストールせずに実行するのも良いでしょう。
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npx @charcoal-ui/tailwind-diff --help
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 概要
|
|
46
|
+
|
|
47
|
+
`@charcoal-ui/tailwind-diff` は、Tailwind CSS をアップデートした際、または設定をアップデートした際に吐き出されるクラスの差分を表示する CLI ツールです。
|
|
48
|
+
`@charcoal-ui/tailwind-config` をアップデートした際のみならず、`tailwind-diff` はそのままに、Tailwind CSS をアップデートした際に起こる変化を検出し、アップデートを補助します。
|
|
49
|
+
|
|
50
|
+
## 使い方
|
|
51
|
+
|
|
52
|
+
以下のコマンドが実行できます。[check](/docs/tailwind-diff-check--docs) と [dump](/docs/tailwind-diff-dump--docs) については各ページを参照してください。
|
|
53
|
+
|
|
54
|
+
### check
|
|
55
|
+
|
|
56
|
+
アップデートの結果生じるクラスの差分を出力する
|
|
57
|
+
|
|
58
|
+
### dump
|
|
59
|
+
|
|
60
|
+
現在の設定から生成される CSS を出力する
|
|
61
|
+
|
|
62
|
+
また、サブコマンド以下でも以下のオプションを利用できます
|
|
63
|
+
|
|
64
|
+
### --version
|
|
65
|
+
|
|
66
|
+
バージョン番号を出力する
|
|
67
|
+
|
|
68
|
+
### --help
|
|
69
|
+
|
|
70
|
+
使い方のヘルプを出力する
|
|
71
|
+
|
|
72
|
+
```bash
|
|
73
|
+
$ npx @charcoal-ui/tailwind-diff --help
|
|
74
|
+
|
|
75
|
+
tailwind-diff <command>
|
|
76
|
+
|
|
77
|
+
Commands:
|
|
78
|
+
tailwind-diff check checks diffs due to package updates
|
|
79
|
+
tailwind-diff dump dump Tailwind CSS with config
|
|
80
|
+
|
|
81
|
+
Options:
|
|
82
|
+
--version Show version number [boolean]
|
|
83
|
+
--help Show help [boolean]
|
|
84
|
+
```
|