如何用macOS POSIX awk拆分CSS选择器？修复脚本错误

需求说明 #

需要将包含合并选择器的CSS代码拆分为独立规则：

• 同一行多个选择器共享样式的，拆分为每行一个选择器对应样式
• 媒体查询内部的合并选择器或多个独立规则，也要正确拆分

输入文件（input.txt） #

.classA,.classB .class1{color:blue}
@media only screen and (max-width: 500px){.class1 .classA,.class2,.class3,.class4 .classB{background-image:url("1.png")}}
@media only screen and (max-width: 500px){.class1 .classA{margin-right:0}.class1 .classB{margin-right:2%}.class2 .classC{margin-right:2}}

预期输出 #

.classA{color:blue}
.classB .class1{color:blue}
@media only screen and (max-width: 500px){.class1 .classA{background-image:url("1.png")}}
@media only screen and (max-width: 500px){.class2{background-image:url("1.png")}}
@media only screen and (max-width: 500px){.class3{background-image:url("1.png")}}
@media only screen and (max-width: 500px){.class4 .classB{background-image:url("1.png")}}
@media only screen and (max-width: 500px){.class1 .classA{margin-right:0}}
@media only screen and (max-width: 500px){.class1 .classB{margin-right:2%}}
@media only screen and (max-width: 500px){.class2 .classC{margin-right:2}}

原有脚本的问题 #

原有脚本仅能处理两种简单场景：单个样式块的合并选择器，以及媒体查询内单个合并选择器的样式块，但无法处理媒体查询内多个独立样式块的情况（如最后一行输入），导致输出结果缺失且错误。

修正后的POSIX awk脚本 #

核心思路：

1. 区分普通CSS规则和媒体查询规则
2. 对媒体查询规则，先提取媒体前缀，再拆分内部的多个样式块
3. 对每个样式块，再拆分其中的合并选择器，逐一输出

#!/usr/bin/awk -f

# 处理普通CSS规则（仅一对{}）
/^[^@]+{[^}]+}$/ {
    split($0, parts, /[{}]/)
    selector_str = parts[1]
    style = parts[2]
    n = split(selector_str, selectors, /,/)
    for (i=1; i<=n; i++) {
        print selectors[i] "{" style "}"
    }
    next
}

# 处理媒体查询规则（包含多对{}）
/^@media/ {
    if (match($0, /^@media[^]+{/)) {
        media_prefix = substr($0, RSTART, RLENGTH)
        inner_content = substr($0, RLENGTH+1, length($0)-RLENGTH-1)
        n = split(inner_content, blocks, /}{/)
        for (i=1; i<=n; i++) {
            block = blocks[i]
            split(block, parts, /{/)
            selector_str = parts[1]
            style = parts[2]
            m = split(selector_str, selectors, /,/)
            for (j=1; j<=m; j++) {
                print media_prefix selectors[j] "{" style "}"
            }
        }
    }
    next
}

使用方式 #

将脚本保存为split_css.awk，赋予执行权限：

chmod +x split_css.awk

然后运行：

./split_css.awk input.txt

内容的提问来源于stack exchange，提问作者Sharad Shrestha