postcss不能自动转换逻辑属性，需搭配postcss-logical和postcss-rtlcss等插件；前者将物理属性转逻辑属性，后者反向映射物理值，二者混用会冲突；text-align需启用autorename才生效；inset-inline-start为原生逻辑属性，无需postcss处理；构建双版本应分两步：先转逻辑属性，再生成rtl变体。
PostCSS 能不能自动转换 margin-left 这类逻辑属性？
不能直接“自动转换”，PostCSS 本身不带 RTL 逻辑，必须靠插件。核心是 postcss-logical（处理逻辑属性如 margin-inline-start）配合 postcss-rtl 或 postcss-rtlcss（将物理属性如 float: left 反向映射）。两者职责不同，混用会冲突——比如 postcss-logical 把 margin-left 转成 margin-inline-start 后，postcss-rtlcss 就不再识别它了。
为什么 postcss-rtlcss 对 text-align: left 没反应？
因为 postcss-rtlcss 默认只处理以下几类声明：
-
float/clear -
left/right（定位属性） -
margin/padding/border的物理方向值（如margin-left） -
text-align: left | right（但需显式启用autoRename选项）
默认不处理 text-align。要让它生效，配置里得加：
postcss-rtlcss({
autoRename: true
})
否则 text-align: left 原样输出，RTL 下文字仍左对齐。
用 dir="rtl" 切换时，inset-inline-start 为什么没变？
inset-inline-start 是原生 CSS 逻辑属性，浏览器原生支持，不需要 PostCSS 转换——它会根据当前元素的 dir 或 direction 自动计算对应物理偏移（LTR 下 = left，RTL 下 = right）。PostCSS 插件如 postcss-logical 只负责把旧写法（如 left: 10px）转成逻辑写法，不干预已写的逻辑属性。所以如果你写了 inset-inline-start: 10px，就别再喂给 postcss-rtlcss，否则可能被误转成 inset-inline-end，反而出错。
构建时生成两套 CSS：LTR 版和 RTL 版，怎么配？
不能只靠一个插件一次跑完。推荐分两步流水线：
- 第一步：用
postcss-logical把所有物理属性（margin-left、float: left等）统一升级为逻辑属性（margin-inline-start、float: inline-start） - 第二步：对逻辑版 CSS，分别用
postcss-rtl（或rtl-css-js的 CLI）生成 RTL 变体，它会把inline-start→inline-end，block-start→block-end
关键点：两套输出文件名要区分，比如 app.css（LTR）和 app.rtl.css（RTL），HTML 中通过 <link rel="stylesheet" href="app.rtl.css" disabled> + JS 切换 disabled 属性来加载，避免样式抖动。
逻辑属性本身是现代方案，但老浏览器不支持；物理属性+插件生成双版本更兼容。选哪个，取决于你是否能接受 IE 和旧 Safari 用户看到 LTR 样式（即使页面 dir="rtl"）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
