create-react-app 的 CSS 后处理机制：Autoprefixer、browserslist 与 PostCSS 插件链解析

create-react-app 默认对应用中的 CSS 做两类自动后处理：压缩（minify）和添加浏览器厂商前缀（vendor prefixing），并自动为新 CSS 特性做降级 polyfill，开发者无需手写 /* autoprefixer */ 注释或手动维护前缀。本篇围绕 create-react-app 官方文档 Post-Processing CSS 展开，结合 react-scripts 中 webpack 配置与 react-dev-utils 的浏览器目标校验源码，讲清这套机制的完整工作原理、如何按 Browserslist 规范定制目标浏览器，以及 CSS Grid 前缀的默认关闭与按需开启方式。

一、CSS 后处理在构建流程中的位置

create-react-app 项目中，所有 .css / .scss / .sass 文件在 webpack 构建时都会经过一条由 getStyleLoaders 统一装配的 loader 链。该函数定义在 webpack.config.js 中，从源码结构看，loader 从后往前依次是：

1. 预处理 loader（仅 Sass 文件）：sass-loader 编译 .scss / .sass 为纯 CSS，前置 resolve-url-loader 处理其中的相对路径；
2. postcss-loader：执行 PostCSS 插件链，完成前缀添加与新特性 polyfill（本文核心）；
3. css-loader：解析 CSS 中的 url() 与 @import，把资源依赖交给 webpack；
4. 输出 loader：开发环境用 style-loader 把 CSS 注入 <style> 标签以支持热更新；生产环境用 MiniCssExtractPlugin.loader 抽取为独立 CSS 文件。

压缩能力则由生产构建引入的 css-minimizer-webpack-plugin 提供（见 react-scripts/package.json 依赖列表），因此文档中"项目会自动压缩你的 CSS"这一承诺由 webpack 生产构建直接兑现，无需额外配置。

二、PostCSS 插件链：前缀 + 新特性 polyfill

postcss-loader 的插件配置位于 webpack.config.js，默认（非 Tailwind 项目）按以下顺序执行三个插件：

plugins: [
  'postcss-flexbugs-fixes',
  [
    'postcss-preset-env',
    {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
    },
  ],
  // 以 PostCSS Normalize 作为 reset css，
  // 它会遵循 package.json 中的 browserslist 配置
  'postcss-normalize',
]

各插件的职责：

• postcss-flexbugs-fixes：修复各浏览器 Flexbox 实现中的已知 bug（文档中的前缀示例即与此相关）；

• postcss-preset-env（stage 3）：内含 Autoprefixer，负责根据目标浏览器列表自动添加厂商前缀；同时对新 CSS 特性做自动 polyfill。文档明确列举了被自动降级的特性：

  • all 属性（CSS shorthand reset）；
  • break 系列属性（break-inside / break-before / break-after，对应分页控制规范）；
  • 自定义属性（CSS Variables，--var 与 var()）；
  • 媒体查询范围语法（media query ranges，如 @media (width >= 400px)）。

  这些特性在旧浏览器中的等价写法都会被自动补出，开发者只需书写标准语法。

• postcss-normalize：以现代版 Normalize 作为 reset CSS，同样遵循 package.json 里的 browserslist 配置，让不同浏览器的默认样式差异在构建期就被抹平。

值得注意的是 autoprefixer: { flexbox: 'no-2009' } 这一选项：它告诉 Autoprefixer 只为 Flexbox 2012 规范添加 -ms- 等前缀，而跳过早已淘汰的 2009 规范前缀，从而避免产物中出现一堆无意义的双重前缀。另外，从源码结构看，当项目根目录存在 tailwind.config.js 时（useTailwind 判断），插件链会在最前面插入 tailwindcss，且此时不再执行 postcss-normalize，以避免 Normalize 与 Tailwind 的 preflight reset 互相冲突。

三、输入输出示例：一段 Flexbox 的前缀化

文档给出的经典示例：输入

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

经过 Autoprefixer 后（在默认 browserslist 目标下）输出为：

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

可以清楚看到：标准声明保留在最后，-ms-、-webkit- 前缀按浏览器兼容性顺序追加在前。前缀种类完全由目标浏览器列表决定——浏览器越老，前缀越多，产物越大。

四、定制目标浏览器：browserslist 键

前缀"加多少"取决于目标浏览器，而目标浏览器由项目 package.json 中的 browserslist 键控制（遵循 Browserslist 规范）。create-react-app 对这一点的处理在源码层面非常明确：

1. 新应用初始化时自动写入默认值

scripts/init.js 在生成新项目时会执行 appPackage.browserslist = defaultBrowsers，默认值定义在 browsersHelper.js：

const defaultBrowsers = {
  production: ['>0.2%', 'not dead', 'not op_mini all'],
  development: [
    'last 1 chrome version',
    'last 1 firefox version',
    'last 1 safari version',
  ],
};

即生产环境覆盖"全球份额 > 0.2% 且未死亡"的浏览器（排除 Opera Mini），开发环境只关注 Chrome / Firefox / Safari 的最新版本——开发机跑最新浏览器即可，无需为老浏览器膨胀前缀。这个区分由 webpack 的 mode 决定：webpack.config.js 中 target: ['browserslist'] 会让 webpack 本身也按 environments（production/development）自动选择对应列表，Browserslist 规范原生支持这种按环境分组写法。

2. 构建前强制校验

从 react-scripts 2 起，browserslist 是必填项，不再静默回退到 Browserslist 内置默认值。scripts/build.js 与 scripts/start.js 在启动构建前都会先调用 checkBrowsers(paths.appPath, isInteractive)。查看 browsersHelper.js 中的实现：

• 若能从项目目录加载到 browserslist 配置，直接通过；
• 若缺失且处于交互式终端，会弹出黄色提示询问是否把默认值写回 package.json（借助 pkg-up 向上查找最近的 package.json，写入后 browserslist.clearCaches() 并打印 Set target browsers 提示）；
• 若缺失且拒绝写入（或非交互环境），直接报错退出：As of react-scripts >=2 you must specify targeted browsers.

3. 修改目标浏览器

按 Browserslist 规范语法修改 package.json 即可，例如：

{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  }
}

也可写成单一列表（如 ["defaults"] 或 ["last 2 versions"]）。由于 postcss-preset-env、postcss-normalize 与 webpack 的 target 都消费同一份配置，改一处即全局生效，下次 npm start / npm run build 自动应用。

五、关闭或跳过自动前缀

个别声明可能已被确认无需前缀（例如自己维护的 polyfill 方案，或前缀反而引发 bug），Autoprefixer 提供注释级控制开关，直接在 CSS 中使用：

• 关闭单个选择器/声明块：

  /* autoprefixer: off */
  .App {
    display: flex; /* 不会被添加 -webkit- / -ms- 前缀 */
  }
  /* autoprefixer: on */
  

• 跳过紧接着的一条声明：

  .App {
    /* autoprefixer: ignore next */
    display: flex;
  }
  

这些注释属于 Autoprefixer 的通用约定，对 postcss-preset-env 内置的 Autoprefixer 同样生效。

六、CSS Grid 前缀：默认关闭，注释开启

CSS Grid 的厂商前缀（-ms-grid-*）默认不被添加，但 Autoprefixer 不会剥离你手写的前缀——如果你已手动写了 -ms-grid-rows 等 IE 11 语法，产物会原样保留。

若确实需要让 Autoprefixer 自动为 CSS Grid 添加前缀，把这一行注释放到 CSS 文件顶部：

/* autoprefixer grid: autoplace */

开启前必须了解其局限：Autoprefixer 基于 CSS 文本转换 Grid，无法表达 IE 中所有 Grid 布局能力（例如复杂的跨行跨列、隐式网格），对 IE 11 的支持并不完整，且 grid-template 等简写属性在部分旧浏览器上根本无法降级。文档明确建议先评估这些局限再决定是否开启。对绝大多数面向现代浏览器的应用，保持默认关闭是更稳妥的选择。

七、关键源码索引

关注点	文件位置
loader 链装配与 PostCSS 插件配置	packages/react-scripts/config/webpack.config.js#L118-L177
Tailwind 项目下的插件链差异	packages/react-scripts/config/webpack.config.js#L71-L74
webpack 按 browserslist 选择编译目标	packages/react-scripts/config/webpack.config.js#L200
默认 browserslist 值与构建前校验	packages/react-dev-utils/browsersHelper.js
初始化项目时写入 browserslist	packages/react-scripts/scripts/init.js#L211-L212
构建前调用 checkBrowsers	packages/react-scripts/scripts/build.js#L60-L64

小结：create-react-app 的 CSS 后处理 = postcss-flexbugs-fixes + postcss-preset-env（Autoprefixer，stage 3，flexbox 限定 no-2009）+ postcss-normalize 三件套，运行在 postcss-loader 上，前缀范围由 package.json 的 browserslist 键唯一决定；新特性（all、break、自定义属性、媒体查询范围）自动降级，CSS Grid 前缀默认关闭、可按文件以 /* autoprefixer grid: autoplace */ 开启。理解这条插件链后，你既能解释产物中出现的每个 -ms- / -webkit- 前缀从何而来，也能通过调整 browserslist 精确控制兼容范围与产物体积。