用postcss-logical转译inset-block-start等逻辑属性，它专为此设计，支持margin-block、padding-inline、place-items等，默认启用无需配置，但不处理@container或aspect-ratio。
PostCSS插件选哪个才能转译inset-block-start这类逻辑属性
用postcss-logical就行，它专为这个设计，比autoprefixer更直接——后者只处理dir和text-align等老式逻辑值，对margin-block、padding-inline、inset系列完全不碰。
常见错误是误装postcss-dir-pseudo或postcss-rtl，它们只管方向翻转，不生成top/left/bottom/right物理映射。
-
postcss-logical默认启用所有逻辑属性转译，包括place-items、border-block等，无需额外配置 - 若项目需保留
dir: ltr/rtl上下文（比如动态切换），加{ preserve: true }选项，否则会删掉原声明 - 注意它不处理
@container或aspect-ratio——那些跟逻辑方位无关，别指望它覆盖
转译后CSS体积暴增、选择器重复怎么办
逻辑属性本身是简写，一转就变成长串物理规则，尤其遇到margin: 1rem + dir: rtl混合时，postcss-logical会同时输出margin-left/margin-right两套，再叠加上原有规则，体积容易翻倍。
这不是bug，是设计使然：它得兼容运行时dir变更，所以必须预置双向映射。
立即学习“前端免费学习笔记（深入）”；
- 上线前务必走
cssnano压缩，它能合并重复声明、剔除冗余!important - 避免在
@media里嵌套逻辑属性再转译——PostCSS按顺序处理，@media (prefers-reduced-motion)里写inset-inline，会生成两套媒体查询，加倍膨胀 - 若只面向LTR固定布局，干脆关掉
dir感知：{ dir: 'ltr' }，转译结果只剩一套物理属性
IE11或Android 4.4 WebView里样式错乱，是不是转译没生效
不是没生效，是根本没进转译流程——PostCSS只处理.css或.pcss文件，而很多老项目用style标签内联CSS、或通过JS拼接字符串注入样式，这些路径PostCSS压根看不到。
另一个高发场景：Webpack里css-loader开了exportOnlyLocals: true，导致CSS模块化后原始逻辑属性被剥离，PostCSS无源可译。
- 确认构建链路中PostCSS插件位置：必须在
css-loader之前，且postcss-loader的sourceMap设为false（否则老浏览器解析map失败会静默丢样式） - Android 4.4 WebView认不出
inline-start，但能吃left——所以必须确保postcss-logical的fallbacks选项为true（默认就是） - 检查是否启用了
postcss-custom-properties等前置插件，它们若把--gap: 1rem提前编译成gap: 1rem，再传给postcss-logical，就漏掉了逻辑属性上下文
为什么justify-content: start没被转成justify-content: flex-start
因为start/end在Flex/Grid主轴上属于**对齐关键字**，不是逻辑属性——postcss-logical只管盒模型方位（block/inline），不碰布局对齐语义。
这类值由autoprefixer负责补全，但它只加-webkit-前缀，不改关键字本身。Chrome 84+、Firefox 63+原生支持start，旧版才需要降级。
- 真要兼容老浏览器，得手动写
justify-content: flex-start，或用postcss-flexbugs-fixes插件兜底 -
align-content: start同理，它不触发postcss-logical，但align-content: self-start会——因为self-start属于逻辑方位值 - 别指望一个插件解决所有“start”问题：盒模型里的
inset-block-start归postcss-logical，Flex里的justify-content: start归浏览器自身支持或autoprefixer前缀
逻辑属性转译不是开箱即用的黑盒，dir上下文、构建时机、插件协作顺序，三者错一个，产出就不可控。最常被忽略的是：你以为在CSS里写了margin-inline: 1rem，实际打包后它可能被其他插件提前删了、或被loader跳过了——先抓生成产物看原始输出，再查插件链，比调配置快得多。
