SSR 與正式環境

PikaCSS 的輸出是一個在建置時期產生的靜態 CSS 檔案。光是這一點，就回答了大多數關於 SSR 與正式環境的問題。

SSR、SSG 與串流都能直接運作

這裡沒有執行階段的樣式注入，也沒有需要清空的 style registry：

• 每一次 pika() 呼叫都會在 build time 被替換成 owning entry 設定的 class-name 輸出（預設是字串；transformedFormat: 'array' 時是字串陣列）。伺服器與瀏覽器都不需要執行任何 PikaCSS styling function。
• 每個 project entry 都擁有自己的 logical cssModule 與對應 runtime CSS artifact；預設 single-entry 的 specifier 是 pika.css。Bundler 會把你實際匯入的 logical CSS module 當成一般 stylesheet 處理。

因此，伺服器端渲染、靜態網站產生，以及串流回應都不需要 PikaCSS 特有的處理：只要你的環境能提供一般匯入的樣式表，就能提供 PikaCSS。這裡沒有 extractCriticalToChunks、沒有 ServerStyleSheet，也不會有任何由樣式造成的 hydration 不一致問題。

至於 Nuxt，single-entry authoring 會由 @pikacss/nuxt-pikacss 產生 plugin template 匯入唯一的 cssModule；explicit multi-entry authoring 不會猜測全域 CSS，因此必須由應用程式明確匯入需要的 modules。詳情請見 Nuxt。

正式環境建置

在建置模式下，Integration 會依 canonical project config 中各 entry 的 scan 規則建立完整 usage snapshot，再以 project-level transaction 發布對應的 runtime CSS。每個 entry 的輸出可包含：

• @layer 順序宣告，
• preflight（已剔除未使用的變數與關鍵影格），
• 去除重複後的原子 class，其大小取決於不重複的宣告數量，而非呼叫位置的數量（詳情請見 PikaCSS 如何產生 CSS）。

結果會經過你打包工具正常的 CSS 流程（壓縮、雜湊，以及程式碼分割），PikaCSS 不會對它做任何更動。

開發時什麼會觸發重新載入

開發伺服器會在以下情況重新 derive 並原子替換 project generation：

• 設定檔變更時。 PikaCSS 會監看解析後的 pika.config.* 檔案。只有內容變更才算——沒有實際編輯就存檔，或是變更後位元組完全相同，都會被忽略。
• 已 finalized 的 config dependency 變更時。 會載入外部檔案的外掛，會在 Engine initialization 期間透過 configureEngine 註冊檔案內容／存在性相依，例如 @pikacss/plugin-design-tokens 會註冊 token 來源檔案。Integration 會把 finalized Engine dependencies 與 Config-host dependencies 合併成 project-generation watch set；正式支援的 host 在其中任一路徑變更後重新 derive generation。Dependency registration 僅限初始化階段；runtime/source transform 不能把新發現的路徑加入已 finalized 的 Engine，也不會動態擴張現有 watcher。

這兩條路徑都仰賴正式支援 host 的檔案監看 lifecycle。一般的原始碼編輯不會重新建立引擎，只會新增或更新受影響檔案的使用情形，而產生出來的 CSS 只有在解析後的樣式真的變更時才會重新寫出。pika.gen.ts 則完全不會因原始碼編輯而重新產生：產生出來的宣告是有效引擎／型別設定的決定性投影，只有在真正的型別層輸入變更時（設定重新載入、外掛提供的自動完成等）才會重新產生。

重新 derive project generation 會觸發整頁重新載入，而不是 HMR 更新（Vite）。原子 class 名稱是依照被發現的順序指派的，所以全新的引擎可能把同一個名稱交給不同的宣告。此時瀏覽器手上任何屬於前一代的內容都會指向錯誤的規則——而且是無聲無息、不會有任何錯誤——因此 PikaCSS 會重新載入頁面，確保供應出去的模組與重新產生的 CSS 屬於同一代。編輯設定時請預期頁面狀態（表單輸入、路由位置）會遺失。

設定檔無法成功執行時是例外：開發伺服器會保留上一份正常運作的引擎，因此不會有任何名稱被重新指派，頁面也不會被動到。修好檔案再存檔一次即可套用。

型別層級的效能

產生出來的 pika.gen.ts 大小（自動完成的聯集型別）會隨著你的專案成長。TypeScript 型別系統的成本，會由一套位於儲存庫內的基準測試工具（scripts/type-bench/）追蹤，它會測量不同使用規模與 TS 版本下的檢查時間、型別具現化的數量，以及 IDE 延遲，因此型別效能的退步是實際測量出來的，而不是用猜的。我們沒有公布任何絕對數字，因為這些數字高度取決於專案的形態與硬體。

下一步

• PikaCSS 如何產生 CSS：輸出檔案背後的執行模型。
• Unplugin：正式支援的 bundler adapters、bootstrap selectors 與 production lifecycle。
• Nuxt：Nuxt 模組的自動接線。