The cross-browser extension framework

用同一条管线，在扩展页面和 content script 中以一致的方式转换 CSS。当你需要 Autoprefixer 之类的插件或现代 CSS 转换时，就该用 PostCSS。 Extension.js 会检测 PostCSS 配置，并在需要时自动应用 postcss-loader。

什么场景适合用 PostCSS

你需要在扩展样式里做自动前缀或现代 CSS 转换。
你希望在 popup/options/sidebar/content script 中共用一条 CSS 转换管线。
你正在使用 Tailwind 或基于插件的样式处理。

PostCSS 的能力

能力	它能带来什么
共用的 CSS 管线	在 popup、options、新标签页以及 content script 之间使用同一套转换
灵活的配置发现	从专用配置文件或 `package.json` 中加载 PostCSS 配置
与 Tailwind 兼容	通过 PostCSS 插件，与基于 Tailwind 的方案协同工作
基于插件的转换	引入 `autoprefixer`、`postcss-preset-env` 等工具

模板示例

Tailwind + PostCSS 起步模板

当你想要一套可用的 PostCSS 设置，并搭配 Tailwind 与组件化 UI 时，用这个模板。

npx extension@latest create my-extension --template=sidebar-shadcn

仓库：examples/sidebar-shadcn

检测和配置文件

Extension.js 会检查以下 PostCSS 配置文件：

.postcssrc
.postcssrc.json
.postcssrc.yaml
.postcssrc.yml
postcss.config.mjs
.postcssrc.js / .postcssrc.cjs
postcss.config.js / postcss.config.cjs

它也能识别 package.json 中的 postcss 配置。

在现有扩展中使用 PostCSS

安装 PostCSS 依赖：

创建 `postcss.config.js`

export default {
  plugins: {
    autoprefixer: {},
  },
};

用法

在扩展页面中按常规方式导入样式：

import "./styles/globals.css";

对于 content script，在 content script 入口里用同样的方式导入：

import "./styles/content.css";

Extension.js 在这两种上下文中都会应用 PostCSS，但打包方式不同（页面走 css 管线，content script 走资源管线）。

与 Tailwind 的相互作用

检测到 Tailwind 时，Extension.js 可以自动触发 PostCSS 设置。
Extension.js 同时支持 Tailwind v3 和 v4，会根据检测到的版本选择相应插件。
在 ECMAScript 模块（ESM）项目里，如果 PostCSS 配置使用了不兼容的 CommonJS（CJS）模式，Extension.js 可能会绕过你的配置，转而注入兼容性插件。

最佳实践

让插件链保持精简、显式（例如 autoprefixer、postcss-preset-env）。
确认配置文件格式（.mjs/.cjs）与项目的 module type 一致。
让 Tailwind 与 PostCSS 的版本保持对齐，以避免插件解析错配。
优先使用共享的样式入口文件，让各个扩展界面的处理结果保持一致。

下一步

配合 PostCSS 配置 Tailwind CSS。
用 Stylelint 给样式表做 lint。

为浏览器扩展使用 Prettier 用 Stylelint 给浏览器扩展 CSS 做 lint

​什么场景适合用 PostCSS

​PostCSS 的能力

​模板示例

​Tailwind + PostCSS 起步模板

​检测和配置文件

​在现有扩展中使用 PostCSS

​创建 postcss.config.js

​用法

​与 Tailwind 的相互作用

​最佳实践

​下一步