必须用 postcss-logical；它真正转译逻辑属性为物理属性并按 dir 自动推导，而 postcss-dir-pseudo 仅生成 :dir() 条件规则，不提供 fallback 值。
PostCSS 插件选 postcss-logical 还是 postcss-dir-pseudo？
直接说结论：需要翻转整套逻辑属性（如 margin-inline-start → margin-left 或 margin-right，取决于 dir），必须用 postcss-logical；postcss-dir-pseudo 只处理 :dir(ltr)/:dir(rtl) 伪类，不转译逻辑属性本身。
常见错误是把两者混用，以为加了 postcss-dir-pseudo 就能兼容老浏览器的逻辑方位——它只生成方向条件规则，不提供 fallback 值。而 postcss-logical 才真正做属性映射和值翻转。
-
postcss-logical支持margin-inline、padding-block、inset-inline等全部逻辑方位属性，并按dir="ltr"或dir="rtl"自动推导物理等价写法 - 它默认不处理
text-align: start/end，需显式开启preserve: false才转译（否则保留原逻辑值） - 若项目已用
postcss-rtl做整站 RTL 翻转，注意二者冲突：后者会重写所有方位值，建议停用或严格隔离作用域
如何配置 postcss-logical 实现自动翻转？
核心是启用 dir 检测 + 显式声明 fallback 方向。插件不会猜你页面的默认 dir，必须告诉它：
module.exports = {
plugins: [
require('postcss-logical')({
dir: 'ltr', // 必填：指定基础文本方向
preserve: false, // 必填：设为 false 才移除原始逻辑属性
transform: true // 默认 true，启用物理属性注入
})
]
}
关键点：
-
dir: 'ltr'表示页面默认左到右；若主站是 RTL（如阿拉伯语），这里必须写'rtl'，否则margin-inline-start会被错误转成margin-left而非margin-right -
preserve: false是翻转生效的前提——设为true时，逻辑属性原样保留，仅追加物理 fallback，老浏览器仍会忽略逻辑属性，导致样式丢失 - 插件对
@supports (margin-inline: 0)这类特性检测无感知，需手动包裹：用postcss-custom-media或直接写两套规则
为什么 inset-block-start 在 Safari 15.4 以下不生效？
这不是插件问题，而是 Safari 对逻辑定位属性的支持断层。postcss-logical 能转译 inset-block-start → top，但 Safari 15.3 及更早版本连 inset 属性都不识别，会直接丢弃整条声明。
实操方案：
- 对
position: fixed/absolute的逻辑定位，必须手动降级为top/bottom/left/right，不能依赖插件——因为插件只处理已知逻辑属性名，而inset是缩写，postcss-logical默认不展开它 - 若坚持用
inset-block-start，需配合postcss-custom-properties提前计算值，再用 JS 注入style标签覆盖（仅限动态场景） - 检查构建产物：运行
npx postcss input.css -o output.css后，确认输出中是否出现top: 1rem这类物理属性——没有则说明插件未命中该属性（比如拼错成inset-block-star）
遇到 Unknown word 错误，大概率是插件顺序错了
PostCSS 插件顺序敏感。postcss-logical 必须在 postcss-nested、postcss-custom-properties 之后运行，否则无法解析嵌套块内的逻辑属性，或读不到变量展开后的值。
典型报错：Unknown word CssSyntaxError: Unknown word (7:3)，对应代码是：
.card {
&__header {
margin-inline-start: var(--gap);
}
}
解决方法：
- 确保
postcss-logical在postcss-nested之后、cssnano之前 - 如果用了
postcss-custom-properties，它也必须在postcss-logical前面，否则插件看到的是margin-inline-start: var(--gap)，而非实际数值，无法正确映射 - 调试技巧：临时删掉其他插件，只留
postcss-logical，看是否还报错——能跑通就说明是顺序或依赖冲突
逻辑属性转译不是“加个插件就完事”，方向判定、插件链顺序、Safari 的支持边界，三者缺一不可。尤其注意 dir 配置和 preserve 开关，这两个地方设错，输出 CSS 看似正常，实际老浏览器里完全没效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
