05 — CSS 与各端样式转换 ​

设计层补充：样式在 Taro 里如何作为「独立引擎管道」与 JS / 视图协议衔接，见 10-CSS与JS转化引擎设计.md（PostCSS 为 Lowering 前端、st/cl 为运行时汇合点等）。本文以下以 具体插件链与配置 为主。

1. 总体原则 ​

Taro 不追求「一套 CSS 文件原样在小程序 WXML 里用」——小程序视图层有 rpx、内联 style、class 绑定限制 等。实际链路是：

源码样式 → PostCSS 插件链（按端裁剪）→ 打包进 js（或独立 wxss） → 运行时/模板 把 class / style 反映到 小程序 data 上。

Webpack 侧小程序 PostCSS 默认链在 packages/taro-webpack5-runner/src/postcss/postcss.mini.ts 注册；H5 在 postcss.h5.ts，Harmony 有 postcss.harmony.ts。

2. 小程序端 PostCSS 链（Webpack 示例） ​

postcss.mini.ts 中默认包含（顺序敏感）：

• postcss-import
• autoprefixer（可配置关闭，默认 flexbox: 'no-2009'）
• postcss-pxtransform：按端把 px 转为 rpx 等
• postcss-alias：解析别名路径
• postcss-url：资源路径改写
• postcss-html-transform：与模板/HTML 相关转换（小程序端默认 enable: false，可按配置打开）

对应默认顺序见：

return [
    ['postcss-import', {}, require('postcss-import')],
    ['autoprefixer', autoprefixerOption, require('autoprefixer')],
    ['postcss-pxtransform', pxtransformOption, require('postcss-pxtransform')],
    ['postcss-alias', { config: { alias } }, require('./postcss-alias').default],
    ['postcss-url', { ...defaultUrlOption, ...(options?.url || {}) }, require('postcss-url')],
    ['postcss-html-transform', htmltransformOption, require('postcss-html-transform')],
    ...Object.entries(options)
  ]

H5 链在 postcss.h5.ts 还会加入 postcss-plugin-constparse 等，与 浏览器端变量替换 有关（与小程序默认链不完全相同）。

3. postcss-pxtransform：多端单位 ​

官方 README 写明三端差异：

• 小程序：px → rpx（典型 designWidth: 750）
• H5：px → rem
• RN：配合 RN 样式体系转换

见 packages/postcss-pxtransform/README.md 前几节。

要点：支持 designWidth 为函数，按文件路径区分 UI 库与业务设计稿（例如 NutUI 375 vs 业务 750），避免混用组件时比例错乱。

4. 模板里 style / class 如何落到数据 ​

shared/src/template.ts 中 styles 把 style/class 绑定到 数据字段（通过 Shortcuts 缩短 key）：

export const styles = {
  style: `i.${Shortcuts.Style}`,
  class: `i.${Shortcuts.Class}`
}

这与 hydrate 产出的节点数据、setData 路径一起构成 「样式也在 data 里」 的模型（具体字段在 runtime 的 element/style 模块维护）。

5. React Native 路径 ​

RN 使用独立 transformer 包（如 @tarojs/taro-rn-style-transformer、babel-plugin-transform-react-jsx-to-rn-stylesheet），把 类 CSS 描述 转为 StyleSheet / RN 可识别对象；与小程序 PostCSS 链 不是同一套，但 postcss-pxtransform 的 platform: 'rn' 仍可在样式预处理阶段统一单位策略。

6. 小结表 ​

参考资料 ​

• packages/taro-webpack5-runner/src/postcss/
• packages/postcss-pxtransform/README.md
• Taro 设计稿及尺寸单位