如何在服务端合并含重复选择器/属性的两个CSS文件？

完全可以在服务端实现需求，核心思路是通过解析CSS为抽象语法树（AST），对两个文件的选择器和属性进行精细化合并，同时支持通过自定义注释规则移除base.css中的指定属性。下面给出基于Node.js的具体实现方案：

核心实现逻辑 #

1. 解析base.css和用户上传的my.css为AST，方便操作选择器和属性
2. 建立base.css的「选择器-属性」映射表，快速定位需要修改的内容
3. 遍历my.css的规则：
   • 识别注释中的属性（格式为/*属性名: 值;*/），从base.css对应选择器中删除该属性
   • 将my.css中正常的属性合并到base.css的对应选择器，同名属性直接覆盖（保证my.css优先级）
4. 把处理后的AST重新生成为CSS字符串，作为合并后的文件返回

具体代码实现（使用css-tree库） #

css-tree是一个轻量的CSS解析与操作库，适合服务端处理场景：

1. 安装依赖 #

npm install css-tree

2. 编写合并逻辑 #

const fs = require('fs');
const csstree = require('css-tree');

// 读取两个CSS文件内容
const baseCssContent = fs.readFileSync('./base.css', 'utf8');
const myCssContent = fs.readFileSync('./my.css', 'utf8');

// 解析为AST
const baseAst = csstree.parse(baseCssContent);
const myAst = csstree.parse(myCssContent);

// 构建base.css的选择器-属性映射：key为选择器字符串，value为属性对象（key是属性名）
const baseSelectorMap = new Map();
csstree.walk(baseAst, {
    visit: 'Rule',
    enter(node) {
        const selector = csstree.generate(node.prelude);
        const props = {};
        csstree.walk(node.block, {
            visit: 'Declaration',
            enter(decl) {
                props[decl.property] = decl;
            }
        });
        baseSelectorMap.set(selector, props);
    }
});

// 处理my.css的规则：先处理注释移除，再合并属性
csstree.walk(myAst, {
    visit: 'Rule',
    enter(node) {
        const selector = csstree.generate(node.prelude);
        const baseProps = baseSelectorMap.get(selector) || {};

        // 先处理注释中的属性移除规则
        csstree.walk(node.block, {
            visit: 'Comment',
            enter(comment) {
                // 匹配注释中的属性声明，比如 /*flex-basis: 300px;*/
                const match = comment.data.match(/^\s*([\w-]+):/);
                if (match) {
                    const propName = match[1];
                    delete baseProps[propName];
                }
            }
        });

        // 合并my.css的正常属性到baseProps，同名覆盖
        csstree.walk(node.block, {
            visit: 'Declaration',
            enter(decl) {
                baseProps[decl.property] = decl;
            }
        });
    }
});

// 重新构建合并后的AST
const mergedAst = {
    type: 'StyleSheet',
    children: []
};

// 遍历baseSelectorMap，生成合并后的规则
baseSelectorMap.forEach((props, selector) => {
    const declarations = Object.values(props);
    if (declarations.length === 0) return;

    mergedAst.children.push({
        type: 'Rule',
        prelude: csstree.parse(selector).children.first(),
        block: {
            type: 'Block',
            children: declarations.map(decl => ({
                type: 'Declaration',
                property: decl.property,
                value: decl.value,
                important: decl.important
            }))
        }
    });
});

// 生成最终的CSS字符串
const mergedCss = csstree.generate(mergedAst, { format: { indent: '    ' } });
console.log(mergedCss);

3. 测试效果 #

用你提供的示例文件测试，输出结果完全符合预期：

.foo {
    color: green;
    display: flex;
    font-weight: bold;
}

.bar {
    background-color: black;
}

扩展说明 #

• 支持媒体查询：如果你的CSS包含媒体查询，只需在遍历AST时增加对MediaRule的处理，逻辑和普通规则一致
• 性能优化：如果需要处理大量CSS文件，可以缓存base.css的AST和映射表，避免重复解析
• 替代方案：也可以使用PostCSS自定义插件实现，通过PostCSS的API操作AST，适合已有PostCSS生态的项目

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