網站導覽

Tools

CLI 指令

選擇指令、確認檔案影響,並從 CLI 說明與原始碼查找完整選項。

本頁目錄

透過設定指南安裝 CLI,再從專案根目錄執行。generate、lint 與 inspect 無須來源引數就能探索一般應用程式來源;明確路徑引數會取代這個選取範圍。suggest 接受 CSS 宣告區塊。

來源 glob 請加上引號,讓 CLI 而非 shell 展開。這些指令作用於目前工作目錄,只有 suggest 提供 --cwd。擷取定義來源剖析,掃描定義樣式表來源政策。

執行 master-css --help 列出指令,以 master-css <command> --help 閱讀已安裝版本的所有選項。目前指令定義位於 CLI 原始碼。

指令效果

指令預設輸出檔案效果
generateCSS 入口與所需資源發布輸出;--no-export 改為列印 CSS。
lintJSON 診斷讀取來源;--fix 寫入支援的修正。
inspectJSON 檢查報告讀取來源;shell 重新導向可儲存報告。
suggestJSON 宣告提案讀取宣告;不套用提案。

master-css generate

master-css generate [options] [source paths...]

發布 CSS 與相關樣式表資源。用 --no-export --verbose 0 只列印 CSS,不發布檔案。--watch 持續執行直到中斷;程序仍運作時也要檢查重建錯誤。

標準輸出的 CSS 與發布資源有不同的交付邊界

兩個指令都讀取專案來源。--no-export 將 CSS 寫入標準輸出,--output 發布入口與所需資源。匯入或資源維持獨立時,須交付完整檔案集合。

文字說明
  1. 兩種情況下,master-css generate 都讀取所選專案來源與樣式表入口。
  2. --no-export --verbose 0 將 CSS 結果送到 stdout,不發布輸出檔案。呼叫端仍負責參照資源與其 URL 基準。
  3. --output dist/app.css 發布指定入口,以及匯入圖所需的獨立樣式表或資源。
  4. 檔案群組表達資源集合,不保證每個專案都產生額外檔案。一旦產生,部署時就要與入口一起交付。

檢查生成 CSS,不寫入輸出檔案:

master-css generate \  --no-export \  --verbose 0

將 CSS 發布到明確指定的檔案:

master-css generate \  --output master.css

專案來源變更時重新生成輸出;Ctrl+C 停止:

master-css generate \  --watch \  --output master.css

執行 master-css generate --help 查看所有選項。實作。

--output 指定 CSS 入口名稱(預設 master.css)。同層樣式表與資源也須一併發布;為保留順序、條件與 URL 所有權,本地匯入與資源可能維持獨立檔案。只複製入口可能不完整。樣式表邊界請見匯入。

--strict 在發布資源前拒絕已知 CSS 語法或值錯誤。未知瀏覽器能力不視為已驗證支援。--prune-native-css 讓專案擁有的檔案參與原生修剪;套件檔案維持自身政策,@preserve native 在本地優先。原生 CSS 修剪定義規則與關鍵影格行為。

--no-export 列印一份 CSS 結果,不發布其參照資源;須自行保留所需樣式表與資源 URL 的基準。--verbose 0 隱藏進度記錄。Ctrl+C 可停止監看模式;監看程序仍運作時,重建仍可能失敗並保留上次成功匯出。

master-css lint

master-css lint [options] [source paths...]

預設回報 class 診斷,不寫入來源。--fix 套用支援的修正;--fix-dry-run 回傳提案而不套用。stdin 內容絕不寫回虛擬路徑。

檢查現有來源檔案中的 class 排序提案:

master-css lint "src/button.html" \  --rules sort-classes \  --fix-dry-run

檢閱提案後套用 class 排序修正:

master-css lint "src/button.html" \  --rules sort-classes \  --fix

檢查 stdin 來源緩衝區,不修改其虛擬檔案:

master-css lint --stdin \  --stdin-filepath src/button.html \  --rules sort-classes <<'HTML'<button class="p-md flex">  Save</button>HTML

執行 master-css lint --help 查看所有選項。實作。

Lint 報告 v5 將已檢查輸入與有診斷的檔案分開。coverage.checkedFiles 列出所有傳入 lint 的輸入,包含無問題檔案與 stdin 虛擬路徑。summary.checkedFiles 計算這些輸入;summary.filesWithDiagnostics 計算有診斷的已檢查檔案。files 陣列仍只包含診斷結果;空陣列不表示沒有執行檢查。

解讀零診斷前先讀取 coverage.status:complete 表示已檢查所選輸入,no-inputs 表示沒有符合的來源輸入,not-run 表示 manifest 載入阻擋了來源 lint。manifest 診斷不計入已檢查來源檔案。使用 --fix 時,診斷數量描述重新檢查後的內容。無問題的 stdin 仍算一個輸入,不會建立磁碟檔案。stylish 輸出會在 stderr 包含涵蓋範圍摘要。

coverage.description 說明結果,並區分 manifest 樣式表入口與已 lint 的來源輸入。空 manifest.entries 不表示沒有執行來源檢查。涵蓋範圍只適用所選輸入與啟用的 lint 規則,不驗證瀏覽器行為,也不證明整個專案都已檢查。no-inputs 搭配零結束狀態,不是來源檢查成功的證據。

master-css inspect

master-css inspect [options] [source paths...]

回報來源探索、樣式表入口與缺少的 CSS,不發布 CSS 或重寫來源檔案。--classes 檢查掃描結果,不會將那些 class 加入安全清單。解讀空結果前,請先閱讀診斷與涵蓋範圍。

檢查現有來源檔案使用的 class,並包含生成 CSS:

master-css inspect \  "src/button.html" \  --classes "p-md" \  --include-css

在 stderr 閱讀易讀報告:

master-css inspect \  --classes "p-md" \  --format stylish

儲存 JSON 供自動化使用,並保留依診斷決定的結束狀態:

master-css inspect \  --include-css > inspection.json

檢查受管理專案 CSS 中的 token 參照與衝突:

master-css inspect \  --design-system

從現有版本 1 選項檔案讀取中繼資料與原始值政策:

master-css inspect \  --design-system \  --design-system-options design-system.json

加入從 JavaScript 匯入、但 CSS 入口圖無法觸及的路由與元件樣式表:

master-css inspect \  --design-system \  "app/**/*.css"

執行 master-css inspect --help 查看所有選項。實作。

專案快照

--snapshot 將解析後的專案快照寫入 stdout。變更前先儲存,再以 --compare 比較快照與目前專案。兩種模式互斥,且一律回傳 JSON。它們比較定義與已知使用端,不比較瀏覽器像素。

master-css inspect --snapshot > before.json# After the intended source change:master-css inspect --compare before.json > comparison.json

設計系統選項

--design-system-options 讀取 JSON 檔案,且必須搭配 --design-system。MCP mastercss_scan_project 的 designSystem 輸入(僅限專案情境),以及語言伺服器的 designSystem 設定也接受同一物件;三者回傳相同報告。

design-system.json
{  "version": 1,  "metadata": {    "--color-brand-old": {      "description": "Previous brand color",      "deprecated": true,      "replacement": "--color-brand"    }  },  "rawValuePolicy": {    "requireProperties": ["color", "background-color"]  }}
欄位契約
version必填;1。
metadata選填對應表,將目前專案的 token 名稱對應至 description、deprecated 與 replacement。棄用警告涵蓋撰寫的 CSS var() 參照;替換值是檢閱建議,絕不自動套用。
rawValuePolicy.requireProperties選填。這些有 token 支援的屬性,其原生宣告必須使用 token;完整 var() 元件(含備援值)不受限制。省略政策就不檢查原始值。

不識別的欄位會被拒絕。選項只影響檢查報告,絕不影響生成 CSS 或瀏覽器程式。components 從同一複合選擇器中的屬性選擇器,列出各 class 的屬性詞彙,例如 .button[data-variant="primary"]:包含精確 values 與是否存在裸 [name] 選擇器(presence);不收集 :where() 這類函式偽類別內的屬性。報告涵蓋專案入口及本地相依檔案,也包含以來源路徑指定的樣式表(列於 project.routeStylesheets,沒有匯入端);使用 --design-system 時,來源路徑必須符合 .css 檔案。套件 CSS 與專案根目錄外檔案排除;@reference 邊提供定義情境但不交付,browser 維持 not-checked。

master-css suggest

master-css suggest [options] [declarations]

建議 class 並驗證生成宣告,不編輯檔案。使用目前專案 manifest,不確定的區塊會保留為 CSS。套用提案前,請檢閱階層串接與瀏覽器行為。

使用目前專案 manifest,從宣告建議 class:

master-css suggest 'display:flex; align-items:center; padding:16px; gap:1rem;'

從 stdin 讀取宣告區塊:

master-css suggest --stdin <<'CSS'display:flex; align-items:center; padding:16px; gap:1rem;CSS

執行 master-css suggest --help 查看所有選項。實作。

傳入一個加上引號的宣告區塊,或使用 --stdin,不可同時使用。以 --cwd 選擇專案根目錄(預設為目前目錄)。引數若以 -- 開頭,請用 stdin,或在引數前加上 --。輸入只能包含宣告,不可含選擇器或外層大括號。

版本 1 JSON 封套包含 cwd、manifest、result、validation 與 diagnostics。manifest.entries 列出找到的 Master CSS 入口;若完全未找到,建議結果會使用預設集。已找到但載入失敗的入口會造成錯誤,絕不改用預設集。依賴專案 token 或 utility 覆寫前,請先檢查入口。

result 是具版本的宣告建議報告,包含 class、生成 CSS、remainingCss、註記與驗證。preserved 結果保留整個原始區塊,並成功結束;請保留 CSS 並閱讀註記。suggested 結果檢查宣告對應,不檢查階層串接或瀏覽器渲染。class 專屬診斷以 className 識別;validation 分開呈現比對、CSS 語法、CSS 值與瀏覽器支援。

報告一律以 JSON 寫入 stdout。錯誤也寫入 stderr,並以狀態 1 結束。輸入、manifest 或執行失敗會回傳 result: null;已知無效的建議 CSS 會產生錯誤,但仍保留提案。未知值不視為錯誤,瀏覽器支援維持 not-checked。未知旗標等引數剖析錯誤,使用一般 CLI 說明診斷。

檢查結果

lint 與 inspect 預設將 JSON 報告寫入 stdout;--format stylish 將易讀診斷寫入 stderr。診斷錯誤通常會產生非零結束狀態。--exit-code never 會抑制診斷造成的失敗,因此判定成功前請先閱讀報告。疑難排解請見程式碼檢查與掃描 class 名稱。來源連結指向 rc 分支。