postcss-preset-env logo

postcss-preset-env

像 Babel preset-env 一样把现代 CSS 转为可兼容语法

PostCSS现代CSSBrowserslistCSS兼容

postcss-preset-env 基于 cssdb 和 Browserslist，帮助项目提前使用新 CSS 特性并自动完成兼容性转换。

访问官网

postcss-preset-env

将现代 CSS 语法转换为大多数浏览器可理解的语法，让你提前使用最新的 CSS 特性。

技术简介说明

postcss-preset-env 是 PostCSS 生态中最重要的插件预设之一，由 CSS Tools 组织维护。它的核心功能类似于 JavaScript 生态中的 @babel/preset-env——将现代 CSS 特性转换为浏览器可理解的等价语法，让你可以在项目中使用最新的 CSS 语法而不必担心浏览器兼容性问题。postcss-preset-env 通过查询 cssdb 数据库来确定哪些 CSS 特性需要 polyfill，并根据配置的 Browserslist 目标浏览器自动决定需要转换哪些特性。

postcss-preset-env 内部集成了 60 多个独立的 PostCSS 插件，每个插件负责转换一个特定的 CSS 特性。这些插件按 CSS 规范的成熟度分为 5 个阶段（Stage 0-4），开发者可以通过配置选择启用哪些阶段的特性。默认情况下，postcss-preset-env 启用 Stage 2 及以上的特性（包括 Stage 2、3、4），这些特性已被认为是稳定和值得使用的。

在 2024-2026 年间，postcss-preset-env 经历了重大版本升级（v10.0.0 要求 Node ≥18，v11.0.0 要求 Node ≥20.19 并移除了 CommonJS API），同时持续添加新的 CSS 特性插件（如 CSS Mixin、random 函数、contrast-color 函数等）。npm 周下载量约 3000 万次，是现代前端 CSS 工具链的核心组件之一。

基本信息

项目说明
官网https://preset-env.cssdb.org
GitHubhttps://github.com/csstools/postcss-plugins
LicenseMIT
最新版本11.1.0（2026 年 1 月）
主要维护者CSS Tools 组织、Jonathan Neal、Roméo Maffrenini、Romain Menke
实现语言JavaScript
npm 周下载量约 3000 万次
依赖PostCSS 8.x、cssdb、@csstools/* 系列插件
Node.js 要求≥20.19（v11.x），≥18（v10.x）

快速上手

安装

# 安装 postcss-preset-env（必须同时安装 PostCSS）
npm install -D postcss postcss-preset-env
 
# 使用 pnpm
pnpm add -D postcss postcss-preset-env
 
# 使用 yarn
yarn add -D postcss postcss-preset-env

⚠️ 注意：postcss-preset-env 11.x 需要 Node.js ≥20.19 和 PostCSS 8.x。如果 Node.js 版本较低，请使用 v10.x（需要 Node ≥18）或 v9.x（支持 Node ≥14）。

基础配置

配置文件（推荐方式）

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env'),
  ],
}
// postcss.config.mjs（ESM 格式）
import postcssPresetEnv from 'postcss-preset-env'
 
export default {
  plugins: [
    postcssPresetEnv(),
  ],
}

自定义配置

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      // 启用哪个阶段的特性（默认 2）
      stage: 2,
 
      // 精确控制特定特性
      features: {
        'nesting-rules': true,
        'custom-properties': {
          preserve: false,
        },
        'focus-visible-pseudo-class': false,
      },
 
      // Autoprefixer 配置（内置）
      autoprefixer: {
        grid: true,
      },
 
      // 启用需要客户端 polyfill 的特性
      enableClientSidePolyfills: true,
    }),
  ],
}

Vite 集成

pnpm add -D postcss postcss-preset-env
// vite.config.js
import { defineConfig } from 'vite'
 
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('postcss-preset-env')({
          stage: 1,
          features: {
            'nesting-rules': true,
          },
        }),
      ],
    },
  },
})

webpack 集成

pnpm add -D postcss postcss-loader postcss-preset-env
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['postcss-preset-env', {
                    stage: 2,
                    autoprefixer: { grid: true },
                  }],
                ],
              },
            },
          },
        ],
      },
    ],
  },
}

CLI 使用

# 安装 CLI
npm install -D postcss-cli postcss-preset-env
 
# 处理文件
npx postcss input.css -o output.css
# 会自动读取 postcss.config.js 配置

最小示例

/* 输入 CSS（使用现代特性） */
:root {
  --main-color: #3498db;
}
 
.container {
  color: var(--main-color);
  display: flex;
  gap: 16px;
  padding: env(safe-area-inset-top, 16px);
}
 
/* 使用自定义媒体查询 */
@custom-media --mobile (width < 768px);
 
@container (min-width: 400px) {
  .card {
    display: grid;
  }
}
 
/* 使用颜色函数 */
.button {
  background: color-mix(in srgb, #3498db 50%, white);
}
 
/* 输出 CSS（转换后的兼容语法） */
:root {
  --main-color: #3498db;
}
 
.container {
  color: #3498db; /* 保留变量引用（preserve: true）或内联值 */
  display: flex;
  gap: 16px;
  padding: env(safe-area-inset-top, 16px);
}
 
@media (max-width: 767.98px) {
  /* --mobile 被替换为实际媒体查询 */
}
 
@container (min-width: 400px) {
  .card {
    display: grid;
  }
}
 
.button {
  background: rgba(136, 186, 225, 1); /* color-mix 被转换 */
}

核心概念与架构

CSS 特性阶段（Stages）

postcss-preset-env 使用 CSS 规范的成熟度来组织特性：

阶段名称含义风险
Stage 4Standardized已成为正式 Web 标准最低
Stage 3Embraced广泛采纳，接近标准化低
Stage 2Allowable被认为是可行的，正在制定中中（默认）
Stage 1Pending正在积极探索中较高
Stage 0Aspirational初步提案，尚在讨论最高

默认启用 Stage 2 及以上的特性。可以通过 stage 配置调整。

插件架构

postcss-preset-env 内部包含 60+ 个独立 PostCSS 插件，按功能分类：

postcss-preset-env/
├── 色彩处理
│   ├── postcss-color-function
│   ├── postcss-color-mix-function
│   ├── postcss-lab-function
│   ├── postcss-oklab-function
│   ├── postcss-hwb-function
│   ├── postcss-color-functional-notation
│   ├── postcss-gamut-mapping
│   ├── postcss-gradients-interpolation-method
│   └── postcss-relative-colors
├── 选择器处理
│   ├── postcss-is-pseudo-class
│   ├── css-has-pseudo
│   ├── css-blank-pseudo
│   ├── postcss-focus-visible
│   ├── postcss-focus-within
│   ├── postcss-nesting
│   ├── postcss-dir-pseudo-class
│   ├── css-prefers-color-scheme
│   └── postcss-selector-not
├── 布局与属性
│   ├── postcss-custom-properties
│   ├── postcss-custom-media
│   ├── postcss-media-minmax
│   ├── postcss-logical
│   ├── postcss-double-position-gradients
│   ├── postcss-gap-properties
│   └── postcss-page-break
├── 工具
│   ├── @csstools/postcss-cascade-layers
│   ├── @csstools/postcss-normalize-display-values
│   ├── @csstools/postcss-progressive-custom-properties
│   ├── @csstools/postcss-unset-value
│   └── autoprefixer（内置）
└── 其他
    ├── @csstools/postcss-trigonometric-functions
    ├── postcss-overflow-shorthand
    ├── postcss-place
    ├── postcss-pseudo-class-any-link
    └── postcss-clamp

cssdb 数据库

postcss-preset-env 依赖 cssdb 数据库来确定每个 CSS 特性所属的阶段。cssdb 是由 CSS Tools 组织维护的 CSS 特性状态数据库，记录了每个 CSS 特性的规范状态、浏览器实现情况和 polyfill 需求。

// cssdb 示例条目
{
  id: 'nesting-rules',
  title: 'Nesting Rules',
  specification: 'https://drafts.csswg.org/css-nesting-1/',
  stage: 2,
  browsers: { chrome: 120, firefox: 117, safari: 17.2 },
  tags: ['css-nesting'],
}

客户端 Polyfill 机制

部分 CSS 特性（如 :focus-visible、:has()、prefers-color-scheme）需要客户端 JavaScript 配合才能在旧浏览器中工作。postcss-preset-env 默认启用这些客户端 polyfill，并会输出警告信息提示需要安装对应的 JavaScript 库：

'postcss-preset-env: ":focus-visible" requires a client-side polyfill. ' +
'See https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible'

核心特性

1. CSS 自定义属性（Stage 3）

/* 输入 */
:root {
  --primary-color: #3498db;
}
 
.button {
  color: var(--primary-color);
  background: var(--primary-color, #ccc);
}
 
/* 输出（如果目标浏览器不支持 CSS 变量） */
.button {
  color: #3498db; /* 静态值替换 */
  background: #ccc; /* 使用 fallback 值 */
}

2. CSS 嵌套（Stage 2）

/* 输入 */
.nav {
  display: flex;
 
  &__item {
    padding: 8px 16px;
 
    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
 
    &--active {
      font-weight: bold;
    }
  }
}
 
/* 输出 */
.nav {
  display: flex;
}
.nav__item {
  padding: 8px 16px;
}
.nav__item:hover {
  background: rgba(0, 0, 0, 0.1);
}
.nav__item--active {
  font-weight: bold;
}

3. 颜色函数（Stage 2）

/* color-mix() */
.button {
  background: color-mix(in srgb, #3498db 50%, white);
}
/* 输出 */
.button {
  background: rgb(153, 199, 237);
}
 
/* lab() / lch() / oklab() / oklch() */
.element {
  color: oklch(59.69% 0.156 49.77);
}
/* 输出（转换为 rgb） */
.element {
  color: rgb(234, 89, 46);
}
 
/* color() */
.element {
  color: color(display-p3 1 0.5 0);
}
/* 输出（可能需要 gamut mapping） */
.element {
  color: rgb(255, 111, 0);
}
 
/* light-dark() */
:root {
  color-scheme: light dark;
}
.element {
  color: light-dark(#333, #eee);
}
/* 输出 */
@media (prefers-color-scheme: light) {
  .element { color: #333; }
}
@media (prefers-color-scheme: dark) {
  .element { color: #eee; }
}

4. 自定义媒体查询（Stage 2）

/* 输入 */
@custom-media --mobile (width < 768px);
@custom-media --tablet (768px <= width < 1024px);
@custom-media --desktop (width >= 1024px);
 
@media (--mobile) {
  .container { width: 100%; }
}
 
@media (--tablet) {
  .container { width: 750px; }
}
 
@media (--desktop) {
  .container { width: 1000px; }
}
 
/* 输出 */
@media (max-width: 767.98px) {
  .container { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .container { width: 750px; }
}
@media (min-width: 1024px) {
  .container { width: 1000px; }
}

5. 媒体查询范围语法（Stage 4）

/* 输入 */
@media (width >= 768px) {
  .container { max-width: 750px; }
}
 
@media (100px <= width <= 600px) {
  .element { font-size: 14px; }
}
 
/* 输出 */
@media (min-width: 768px) {
  .container { max-width: 750px;
}
@media (min-width: 100px) and (max-width: 600px) {
  .element { font-size: 14px;
}

6. 逻辑属性（Stage 2）

/* 输入 */
.element {
  margin-inline-start: 16px;
  padding-block: 8px;
  border-inline-end: 1px solid #ccc;
  inset-inline: 0;
}
 
/* 输出（对于不支持逻辑属性的浏览器） */
[dir=ltr] .element {
  margin-left: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-right: 1px solid #ccc;
  left: 0;
  right: 0;
}
[dir=rtl] .element {
  margin-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-left: 1px solid #ccc;
  left: 0;
  right: 0;
}

7. Cascade Layers（Stage 2）

/* 输入 */
@layer base, components, utilities;
 
@layer base {
  a { color: blue; }
}
 
@layer components {
  .button { padding: 8px 16px; }
}
 
@layer utilities {
  .hidden { display: none; }
}
 
/* 输出（对于不支持 @layer 的浏览器） */
/* @layer 被展开为等价的优先级选择器 */

8. :is() 和 :has() 伪类（Stage 2）

/* :is() 输入 */
:is(h1, h2, h3) {
  font-weight: bold;
}
 
/* :is() 输出 */
h1, h2, h3 {
  font-weight: bold;
}
 
/* :has() 需要客户端 polyfill */
.card:has(.image) {
  border: 1px solid #ccc;
}

9. 数学函数（Stage 2）

/* 三角函数 */
.element {
  transform: rotate(sin(45deg) * 1turn);
  width: calc(100px * cos(30deg));
}
 
/* 指数函数 */
.element {
  font-size: calc(16px * pow(1.2, 2));
  width: calc(100px * sqrt(2));
}
 
/* 符号函数 */
.element {
  width: calc(100px * sign(var(--x)));
}
 
/* random() 函数 */
.element {
  opacity: random(0.5, 1);
}

10. Focus Visible 伪类（Stage 2）

/* 输入 */
.button:focus-visible {
  outline: 2px solid #3498db;
}
 
/* 输出（需要客户端 JS polyfill） */
.button.js-focus-visible:focus {
  outline: 2px solid #3498db;
}
/* 同时输出 .focus-visible 类供 JS 使用 */
# 需要安装客户端 polyfill
npm install focus-visible
// 在入口文件中导入
import 'focus-visible'

生态图

postcss-preset-env 生态系统
├── 核心依赖
│   ├── postcss（CSS 处理引擎）
│   ├── cssdb（CSS 特性数据库）
│   ├── browserslist（浏览器版本查询）
│   └── @csstools/* 系列插件（60+ 个独立插件）
├── 内部插件分类
│   ├── 色彩处理（10+ 个插件）
│   ├── 选择器处理（10+ 个插件）
│   ├── 媒体查询（3+ 个插件）
│   ├── 布局属性（10+ 个插件）
│   └── 工具插件（5+ 个插件）
├── 构建工具集成
│   ├── Vite（postcss.config.js）
│   ├── webpack（postcss-loader）
│   ├── Gulp（gulp-postcss）
│   ├── Parcel（内置支持）
│   └── Next.js（内置支持）
├── 配合使用的工具
│   ├── autoprefixer（内置，可配置）
│   ├── cssnano（CSS 压缩）
│   ├── postcss-import（@import 处理）
│   └── stylelint（CSS 代码检查）
├── CSS Tools 组织
│   ├── csstools/postcss-plugins（仓库）
│   ├── cssdb.org（特性数据库）
│   ├── @csstools/* npm 包（统一发布）
│   └── PostCSS Plugin Directory（插件目录）
└── 相关项目
    ├── @babel/preset-env（JavaScript 对等工具）
    ├── core-js（JavaScript polyfill）
    └── Modernizr（浏览器特性检测）

适用场景

1. 使用现代 CSS 特性

postcss-preset-env 让你可以在项目中使用最新的 CSS 特性，而不必等待所有浏览器原生支持：

/* 使用 CSS 嵌套（浏览器支持有限） */
.nav {
  &__item {
    padding: 8px;
  }
}
 
/* 使用颜色函数（新特性） */
.button {
  background: color-mix(in srgb, var(--primary) 80%, white);
}
 
/* 使用容器查询（新特性） */
.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card-body { display: grid; }
}

2. 渐进增强

通过合理的 Stage 配置，实现渐进增强策略：

// 保守配置：只使用稳定特性
require('postcss-preset-env')({ stage: 3 })
 
// 平衡配置：使用可行特性（默认）
require('postcss-preset-env')({ stage: 2 })
 
// 激进配置：使用实验特性
require('postcss-preset-env')({ stage: 1 })

3. 替代 Sass 预处理器

对于许多项目，postcss-preset-env 提供的特性可以替代 Sass：

Sass 功能postcss-preset-env 替代
变量 $varCSS 自定义属性 var(--var)
嵌套 &CSS 嵌套 &
@if/@else@media、@supports、@container
color-mix()color-mix() 函数
lighten()/darken()color(), oklch()

4. 团队样式标准化

通过统一的 Stage 配置，确保团队使用一致水平的 CSS 特性，避免使用过于实验性的语法。

5. 与 Babel 配合使用

postcss-preset-env 之于 CSS 就像 @babel/preset-env 之于 JavaScript——两者可以配合使用，实现完整的现代 Web 开发体验：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-preset-env')({ stage: 2 }),
  ],
}
 
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { browsers: ['> 1%', 'last 2 versions'] },
    }],
  ],
}

6. Tailwind CSS 增强

与 Tailwind CSS 配合使用，让 Tailwind 的自定义 CSS 也能使用现代特性：

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 2 }),
    require('autoprefixer'),
  ],
}

7. 国际化/多语言布局

通过逻辑属性 polyfill 支持 RTL（从右到左）布局：

/* 使用逻辑属性 */
.sidebar {
  margin-inline-start: 16px;
  padding-inline: 8px;
  inset-inline-start: 0;
}
 
/* postcss-preset-env 自动转换为物理属性 */

开发与工程化

推荐配置

// postcss.config.js（完整生产配置）
const isProduction = process.env.NODE_ENV === 'production'
 
module.exports = {
  plugins: [
    // 1. 导入处理
    require('postcss-import'),
 
    // 2. 现代 CSS 特性
    require('postcss-preset-env')({
      // 启用 Stage 2+ 特性
      stage: 2,
 
      // 精确控制特性
      features: {
        'nesting-rules': true,
        'custom-properties': {
          preserve: false, // 编译后移除 CSS 变量声明
        },
        'focus-visible-pseudo-class': true,
        'color-mix-function': true,
      },
 
      // Autoprefixer 配置
      autoprefixer: {
        grid: 'autoplace',
      },
 
      // 启用客户端 polyfill（需要安装对应 JS 包）
      enableClientSidePolyfills: true,
    }),
 
    // 3. 生产压缩
    isProduction && require('cssnano')({
      preset: ['default', {
        discardComments: { removeAll: true },
      }],
    }),
  ].filter(Boolean),
}

客户端 Polyfill 安装

当启用需要客户端 polyfill 的特性时，需要安装对应的 npm 包：

# :focus-visible 支持
npm install focus-visible
 
# :has() 支持
npm install css-has-pseudo
 
# prefers-color-scheme 支持
npm install css-prefers-color-scheme
 
# :blank 支持
npm install css-blank-pseudo
// 在入口文件中导入
import 'focus-visible'
import 'css-has-pseudo/browser'
import 'css-prefers-color-scheme/browser'
import 'css-blank-pseudo/browser'

CI/CD 集成

# GitHub Actions
- name: Install dependencies
  run: pnpm install
 
- name: Build CSS
  run: npx postcss src/styles/main.css -o dist/styles/main.css
 
- name: Check CSS compatibility
  run: npx doiuse --browsers "> 1%, last 2 versions" dist/styles/main.css

与 TypeScript 配合

// 如果使用 TypeScript，需要配置声明
// types/postcss-preset-env.d.ts
declare module 'postcss-preset-env' {
  import { PluginCreator } from 'postcss'
  const plugin: PluginCreator<Options>
  export default plugin
}

性能与安全

性能特点

  • 插件数量影响：启用的插件越多，编译时间越长
  • Stage 配置影响：Stage 0 启用最多插件，编译最慢
  • 客户端 polyfill 开销：需要额外加载 JavaScript polyfill
  • 缓存友好：构建工具通常缓存处理结果

性能优化建议

  • 根据项目需要合理设置 Stage，不要盲目使用最低 Stage
  • 使用 features 精确控制启用的特性，禁用不需要的插件
  • 生产环境合理设置 preserve: false 减少 CSS 变量声明
  • 定期查看编译输出的 CSS 体积

安全注意事项

  • 客户端 polyfill 安全：确保安装的 JS polyfill 来自可信源
  • CSS 注入风险：避免将用户输入直接注入 CSS 变量
  • 数据源可信度：cssdb 数据库由 CSS Tools 组织维护，可信度高
  • 依赖审查：定期检查 60+ 个内部插件的安全更新

技术对比

特性postcss-preset-envSass/SCSSLess原生 CSS
定位CSS 新特性 polyfillCSS 预处理器CSS 预处理器标准 CSS
变量CSS 自定义属性Sass 变量 $varLess 变量 @varCSS 变量
嵌套CSS 嵌套规范Sass 嵌套Less 嵌套原生嵌套
MixinCSS @mixin（新规范）@mixin + @include.mixin()无
颜色函数color-mix(), oklch()lighten(), darken()lighten(), darken()color-mix(), oklch()
条件/循环无（CSS 原生不支持）@if/@for/@eachwhen/递归无
浏览器兼容自动 polyfill不处理不处理需手动处理
编译速度中等中等快快
客户端依赖部分特性需要 JS无无无
学习曲线低（标准 CSS）中等低最低
未来兼容性使用最新 CSS 规范独立语法独立语法依赖浏览器

最佳实践

1. 合理设置 Stage

// ✅ 推荐：使用默认 Stage 2（平衡现代性和稳定性）
require('postcss-preset-env')({ stage: 2 })
 
// ✅ 保守项目：只使用 Stage 3+（最稳定）
require('postcss-preset-env')({ stage: 3 })
 
// ❌ 避免：使用 Stage 0（太不稳定）
require('postcss-preset-env')({ stage: 0 })

2. 精确控制特性

// ✅ 推荐：按需启用/禁用特性
require('postcss-preset-env')({
  stage: 2,
  features: {
    // 明确启用需要的特性
    'nesting-rules': true,
    'custom-media-queries': true,
    // 明确禁用不需要的特性
    'focus-visible-pseudo-class': false,
    'focus-within-pseudo-class': false,
    // 配置特定特性行为
    'custom-properties': { preserve: false },
  },
})

3. 不要同时使用 Sass 和 postcss-preset-env 的相同功能

/* ❌ 避免：同时使用 Sass 嵌套和 CSS 嵌套 */
$primary: #3498db;  /* Sass 变量 */
 
.nav {
  color: $primary;
  &__item {        /* Sass 嵌套（已被 Sass 编译） */
    padding: 8px;
  }
}
 
/* ✅ 推荐：选择一种方案 */
/* 方案 A：使用 Sass（变量 + 嵌套 + Mixin） */
$primary: #3498db;
.nav {
  color: $primary;
  &__item { padding: 8px; }
}
 
/* 方案 B：使用 postcss-preset-env（CSS 变量 + CSS 嵌套） */
:root { --primary: #3498db; }
.nav {
  color: var(--primary);
  & .nav__item { padding: 8px; }
}

4. 搭配 Browserslist

// package.json
{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

postcss-preset-env 会根据 Browserslist 配置决定哪些特性需要 polyfill。如果目标浏览器已经支持某特性，就不会转换。

5. 客户端 Polyfill 按需安装

// 查看哪些特性需要客户端 polyfill
// 在构建日志中查看警告信息
 
// 按需安装需要的 polyfill
// 不要安装所有 polyfill，只安装实际使用的

6. 与 Autoprefixer 配合

// ✅ 推荐：postcss-preset-env 已内置 Autoprefixer
require('postcss-preset-env')({
  autoprefixer: {
    grid: 'autoplace',
  },
})
 
// 或者禁用内置的，使用独立的 Autoprefixer
require('postcss-preset-env')({
  autoprefixer: false,
}),
require('autoprefixer')({
  grid: 'autoplace',
})

技术局限与边界

已知限制

  1. 不提供编程能力：不像 Sass/Less 提供条件、循环、Mixin 等编程能力
  2. 部分特性需要 JS：某些 CSS 特性（如 :focus-visible、:has()）需要客户端 JavaScript polyfill
  3. 编译输出可能冗余：某些特性的 polyfill 输出可能比原始 CSS 大很多
  4. Stage 0-1 不稳定：低 Stage 的特性可能随规范变化而改变
  5. 插件数量影响性能：60+ 个插件全部启用时编译速度较慢
  6. Node.js 版本要求：v11.x 需要 Node.js ≥20.19

不适用场景

  • 需要 Sass/Less 编程能力 → 使用 Sass 或 Less
  • 只需要浏览器前缀 → 单独使用 Autoprefixer
  • 追求极致编译速度 → 考虑 Lightning CSS
  • 组件库开发 → 组件库通常使用 Sass/Less 管理主题变量
  • 纯静态样式 → 不需要 polyfill 时可直接使用原生 CSS

迁移注意事项

  • 从 Sass 迁移：CSS 变量替代 Sass 变量，CSS 嵌套替代 Sass 嵌套
  • Stage 调整：迁移时先使用 Stage 3，逐步降低到 Stage 2
  • 客户端 polyfill：需要安装对应的 JS 包
  • 性能影响：监控编译时间和输出体积变化

学习资源

官方资源

教程

社区资源

相关项目

2026 年现状

版本状态

  • 稳定版：postcss-preset-env 11.1.0（2026 年 1 月）
  • 重大变更：v11.0.0 要求 Node.js ≥20.19，移除了 CommonJS API
  • v10.x：仍可用，要求 Node.js ≥18

发展趋势

  • CSS 原生能力增强：浏览器原生 CSS 能力快速增强，部分 polyfill 的必要性在降低
  • 持续跟进新规范：随着 CSS 新特性的标准化，postcss-preset-env 持续添加新的插件
  • 性能优化：内部插件持续优化，减少不必要的转换
  • 与 Lightning CSS 竞争：Lightning CSS 也提供类似的 polyfill 功能，但 postcss-preset-env 的插件生态更丰富

社区活跃度

  • npm 周下载量约 3000 万次
  • CSS Tools 组织活跃维护，频繁发布更新
  • 60+ 个内部插件由社区共同维护
  • 与 @babel/preset-env 形成 JavaScript/CSS 的互补生态

未来路线图

  • 持续添加新特性：跟进 CSS 规范的发展，添加新的 polyfill 插件
  • 性能优化：减少编译时间，优化输出体积
  • Node.js 版本升级：随 Node.js 生态升级最低版本要求
  • 客户端 polyfill 减少：随着浏览器支持度提升，需要 JS polyfill 的特性会逐渐减少
  • CSS Mixin 支持：CSS @mixin 规范仍在制定中，postcss-preset-env 可能会在未来添加支持