Git Bash中CSS文件转换为阿拉伯语RTL方向时出现问题

问题说明 #

• 场景：Git托管的前端项目中执行CSS RTL适配
• 目标：通过转换工具将默认英文LTR（从左到右）方向的CSS，转为适配阿拉伯语RTL（从右到左）阅读方向的样式
• 故障现象：转换执行失败，异常状态见下图：
  

修复步骤 #

按以下优先级逐一排查，基本能覆盖90%以上的同类故障：

• 先校验原始CSS语法
  用stylelint扫一遍待转换的CSS文件，或者直接把文件拖进浏览器控制台看能不能正常解析，重点查有没有未闭合的大括号、拼错的属性名、没编译的预处理变量、非法嵌套。RTL转换工具是靠解析CSS语法树工作的，只要有一处语法问题就会直接中断。
• 核对工具配置
  主流RTL转换工具比如rtlcss、postcss-rtlcss出问题，大概率是配置错了：
  • 检查文件匹配规则，是不是glob写法不对，要么没扫到目标文件，要么把不存在的文件加进了转换列表
  • 检查输出目录有没有写入权限，是不是被Git文件锁、本地权限设置拦截了
  • 检查自定义属性规则，非标准的CSS属性如果没加白名单，工具识别不了就会报错，不需要转换的片段直接加/*rtl:ignore*/注释跳过就行
• 解决依赖版本冲突
  如果是新拉仓库第一次跑就报错，直接删了依赖重装：

  # 根据自己用的包管理器选对应命令
  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  npm install
  

  重点注意PostCSS和RTL插件的版本对应关系，比如PostCSS 8用了只支持PostCSS 7的旧版RTL插件，100%会报解析错误，直接装对应大版本的插件就行。
• 排除Git换行符干扰
  跨系统协作的时候，Git默认的自动换行符转换很容易把文件格式搞坏，执行下面的命令关了自动转换，重置文件后再试：

  git config core.autocrlf false
  git rm --cached -r .
  git reset --hard
  

• 定位具体触发问题的代码段
  全量转换找不到问题的话，就把CSS文件拆成小批次逐个转，定位到出问题的单文件之后，再逐段注释排查具体是哪段样式触发的异常，针对性处理就行。

内容的提问来源于stack exchange，提问作者ibrahim Frewan