PostCSS

一個使用 JavaScript 轉換 CSS 的工具

增加程式碼可讀性

使用 Can I Use 中的值,將供應商前綴新增到 CSS 規則。Autoprefixer 會根據目前的瀏覽器普及率和屬性支援,為您套用前綴。

:fullscreen {
}
CSS 輸入
:-webkit-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
CSS 輸出

今天就使用未來的 CSS!

PostCSS Preset Env 讓您可以將現代 CSS 轉換成大多數瀏覽器都能理解的格式,根據您鎖定的瀏覽器或執行時間環境,使用 cssdb 來決定您需要的 polyfill。

body {
  color: oklch(61% 0.2 29);
}
CSS 輸入
body {
  color: rgb(225, 65, 52);
}
CSS 輸出

全球 CSS 的終結

CSS 模組 表示您永遠不用擔心您的名稱太過於一般,只要使用最能表達意義的名稱即可。

.name {
  color: gray;
}
CSS 輸入
.Logo__name__SVK0g {
  color: gray;
}
CSS 輸出

避免您的 CSS 出錯

使用 stylelint 來強制套用一致的慣例,並避免您的樣式表出錯,它是一個現代的 CSS linter。它支援最新的 CSS 語法,以及類 CSS 的語法,例如 SCSS。

a {
  color: #d3;
}
CSS 輸入
app.css
2:10 Invalid hex color
主控台輸出

贊助商

您的公司有使用 PostCSS 嗎?加入這個清單!

受到業界領導者的信賴

由社群為社群打造

PostCSS 是由數百位開源貢獻者開發和維護的。成為這個大家庭的一份子 — 提交您的第一個 Pull Request!