Node.js命令行环境中CSS.supports未定义问题咨询

你遇到的ReferenceError: CSS is not defined是因为CSS对象是浏览器专属的Web API，Node.js作为服务器/命令行运行环境，原生并不包含浏览器的CSSOM相关对象。编辑器能识别它是因为编辑器默认按浏览器JavaScript环境做语法提示，和Node.js实际运行环境不匹配。

要在Node.js里校验CSS颜色合法性，有两种可行方案：

方案一：使用第三方npm包（推荐） #

这类包已经封装了完整的CSS颜色校验逻辑，不用自己造轮子。比如color包，步骤如下：

1. 安装包：

npm install color

2. 修改你的代码：

const Color = require('color');
const inquirer = require('inquirer');

async getColor() {
    const answer = await inquirer.prompt([
        {
            type: 'input',
            name: 'color',
            message: "Enter a CSS color keyword or hexadecimal value."
        }
    ]);
    
    let potentialColor;
    if(answer.color.length === 6 && !isNaN(Number('0x' + answer.color))){
        potentialColor = '#' + answer.color;
    } else {
        potentialColor = answer.color;
    }
    
    try {
        // 尝试解析颜色，失败则抛出错误
        Color(potentialColor);
        this.color = potentialColor;
    } catch (err) {
        console.log("You did not enter a valid color keyword or hexadecimal value.");
        this.getColor();
    }
}

方案二：自定义校验逻辑 #

如果不想依赖第三方包，可以自己实现基础的颜色校验：

• 校验十六进制格式（包括3位和6位，带#或不带）
• 校验已知的CSS颜色关键字（需要维护一个关键字数组）
• 可选校验RGB/RGBA、HSL/HSLA格式

示例代码片段：

// 常见CSS颜色关键字数组，可根据需要补充
const cssColorKeywords = ['red', 'blue', 'green', 'yellow', 'black', 'white', 'gray', 'orange', 'purple', 'pink'];

function isValidColor(color) {
    // 校验6位或3位十六进制（带#）
    const hexRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
    // 校验不带#的6位十六进制（对应你原逻辑的情况）
    const rawHexRegex = /^[0-9A-Fa-f]{6}$/;
    if (rawHexRegex.test(color)) return true;
    if (hexRegex.test(color)) return true;
    // 校验颜色关键字
    if (cssColorKeywords.includes(color.toLowerCase())) return true;
    // 可添加RGB/RGBA等格式的正则校验
    return false;
}

// 然后在你的getColor方法里替换CSS.supports：
if(isValidColor(potentialColor)){
    this.color = potentialColor;
} else {
    console.log("You did not enter a valid color keyword or hexadecimal value.");
    this.getColor();
}

这种方案的缺点是需要自己维护所有合法颜色的规则，不如第三方包全面。

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