CSS `PostCSS` 插件开发：自定义 CSS 转换与优化

（清清嗓子，推了推并不存在的眼镜）

咳咳，各位观众老爷，今天咱们聊点儿有意思的，关于CSS的“变形金刚”——PostCSS插件开发。别害怕，不是真让你变成机器人，是让你掌握一种能把CSS玩出花儿来的技能。

开场白：PostCSS，一个CSS的瑞士军刀

首先，咱得知道PostCSS是啥玩意儿。简单来说，它是一个用JavaScript转换CSS的工具。你可以把它想象成一个插件平台，或者更贴切地说，一个CSS的瑞士军刀。它本身啥也不干，但你可以给它装上各种插件，让它能帮你做各种事情：自动加前缀、优化代码、甚至用未来的CSS语法写代码！

第一部分：PostCSS插件开发基础

为啥要自己写插件？

市面上已经有很多PostCSS插件了，为啥还要自己写？原因很简单：
1. 定制化需求： 有些时候，你可能需要一些非常特定的转换或优化，现有的插件满足不了你。
2. 学习和提升： 自己写插件是深入理解CSS和PostCSS的绝佳方式。
3. 开源贡献： 你可以把你的插件分享给社区，帮助更多的人。

插件的基本结构

一个PostCSS插件本质上就是一个JavaScript函数，它接收两个参数：

root：一个代表整个CSS代码的AST（抽象语法树）对象。你可以遍历和修改这个AST，从而改变CSS代码。
opts：一个包含插件选项的对象。你可以在这里配置插件的行为。

module.exports = (opts = {}) => {
  return {
    postcssPlugin: 'my-postcss-plugin', // 插件名称，最好是唯一的
    Root (root, postcss) {
      // 在这里处理 CSS 代码
      root.walkDecls(decl => {
        // 遍历每一个声明（declaration）
        // 例如，修改颜色值
        if (decl.prop === 'color') {
          decl.value = 'red'; // 将所有color属性设置为红色
        }
      });
    }
  }
}

module.exports.postcss = true

这个插件会把所有color属性的值改成red。

AST（抽象语法树）简介

AST是PostCSS的核心。它是CSS代码的一种结构化表示，方便你用JavaScript进行操作。

AST的主要节点类型包括：

节点类型	描述
`Root`	CSS 代码的根节点
`Rule`	CSS 规则（例如，`.container { ... }`）
`Declaration`	CSS 声明（例如，`color: red;`）
`AtRule`	CSS at-rule（例如，`@media ...`）
`Comment`	CSS 注释

你可以使用PostCSS提供的API来遍历和修改这些节点。

PostCSS API 常用方法
- root.walk*()：遍历AST的各种节点。例如，root.walkRules()遍历所有规则，root.walkDecls()遍历所有声明。
- node.clone()：克隆一个节点。
- node.remove()：移除一个节点。
- node.before(newNode)：在节点前插入一个新的节点。
- node.after(newNode)：在节点后插入一个新的节点。
- postcss.decl(options)：创建一个新的声明。
- postcss.rule(options)：创建一个新的规则。
- postcss.atRule(options)：创建一个新的at-rule。
- postcss.comment(options)：创建一个新的注释。

第二部分：实战：开发一个自动添加px单位的插件

现在，咱们来写一个稍微复杂一点的插件：自动给数值添加px单位。这个插件只针对width、height、margin、padding等属性生效。

需求分析
1. 遍历所有声明。
2. 判断属性是否需要添加px单位（例如，width、height、margin、padding）。
3. 判断值是否是数值，且没有单位。
4. 如果是，则在值后面添加px。

代码实现

module.exports = (opts = {}) => {
  const properties = ['width', 'height', 'margin', 'padding', 'top', 'left', 'right', 'bottom']; // 需要添加px单位的属性
  return {
    postcssPlugin: 'postcss-add-px',
    Declaration (decl) {
      if (properties.includes(decl.prop)) {
        const value = decl.value;
        if (/^d+$/.test(value)) { // 简单的判断是否是纯数字
          decl.value = value + 'px';
        }
      }
    }
  }
}

module.exports.postcss = true;

这个插件的工作原理是：

定义一个数组properties，包含需要添加px单位的属性。
遍历所有声明。
判断声明的属性是否在properties数组中。
如果属性在数组中，判断值是否是纯数字。
如果是纯数字，则在值后面添加px。

测试插件

创建一个test.css文件：

.container {
  width: 100;
  height: 200;
  margin: 10;
  padding: 20;
  color: red;
}

创建一个test.js文件：

const postcss = require('postcss');
const addPx = require('./index.js'); // 替换成你的插件文件路径
const fs = require('fs');

const css = fs.readFileSync('test.css', 'utf8');

postcss([addPx()])
  .process(css, { from: 'test.css', to: 'output.css' })
  .then(result => {
    fs.writeFileSync('output.css', result.css);
  });

运行node test.js。

检查output.css文件，应该看到以下内容：

.container {
  width: 100px;
  height: 200px;
  margin: 10px;
  padding: 20px;
  color: red;
}

可以看到，width、height、margin、padding属性的值都被自动添加了px单位。

改进插件

上面的插件非常简单，还有很多可以改进的地方：

更精确的数值判断： 上面的正则^d+$只匹配整数，应该允许小数和负数。可以使用更复杂的正则，例如/^-?d+(.d+)?$/。
忽略已经有单位的值： 应该判断值是否已经有单位，如果有，则不添加px。
支持选项配置： 允许用户配置需要添加px单位的属性列表。

改进后的代码：

module.exports = (opts = {}) => {
  const properties = opts.properties || ['width', 'height', 'margin', 'padding', 'top', 'left', 'right', 'bottom']; // 允许用户配置属性列表
  const unit = opts.unit || 'px'; // 允许用户配置单位
  return {
    postcssPlugin: 'postcss-add-px',
    Declaration (decl) {
      if (properties.includes(decl.prop)) {
        const value = decl.value;
        if (/^-?d+(.d+)?$/.test(value) && !/[a-z%]+/i.test(value)) { // 更精确的数值判断，并忽略已经有单位的值
          decl.value = value + unit;
        }
      }
    }
  }
}

module.exports.postcss = true;

使用这个插件时，可以这样配置：

postcss([addPx({ properties: ['width', 'height'], unit: 'em' })]) // 只对width和height添加em单位
  .process(css, { from: 'test.css', to: 'output.css' })
  .then(result => {
    fs.writeFileSync('output.css', result.css);
  });

第三部分：进阶技巧

使用PostCSS的其他API

除了root.walkDecls()之外，PostCSS还提供了很多其他的API，可以让你更灵活地操作AST。
- root.walkRules()：遍历所有规则。
- root.walkAtRules()：遍历所有at-rule。
- root.walkComments()：遍历所有注释。
例如，你可以使用root.walkAtRules()来修改@media查询条件：
```
module.exports = (opts = {}) => {
  return {
    postcssPlugin: 'postcss-modify-media',
    AtRule (atRule) {
      if (atRule.name === 'media') {
        atRule.params = atRule.params.replace('screen', 'only screen'); // 将screen替换为only screen
      }
    }
  }
}

module.exports.postcss = true;
```
使用第三方库

你可以使用第三方库来简化插件的开发。例如，可以使用postcss-value-parser来解析和修改CSS值，可以使用colorguard来检查颜色对比度。

编写异步插件

有些时候，你可能需要在插件中进行异步操作，例如，从网络上获取数据。PostCSS支持异步插件，你可以使用async/await语法来编写异步插件。

module.exports = (opts = {}) => {
  return {
    postcssPlugin: 'postcss-async-plugin',
    async Root (root, postcss) {
      // 模拟一个异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      root.walkDecls(decl => {
        decl.value = decl.value + ' !important'; // 异步添加 !important
      });
    }
  }
}

module.exports.postcss = true;

发布你的插件

当你完成一个插件后，你可以把它发布到npm上，让更多的人使用。

创建一个npm账号。
在你的插件目录下运行npm init，创建一个package.json文件。

在package.json文件中添加以下字段：

{
  "name": "your-plugin-name", // 插件名称，必须是唯一的
  "version": "1.0.0",
  "description": "A description of your plugin",
  "keywords": ["postcss", "plugin", "css"], // 关键词，方便用户搜索
  "author": "Your Name",
  "license": "MIT",
  "main": "index.js", // 插件入口文件
  "postcss": true // 声明这是一个PostCSS插件
}

运行npm publish，发布你的插件。

第四部分：插件开发的最佳实践

清晰的文档： 编写清晰的文档，说明插件的功能、用法和配置选项。
完善的测试： 编写完善的测试用例，确保插件的正确性和稳定性。
合理的命名： 使用合理的命名，让用户更容易理解插件的功能。
遵循PostCSS插件规范： 遵循PostCSS插件规范，例如，插件名称应该以postcss-开头。
性能优化： 尽量减少插件的计算量，避免影响CSS编译速度。

总结

PostCSS插件开发是一个充满乐趣和挑战的过程。通过自己编写插件，你可以更好地理解CSS和PostCSS，并创造出满足自己需求的工具。希望今天的讲座能帮助你入门PostCSS插件开发，开启你的CSS“变形金刚”之旅！

（深深鞠躬）

感谢各位观众老爷的观看！下次再见！

发表回复 取消回复

发表回复取消回复