CSSカスタムプロパティ抽出器

CSSカスタムプロパティ抽出器

任意のCSSまたはSCSSスタイルシートを貼り付け、すぐにクリーンで並べ替え、重複を削除したすべての --custom-property が宣言されていること、およびその宣言が行われた選択範囲を表示します。抽出器は、どこにも宣言されていない変数を表面化し、これは大規模なデザインシステムでのスタイルの破損を引き起こすよくある原因です。 var(--name) が参照されているが、どこにも宣言されていない変数を表面化します。

使用方法

1. スタイルシートを CSS / SCSS 入力 ボックスに貼り付け（または 例を試してみてください。 をクリックしてサンプルを読み込みます）。
2. を選択してください 出力フォーマットプレーンテキストテーブル、JSONオブジェクト、または貼り付ける準備ができている :root { } ブロック。
3. を使用して、よく使用されるヘッダーをデフォルト値とともに挿入します。認証セクションで認証タイプと認証情報を設定し、カスタムヘッダーを手動で追加します。curl、Postman、またはコードで使用するための完全なヘッダーセットをコピーします。 フィルター 変数名、値、または範囲で結果を絞り込むためのフィールド。
4. トグル 選択範囲を含める 各変数がどこで宣言されたかを表示するかどうかを制御します。
5. 確認する 未定義変数 パネルで、宣言に一致しない参照を確認します。 var(--name) 出力パネルにあるボタンを使って抽出リストをコピーまたはダウンロードします。
6. ブレースを認識するパーサー

機能

• – スタイルシートを1文字ずつ読み進めて、ネストされた選択子、メディアクエリ、および引用された値を正しく処理します。 範囲追跡
• – 各変数は宣言された選択子またはアットルールとペアで、トークンとコンポーネントスコープオーバーライドを区別できます。 – レビュー用のプレーンテキストテーブル、プログラム用のJSON、およびスタイルシートに貼り付ける準備ができている :root ブロック。
• 3つの出力フォーマット 未定義変数検出 :root { } – どこにも宣言されていない変数をフラグ付けします。
• リアルタイムフィルター – 変数名、値、または選択範囲で結果を絞り込むためにタイプします。 var(--name) 重複と並べ替え
• – 同一範囲内の重複した宣言は収縮され、リストはアルファベット順に並べ替えられて迅速にスキャンできます。 – 何らかのデータがアップロードされません。プライベートまたは未完成のスタイルシートでも動作します。
• デザインシステムスタイルシートをアудィットして、トークンのマスターリストを作成する。 SCSS変数をネイティブCSSカスタムプロパティに移行する。
• ブラウザ内で完全に動作 誤った

このツールを使用するタイミング

• 参照によって引き起こされた破損スタイルを特定する。
• 第三者テーマからスタートブロックを生成する。
• トークンをドキュメントサイトまたはStorybookエントリで使用するためのJSONとしてエクスポートする。 var() CSSカスタムプロパティとは何ですか？
• CSSカスタムプロパティ（また、CSS変数とも呼ばれます）は、2つのダッシュで前接された識別子（たとえば、--color-primary）であり、var()関数を通じてスタイルシートのどこかで再利用可能です。プリプロセッサ変数とは異なり、カスタムプロパティはブラウザで実行時に解決され、他のCSSプロパティと同様にカスケードし、継承され、JavaScriptで動的に更新できます。 :root { } 選択範囲がカスタムプロパティにどのように影響しますか？
• カスタムプロパティは、宣言された要素のサブツリーにのみ存在します。:rootに宣言することで、html要素にマッチするため、効果的にグローバルになります。一方、.cardのようなコンポーネント選択子に宣言することで、そのコンポーネントとその子孫にのみ値が制限されます。同じ名前が異なるスコープで異なる値を持つことが可能で、これはテーマ、ダークモード切り替え、コンポーネントレベルオーバーライドのメカニズムです。