介绍 postcss-prefix-custom-properties
内容提要
Bootstrap 团队发布 PostCSS 插件 postcss-prefix-custom-properties，可在构建时为 CSS 自定义属性及 var() 引用统一添加前缀（如 --bs-），并支持 @property 规则和 ignore 忽略选项。Sass 源码因此无需再写 #{$prefix} 插值，更简洁易维护。插件完全可选，不装也能编译出无前缀变量，适用于 Vite、webpack 等任意 PostCSS 环境。
延伸解读
解决 Sass 源码中的前缀污染
Bootstrap v5 的 Sass 源码中，每个自定义属性声明和 var() 引用都通过 #{$prefix} 插值硬编码了 --bs- 前缀，导致代码可读性差且难以维护。该插件将前缀处理从源码转移到构建步骤，使 Sass 源码可以保持干净的原生 CSS 语法，从而提升可读性和可维护性。
插件完全可选，不装也能用
文章明确指出，你完全可以不使用该插件来编译 Bootstrap，此时输出的是无前缀的自定义属性（如 --primary、--body-color）。插件仅在你需要为变量添加命名空间（如 --bs- 或自定义前缀）时才有必要，它不会强制改变你的构建流程。
功能覆盖声明、引用与 @property
插件接收一个前缀字符串（如 'bs-'），并重写所有 CSS 自定义属性声明和 var() 引用，同时处理 @property 规则。此外，ignore 选项支持字符串或正则表达式，用于跳过不应添加前缀的属性，例如已带前缀的变量或第三方库的变量。
标准 PostCSS 插件，环境兼容性好
该插件是一个标准的 PostCSS 插件，可以无缝集成到任何 PostCSS 配置中，包括 Vite、webpack、PostCSS CLI 等。使用时只需在 postcss.config.cjs 的 plugins 数组中引入并配置 prefix 和 ignore 选项即可，无需额外适配。
Q&A
postcss-prefix-custom-properties 是什么？
postcss-prefix-custom-properties 是 Bootstrap 团队开发的一个 PostCSS 插件，用于在构建时为 CSS 自定义属性（如 --brand-color）和 var() 引用统一添加前缀（如 --bs-），并支持 @property 规则和 ignore 忽略选项。
为什么 Bootstrap 团队要开发这个插件？
在 Bootstrap v5 中，--bs- 前缀通过 #{$prefix} 插值硬编码在 Sass 源码的每个自定义属性声明和 var() 引用中，导致源码可读性和可维护性变差。他们希望将前缀从源码中移除，改为在构建步骤中处理。
这个插件具体做了哪些转换？
插件接收一个前缀字符串（如 'bs-'），然后重写所有 CSS 自定义属性声明和 var() 引用，同时处理 @property 规则。例如，--brand-color 变为 --bs-brand-color，var(--fg) 变为 var(--bs-fg)。
如何配置和使用 postcss-prefix-custom-properties？
在 PostCSS 配置文件中添加插件并传入选项，例如：module.exports = { plugins: [ require('postcss-prefix-custom-properties')({ prefix: 'bs-', ignore: [/^--bs-/, /^--shiki-/] }), require('autoprefixer') ] }。它适用于任何 PostCSS 环境，如 Vite、webpack、PostCSS CLI 等。
这个插件是必须安装的吗？
不是必须的。插件完全可选，不安装也能编译 Bootstrap，只是输出的是无前缀的自定义属性（如 --primary、--body-color）。如果需要命名空间前缀（如 --bs-），才需要使用该插件。
ignore 选项有什么作用？
ignore 选项允许你指定要跳过的属性，可以是字符串或正则表达式。例如，ignore: [/^--bs-/, /^--shiki-/] 会忽略以 --bs- 或 --shiki- 开头的自定义属性，不对它们添加前缀。
