PostCSS 与现代 CSS 工作流

PostCSS 是一个用 JavaScript 转换 CSS 的工具。它不是预处理器，而是一个 CSS 处理平台，通过插件系统扩展功能。PostCSS 已经成为现代 CSS 工作流的核心工具，被许多构建工具和框架使用。本章将介绍 PostCSS 的概念、作用和在现代开发中的重要性。

PostCSS 是什么

核心概念

PostCSS 是一个工具平台，不是预处理器：

• 不是预处理器：不提供变量、嵌套等语法扩展
• 是转换工具：通过插件处理 CSS
• 插件系统：功能由插件提供
• JavaScript 驱动：基于 Node.js

工作流程

CSS 代码
    ↓
PostCSS + 插件
    ↓
处理后的 CSS
    ↓
浏览器

它解决的问题

1. 浏览器兼容性

问题：新 CSS 特性需要浏览器前缀

/* 需要写多个前缀 */
.button {
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}

解决方案：Autoprefixer 插件自动添加前缀

/* 只需写标准语法 */
.button {
  transform: translateX(10px);
}

/* PostCSS + Autoprefixer 自动处理 */

2. 使用未来 CSS 特性

问题：想使用尚未广泛支持的 CSS 特性

解决方案：使用 PostCSS 插件提前使用

/* 使用未来语法 */
:root {
  --primary-color: #007bff;
}

.button {
  background: color-mix(in srgb, var(--primary-color) 50%, white);
}

/* PostCSS 插件转换为兼容代码 */

3. CSS 优化

问题：CSS 代码需要优化

解决方案：使用优化插件

• cssnano：压缩 CSS
• purgecss：移除未使用的 CSS
• cssnano：优化和压缩

4. 代码检查

问题：CSS 代码需要规范和检查

解决方案：使用 lint 插件

• stylelint：CSS 代码检查
• postcss-reporter：报告问题

常见插件能力简介

1. Autoprefixer（自动添加前缀）

最常用的 PostCSS 插件，自动添加浏览器前缀。

/* 输入 */
.button {
  display: flex;
  transform: translateX(10px);
}

/* 输出（Autoprefixer） */
.button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

2. PostCSS Preset Env（使用未来特性）

允许使用未来的 CSS 特性。

/* 输入 */
:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

/* 输出（转换为兼容代码） */
.button {
  background-color: #007bff;
}

3. cssnano（压缩优化）

压缩和优化 CSS 代码。

/* 输入 */
.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

/* 输出（压缩后） */
.button{background-color:#007bff;color:#fff;padding:10px 20px}

4. PostCSS Nested（嵌套支持）

支持 CSS 嵌套语法。

/* 输入 */
.navbar {
  background-color: white;
  
  .menu {
    display: flex;
  }
}

/* 输出 */
.navbar {
  background-color: white;
}

.navbar .menu {
  display: flex;
}

5. PostCSS Import（导入支持）

支持 @import 语句。

/* main.css */
@import 'variables.css';
@import 'components.css';

/* 合并为一个文件 */

与构建工具的关系

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                  require('cssnano')
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

Vite

// vite.config.js
export default {
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('cssnano')
      ]
    }
  }
}

独立使用

# 安装
npm install -D postcss postcss-cli autoprefixer cssnano

# 使用
postcss input.css -o output.css

对初学者的建议

是否需要学习

需要了解的情况：

• 使用现代构建工具（Webpack、Vite 等）
• 需要处理浏览器兼容性
• 想使用未来 CSS 特性
• 需要优化 CSS 代码

可以不深入学习的情况：

• 只写纯 CSS
• 使用简单的开发环境
• 不需要构建工具

学习建议

1. 理解概念：PostCSS 是工具平台，不是预处理器
2. 了解常用插件：Autoprefixer、cssnano 等
3. 实践使用：在项目中配置和使用
4. 关注生态：了解新的插件和工具

实际使用

大多数现代项目已经集成了 PostCSS：

• Create React App：内置 PostCSS
• Vue CLI：内置 PostCSS
• Next.js：内置 PostCSS
• Vite：内置 PostCSS

你通常不需要手动配置，但了解其工作原理有助于：

• 理解构建过程
• 解决兼容性问题
• 优化构建配置
• 使用新特性

小结

PostCSS 是现代 CSS 工作流的核心：

• 核心概念：工具平台，不是预处理器
• 主要作用：浏览器兼容、使用未来特性、优化代码
• 插件系统：功能由插件提供
• 构建工具：集成在 Webpack、Vite 等工具中
• 学习建议：了解概念和常用插件

关键要点：

• PostCSS 是工具平台
• Autoprefixer 是最常用插件
• 大多数构建工具已集成
• 了解原理有助于解决问题

理解了 PostCSS，你就能更好地理解现代 CSS 开发流程。在接下来的附录部分，我们将提供 CSS 的实用参考和速查表。