在node.js环境中处理css规则不同于浏览器dom操作。本文将介绍两种主要方法：一是利用jsdom模拟浏览器环境，实现对`document.stylesheets`等dom api的访问；二是采用csstree库进行css抽象语法树（ast）解析，实现对css内容的深度分析、转换与生成。这两种方法各有侧重，为node.js环境下的css自动化处理提供了强大的工具，避免了简单的字符串替换。
在前端开发流程中，有时需要在Node.js构建过程中对CSS进行编程化修改，例如自动化测试、样式优化或主题切换。然而，浏览器环境中常见的document.styleSheets或cssRules等DOM API在Node.js中是不可用的，因为Node.js本身不提供DOM环境。面对这一挑战，我们可以选择两种主要策略来在Node.js中实现对CSS规则的访问和操作：模拟DOM环境或解析CSS抽象语法树（AST）。
1. 利用JSDOM模拟DOM环境
JSDOM是一个纯JavaScript实现的DOM和HTML标准，它可以在Node.js中模拟浏览器环境，允许开发者使用标准的DOM API来操作HTML和CSS。如果你需要一个接近浏览器行为的环境来处理CSS，例如加载一个包含样式表的HTML文件，并像在浏览器中一样通过document.styleSheets来访问CSS规则，那么JSDOM是一个非常合适的选择。
工作原理： JSDOM解析HTML字符串，构建一个完整的DOM树，并提供一个window对象，其中包含了document、navigator等常见浏览器全局对象。通过这个模拟的document对象，你可以像在浏览器JavaScript中一样访问和操作样式表。
安装： 首先，你需要在项目中安装JSDOM：
npm install jsdom
示例代码： 以下示例展示了如何使用JSDOM加载一个包含CSS的HTML片段，并访问其中的CSS规则：
const { JSDOM } = require('jsdom');
async function accessCssRulesWithJSDOM() {
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<title>JSDOM CSS Example</title>
<style id="my-styles">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 960px;
margin: 0 auto;
color: #333;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello JSDOM!</h1>
</div>
</body>
</html>
`;
const dom = new JSDOM(htmlContent);
const document = dom.window.document;
// 访问第一个样式表
if (document.styleSheets.length > 0) {
const styleSheet = document.styleSheets[0];
console.log('样式表规则数量:', styleSheet.cssRules.length);
// 遍历并打印所有CSS规则
for (let i = 0; i < styleSheet.cssRules.length; i++) {
const rule = styleSheet.cssRules[i];
console.log(`规则 ${i + 1}:`, rule.cssText);
// 示例：修改某个规则
if (rule.selectorText === 'h1') {
console.log('发现h1规则，尝试修改颜色...');
// 注意：直接修改cssText可能会覆盖其他属性，更精细的修改可能需要遍历rule.style
rule.style.color = 'green';
console.log('修改后的h1规则:', rule.cssText);
}
}
} else {
console.log('未找到任何样式表。');
}
// 获取修改后的HTML（包含修改后的样式）
// 注意：JSDOM修改的样式会反映在document对象中，但要获取包含这些修改的完整HTML，
// 你可能需要重新生成或处理。对于样式表内容，它会直接在DOM中更新。
const updatedStyleElement = document.getElementById('my-styles');
if (updatedStyleElement) {
console.log('\n修改后的<style>标签内容:\n', updatedStyleElement.textContent);
}
}
accessCssRulesWithJSDOM();适用场景：
- 需要模拟浏览器环境进行端到端测试。
- 服务器端渲染（SSR）中，需要预处理或修改页面样式。
- 对CSS的修改是基于DOM上下文的，例如根据HTML结构动态调整样式。
- 简单的CSS规则读取和修改，且不涉及复杂的CSS语法分析。
2. 利用CSSTree进行CSS抽象语法树（AST）解析
对于更专业、更精细的CSS操作，例如静态分析、高级转换、优化或自定义语法检查，直接操作CSS的抽象语法树（AST）是更强大和灵活的方法。CSSTree是一个专门为CSS设计的工具集，它提供了一个快速且详细的解析器（CSS → AST）、遍历器（AST遍历）、生成器（AST → CSS）和词法分析器（验证和匹配）。
立即学习“前端免费学习笔记（深入）”；
工作原理： CSSTree将CSS代码解析成一个结构化的JavaScript对象，即AST。这个AST精确地表示了CSS的语法结构，包括选择器、声明、属性、值等。你可以通过遍历AST来查找、修改或删除任何CSS部分的节点，然后将修改后的AST重新生成为CSS代码。
安装： 首先，你需要在项目中安装CSSTree：
npm install css-tree
示例代码： 以下示例展示了如何使用CSSTree解析CSS字符串，修改特定属性，然后重新生成CSS：
const csstree = require('css-tree');
function manipulateCssWithCSSTree() {
const cssInput = `
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #333;
}
.container {
width: 960px;
margin: 0 auto;
background-color: #f0f0f0;
}
h1 {
color: blue;
font-size: 2em;
}
`;
console.log('原始CSS:\n', cssInput);
// 1. 解析CSS到AST
const ast = csstree.parse(cssInput);
// 2. 遍历AST并进行修改
csstree.walk(ast, function (node) {
// 查找所有的Declaration（声明）节点
if (node.type === 'Declaration') {
// 示例1：修改所有color属性的值为red
if (node.property === 'color') {
// node.value 是一个Value节点，其children包含具体的词法单元
// 这里假设color的值是简单的单个词法单元
if (node.value.children.first) {
node.value.children.first.value = 'red';
}
}
// 示例2：为所有声明添加 !important (仅作演示，实际应用需谨慎)
// if (!node.important) {
// node.important = true;
// }
// 示例3：删除特定的声明
// if (node.property === 'font-size') {
// this.remove(); // 使用this.remove()从AST中删除当前节点
// }
}
// 示例4：修改特定选择器的属性
if (node.type === 'Rule' && node.prelude.type === 'SelectorList') {
// 遍历选择器列表中的每个选择器
node.prelude.children.forEach(selector => {
if (selector.type === 'Selector' && csstree.generate(selector) === '.container') {
// 找到了.container选择器，现在遍历其声明块
node.block.children.forEach(declaration => {
if (declaration.type === 'Declaration' && declaration.property === 'background-color') {
declaration.value.children.first.value = '#e0e0e0'; // 修改背景色
}
});
}
});
}
});
// 3. 将修改后的AST重新生成为CSS字符串
const modifiedCss = csstree.generate(ast);
console.log('\n修改后的CSS:\n', modifiedCss);
}
manipulateCssWithCSSTree();适用场景：
- CSS静态分析、代码检查（linting）。
- 高级CSS转换，例如：
- 自动添加浏览器前缀。
- 将CSS变量转换为具体值。
- 优化CSS（如合并重复属性、精简选择器）。
- 重构或重命名CSS类。
- 构建自定义CSS预处理器或后处理器。
- 需要精确控制CSS语法结构的任何场景。
总结与选择
在Node.js中访问和修改CSS规则，你可以根据具体需求选择JSDOM或CSSTree：
- 选择JSDOM 当你的需求是模拟浏览器环境，利用现有的DOM API（如document.styleSheets和cssRules）进行操作时。它适用于那些需要与HTML结构紧密结合，或者测试浏览器行为的场景。缺点是它会创建整个DOM，资源消耗相对较高，且对CSS的修改能力受限于DOM API。
- 选择CSSTree 当你需要对CSS本身进行深度分析、转换和优化，而不需要模拟完整的DOM环境时。CSSTree提供了对CSS语法的细粒度控制，允许你进行复杂的编程化修改，是构建CSS处理工具的理想选择。它的学习曲线可能稍陡峭，因为需要理解AST结构，但提供了无与伦比的灵活性和性能。
在大多数现代前端构建流程中，如果只是为了修改CSS文件内容，CSSTree（或类似的PostCSS等工具，它们底层也多是基于AST）会是更高效和专业的选择。而JSDOM则在需要模拟浏览器运行时环境的特定场景中发挥作用。
