CSS Academy · 课时

自定义 PostCSS 插件

Q: 「自定义 PostCSS 插件」这节课中我会学到什么？

编写自己的 PostCSS 插件，以编程方式转换 CSS 节点。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写自己的 PostCSS 插件，以编程方式转换 CSS 节点。

自定义 PostCSS 插件 是 CoddyKit 上的免费 CSS Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为什么要编写自定义插件？

当没有现成的 PostCSS 插件能够满足您的需求时，例如项目特定的 CSS 转换、迁移辅助工具或自定义检查规则，编写自定义插件可以让您直接访问 CSS AST。

插件结构

PostCSS 插件是一个接收 Root 节点（解析后的 CSS）以及可选 Result 对象的函数。您可以使用 postcss.plugin() 工厂函数，或使用现代的直接函数方式：

// my-plugin.js
const plugin = () => {
  return {
    postcssPlugin: 'my-plugin',
    Declaration(decl) {
      // Called for every declaration node
    },
    Rule(rule) {
      // Called for every rule node
    }
  };
};
plugin.postcss = true;
module.exports = plugin;

遍历声明

转换每个 color 声明：

const plugin = () => ({
  postcssPlugin: 'rem-converter',
  Declaration(decl) {
    if (decl.prop === 'font-size' && decl.value.endsWith('px')) {
      const px = parseFloat(decl.value);
      decl.value = `${px / 16}rem`;
    }
  }
});

添加新规则

在每个 .btn 规则后注入一个新规则：

Rule(rule) {
  if (rule.selector.includes('.btn')) {
    const focusRule = rule.cloneAfter();
    focusRule.selector = rule.selector + ':focus';
  }
}

删除声明

删除所有 color: red 声明（调试或清理插件）：

Declaration(decl) {
  if (decl.prop === 'color' && decl.value === 'red') {
    decl.remove();
  }
}

PostCSS 辅助方法

PostCSS 为节点提供了辅助方法：

node.remove()：删除节点
node.replaceWith(newNode)：替换节点
node.cloneBefore()/cloneAfter()：插入克隆节点
postcss.decl()/rule()/atRule()：创建新节点

异步插件

PostCSS 插件可以是异步的——当您需要读取文件或发起网络请求时非常有用：

async Declaration(decl, helpers) {
  if (decl.prop === 'icon') {
    const svg = await readFile(`icons/${decl.value}.svg`);
    decl.replaceWith(helpers.decl({ prop: 'background', value: `url(${svg})` }));
  }
}

测试 PostCSS 插件

直接使用 postcss 包测试插件：

const postcss = require('postcss');
const plugin = require('./my-plugin');

test('converts px to rem', () => {
  const input = 'p { font-size: 16px; }';
  const result = postcss([plugin()]).process(input, { from: undefined });
  expect(result.css).toBe('p { font-size: 1rem; }');
});

插件选项

在插件工厂函数中接收参数，以接受配置选项：

const plugin = (opts = {}) => ({
  postcssPlugin: 'configurable',
  Declaration(decl) {
    if (decl.prop === opts.property) {
      decl.value = opts.replacement;
    }
  }
});

发布 PostCSS 插件

PostCSS 插件遵循命名约定：postcss-plugin-name。它们会发布到 npm，并添加到 PostCSS 仓库中。对于内部工具，请将它们作为项目中的本地文件保留。

快速检查

样式表中，哪个 PostCSS 访问器会针对每个 CSS 属性和值组合被调用？

回顾

自定义 PostCSS 插件使用访问器方法处理 CSS AST 节点。对于属性和值组合，使用 Declaration(decl)；对于选择器块，使用 Rule(rule)；对于 @ 规则，使用 AtRule()。使用 remove()、replaceWith() 和 cloneAfter() 等节点方法修改 CSS 树。直接使用 postcss 包测试插件。

常见问题解答

「自定义 PostCSS 插件」课时是免费的吗？

是的 — 「自定义 PostCSS 插件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「自定义 PostCSS 插件」这节课中我会学到什么？

编写自己的 PostCSS 插件，以编程方式转换 CSS 节点。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「自定义 PostCSS 插件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy