进阶篇：postcss的插件机制

在讲解postcss中插件机制之前，我们先来看一下在日常的工作是如何使用postcss的，了解postcss具体能干哪些事。

虽然postcss在为我们提供了完整的命令系统帮助我们使用，但在日常的开发中如果单纯的使用postcss可能意义不大，因此我们一般是与打包工具进行配合一起在项目中使用，目前主流的前端打包工具有：webpack 和 vite。

下面我们就以webpack为例演示一下如何在其使用postcss。

在讲解内容之前我们先来说一下关于打包工具的相关说明，前端打包工具其复杂程度完全可以新开一系列文章进行讲解，也是前端开发者必备的技能之一， 但由于本系列文章主要讲解是css相关的知识，所以关于webpack 和 vite 相关的知识，暂不做详细介绍。如果您对这方面不熟悉的话，建议先去官网大体了解一下相关的概念。当然也可以继续阅读，只关心postcss的部分即可。
 

打包工具的作用

我们先来看一下其在web开发中的主要作用。正如我们所知，现在浏览器并不能识别高阶的javascript语法及各种css预处理器语法，而且随着项目的不断增大，模块化开发也越来越重要。因此需要打包工具帮助我们把一个个分散的模块组织成一个完整的js、css及html 代码。当然打包工具的作用还有好多，我们来简单的梳理一下：

前端打包工具是用于将前端项目中的各种资源文件（如HTML、CSS、JavaScript、图像等）进行打包和优化的工具。它主要有以下几个作用：

• 模块化管理：打包工具可以将前端代码按照模块的方式组织起来，提供了模块化的开发方式，可以将代码分割成多个独立的模块，方便进行代码的拆分和复用。

• 资源优化：通过打包工具，可以对静态资源进行压缩、合并等优化操作，减小文件大小，提高加载速度，从而优化页面性能。例如，可以将多个CSS或JavaScript文件合并成一个文件，减少HTTP请求次数。

• 依赖管理：前端打包工具可以自动解析代码中的依赖关系，并将依赖的模块打包到最终的输出文件中。这样可以方便地管理和引用各个模块之间的依赖关系，避免手动管理依赖带来的麻烦。

• 转译和编译：打包工具可以支持使用新的JavaScript语法（如ES6、TypeScript）、CSS预处理器（如Sass、Less）等，通过转译和编译将其转换为浏览器可识别的代码格式。这使开发者可以在项目中使用最新的技术和语法，提高开发效率。

• 自动刷新和热模块替换：通过打包工具的开发服务器，可以实现自动刷新浏览器页面，及时展示代码修改的效果。某些打包工具还支持热模块替换（HMR），在不刷新整个页面的情况下，只替换发生改变的模块，提供更快速的开发体验。

• 代码分割和按需加载：打包工具支持将代码分割成多个块（chunks），实现按需加载，根据用户实际需要动态加载代码块，减少初始加载时间，优化用户体验。

正因为这些打包工具的出现才使得我们在开发中能够进行模块化和插件式开发，包括我们要讲解的CSS亦是如此，虽然CSS相对语法简单，但是真正能够做到工程化式开发也是需要我们付出些许精力去学习。

在Webpack使用Postcss

我们快速的创建一个webpack 项目。目录结构如下：

项目运行结果也比较简单，如下图：

我们只关注一下与css 和 postcss 相关的文件：

• ./src/input.css

  这个文件是存在样式的主要文件，我们把项目的中的样式都放到该文件中。

• postcss.config.js

  该文件顾名思义就是postcss 的配置文件，在postcss引擎运行的时候，会自动加载该配置文件，该文件主要是配置postcss运行时需要的插件。插件是postcss的灵魂，关于插件的更多内容后面会进行讲解。在该配置文件中我们只配置了一个插件 autoprefixer 插件。

./src/input.css 文件内容

* {  margin: 0;  padding: 0;}
body {  background-color: pink;}
#app {  width: 100%;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;}

样式比较简单，需要注意的是 #app 选择器中的 display:flex 相关的样式，我们知道关于 flex 存在兼容性问题，如果没有加上特殊的浏览器厂商前缀的话可能在有些浏览器有问题，但是如果在所有的有兼容性的样式上加上所有的浏览器厂商前缀的话是一个非常繁杂而没有技术含量的工作，所以这个时候postcss 和其 autoprefixer 插件就显现出了非常重要的作用，通过对postcss的简单配置我们就可以对上面的css进行兼容性处理。当然我们还需要在webpack中对postcss进行配置。

webpack.config.js

先安装好postcss相关的所有需要的依赖：

npm install postcss postcss-loader -D

在安装好依赖之后，我们再来看一下webpack.config.js的配置，

const HtmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')module.exports = {    entry: './src/index.js',    output: {      filename: 'bundle.js',      path: path.resolve(__dirname, 'dist')    },    module: {      rules: [        {          test: /\.css$/,          use: [            'style-loader',            'css-loader',            'postcss-loader'          ]        }      ]    },    plugins: [      new HtmlWebpackPlugin({        template: './index.html'      })    ]  };

我们先只看一下 module的配置

module: {    rules: [      {        test: /\.css$/,        use: [          'style-loader',          'css-loader',          'postcss-loader'        ]      }    ]  },

这部分代码的意思就是，当项目中遇到有以 .css 结尾的文件时，需要使用 use 中配置的加载器去加载文件，换句话说就是我们项目的css文件会被postcss-loader、css-loader、style-loader依次去解析（这里的执行顺序是从下往上或者说从右往左依次去执行）。

三者的具体作用如下

1. postcss-loader：用于在构建过程中对CSS进行后处理。它可以结合PostCSS插件来实现一些自动化的CSS处理，例如添加浏览器前缀、压缩CSS等。通过配置postcss.config.js文件，可以引入并配置各种PostCSS插件来处理CSS代码。

2. css-loader：css-loader是一个webpack加载器，用于解析CSS文件中的import、url等语句，可以处理CSS中的@import和url()等语法规则，并将其转换为webpack能够理解的模块依赖关系。在构建过程中，css-loader会将CSS文件转化为一个JavaScript模块，模块中包含了CSS代码的字符串，以便其他加载器或插件对其进一步处理。

3. style-loader：style-loader是一个webpack加载器，用于将CSS模块的样式通过动态创建style标签的方式插入到HTML文件中。在构建过程中，style-loader会将css-loader生成的CSS模块的样式通过style标签动态添加到页面上，使样式生效。​​​​​​​

postcss.config.jsmodule.exports = {  plugins: {    'autoprefixer': {      overrideBrowserslist: [        "Android 4.1",        "iOS 7.1",        "Chrome > 31",        "ff > 31",        "ie >= 8"        //'last 2 versions', // 所有主流浏览器最近2个版本      ],      grid: true    }  }};

该配置文件也是和webpack.config.js一样放在我们项目的根目录下，其主要作用配置postcss在执行的时候需要哪些插件去处理css代码。

该配置文件中只配置了 autoprefixer 这一个插件，并对其进行了 overrideBrowserlist 属性设置，autoprefixer该插件的主要作用是配置浏览器适用范围的，比如只对 ie浏览器版本大于等于 8 的版本要进行兼容性处理。

在了解所需要的配置文件之后，我们看一下具体的css代码及处理后的代码

在postcss处理之前的样式：​​​​​​​

#app {  width: 100%;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;}在经过webpack 打包 和 postcss 处理之后的样式：#app {  width: 100%;  height: 100vh;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;  -webkit-justify-content: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;}

可以看出最终的样式postcss已经为我们自动把浏览器厂商前缀添加上了，这样以后我们在写有兼容性样式的时候只需要按标准去写，无需考虑浏览器兼容性问题，postcss会自动帮我们做好。这样极大地方便了我们开发，大大提高了开发效率。

在经过上面简单的案例演示之后，我们也感受到了postcss的强大之处，当然如果想要把完整的项目运行起来，还需要其它方面的知识，如npm 包管理、webpack 打包工具的使用等，这些知识不在本章节的讨论范围之内，但其在开发中有着重要的地位，如果对这方面不了解的同学也需要补一下这方面的知识。

其实，从上面的案例中也能看出真正执行工作的是autoprefixer 插件，postcss 本身并不会做浏览器兼容性处理。但postcss的作用是把 原始css样式转化成ast 树，从而使得插件能更好的处理样式，最终再由postcss把处理好的ast 树转化成最终的css样式。所以，插件在postcss的地位是非常高的，下面我们说一下插件的运行机制，对插件有一个大体的了解。
 

插件机制

PostCSS 的插件机制是其核心特性之一，它使得可以灵活地扩展和定制 CSS 处理过程。插件可是一个函数也可以是一个对象。

插件函数：PostCSS的插件是以函数的形式存在的。每个插件函数都会接收一个 CSS AST（抽象语法树）作为输入，并返回一个新的 CSS AST 或已修改的 CSS。插件函数具有以下签名：​​​​​​​

function pluginName(css, options) { // 插件逻辑... return modifiedCss;}css: 表示输入的 CSS AST。options（可选）: 插件的配置选项。

插件调用：插件可以通过 postcss() 函数来调用，并以插件函数作为参数。例如：​​​​​​​

const postcss = require('postcss');const myPlugin = require('postcss-my-plugin');
const processedCss = postcss() .use(myPlugin) .process(cssCode, { /* 配置选项 */ }) .css;process() 方法用于处理 CSS，并返回一个 Promise 对象。调用 css 属性可以获取处理后的 CSS 代码。

插件链式调用：多个插件可以通过链式调用的方式组合起来。例如：

在处理过程中，每个插件会依次接收上一个插件处理后的 CSS AST，并对其进行操作和转换。

postcss() .use(plugin1) .use(plugin2) .use(plugin3) .process(cssCode, { /* 配置选项 */ }) .css;

插件顺序：插件的调用顺序非常重要，它会影响 CSS AST 的转换结果。通常，应该遵循一些约定俗成的顺序来组织插件。例如，先执行需要处理整个 CSS 的插件，然后是与选择器相关的插件，最后是处理属性和值的插件。

配置选项：插件可以提供配置选项，以便在使用插件时进行自定义设置。选项可以通过调用 process() 方法时传递给插件。例如：

插件函数可以根据所提供的选项来调整其行为。

postcss() .use(myPlugin({ option1: value1, option2: value2 })) .process(cssCode) .css;

通过使用 PostCSS 的插件机制，开发者可以通过编写自定义插件来实现各种 CSS 处理逻辑。这使得 PostCSS 非常灵活和可扩展，符合开发者对于定制化 CSS 处理的需求。
 

大体流程如下：

start-> 解析 CSS 代码为 CSS AST-> 依次调用插件处理 CSS AST   -> 插件1   -> 插件2   -> ...   -> 插件N-> 转换 CSS AST 为 CSS 代码end

常用的插件

PostCSS 提供了许多常用的插件，以下是其中几个常用的插件：

1. Autoprefixer：自动添加浏览器前缀。它根据 Can I Use 上的数据，自动为 CSS 属性添加所需的浏览器前缀，以确保在各种浏览器中获得最佳的兼容性。

2. cssnano：用于压缩 CSS 代码，减小文件体积。它可以删除注释、空格、重复的样式声明，并将颜色、属性等进行优化，以生成更精简的 CSS 代码。

3. postcss-preset-env：根据目标浏览器或配置，将现代 CSS 转换为兼容性更强的 CSS。它可以将新的 CSS 语法和特性转换为浏览器可以理解的 CSS，并自动添加所需的前缀。

4. postcss-import：支持在 CSS 文件中使用 @import 导入其他 CSS 文件。它可以帮助组织和管理 CSS 代码，使代码更易于维护。

5. postcss-url：用于处理 CSS 中的 URL，并可以自动重写（rewrite）或内联（inline）文件。它可以在处理 CSS 代码时修改和管理其中的 URL 引用。

6. postcss-px-to-rem：将像素单位（px）转换为 rem 单位，以实现响应式布局。它可以自动将像素单位转换为 rem 单位，并根据设备上的根字体大小（root font size）进行相应的缩放。

   ……

postcss 的强大之处得益于有足够多的插件，所以如果我们想要实现某个功能可以先去postcss [官网](PostCSS Plugins) 看一下有没有对应的插件。