CSSStyleSheet解析border样式异常：CSS变量致属性丢失问题

问题重现 #

当定义如下样式：

<style id="style">
    .dao-tabs__nav-item--active {
        border: 1px solid var(--red);
        border-bottom-color: var(--dao-pure-white);
    }
</style>

通过JavaScript代码 document.getElementById('style').sheet.cssRules[0].cssText 获取CSSStyleRule的cssText时，得到异常结果：

.dao-tabs__nav-item--active {
    border-top-color: ;
    border-top-style: ;
    border-top-width: ;
    border-right-color: ;
    border-right-style: ;
    border-right-width: ;
    border-bottom-style: ;
    border-bottom-width: ;
    border-left-color: ;
    border-left-style: ;
    border-left-width: ;
    border-image-source: ;
    border-image-slice: ;
    border-image-width: ;
    border-image-outset: ;
    border-image-repeat: ;
    border-bottom-color: var(--dao-pure-white);
}

可见border相关样式的属性值大量丢失。

而当border属性不使用CSS变量时：

<style>
    .dao-tabs__nav-item--active {
        border: 1px solid red;
        border-bottom-color: var(--dao-pure-white);
    }
</style>

获取到的cssText结果正常：

.dao-tabs__nav-item--active {
    border-width: 1px;
    border-style: solid;
    border-top-color: red;
    border-right-color: red;
    border-left-color: red;
    border-image: initial;
    border-bottom-color: var(--dao-pure-white);
}

原因分析 #

这是浏览器解析CSS缩写属性时的行为特性导致的：

• 当缩写属性（如border）中包含未解析的CSS变量时，若变量未被定义或浏览器无法在当前上下文解析它，浏览器无法确定该缩写属性的完整有效值，进而在将缩写拆解为细分属性（如border-top-width、border-top-color等）时，无法正确填充对应的值，最终cssText中这些属性的值为空。
• 若使用具体的属性值（如red），浏览器能完整解析缩写属性，顺利拆解为各个细分属性，因此cssText中的值正常显示。
• 即使变量已定义，Chrome 109、Firefox 108这类版本的浏览器在处理CSSOM的cssText时，对包含变量的缩写属性拆解仍存在逻辑问题，导致细分属性值无法正确映射。

解决方案 #

1. 确保CSS变量已正确定义：在全局或当前作用域中声明变量，示例：

:root {
    --red: #ff0000;
    --dao-pure-white: #ffffff;
}

2. 改用细分属性定义：避免在缩写属性中混合变量，直接拆分border的各个属性：

.dao-tabs__nav-item--active {
    border-width: 1px;
    border-style: solid;
    border-color: var(--red);
    border-bottom-color: var(--dao-pure-white);
}

这种方式下，浏览器能正确解析每个细分属性，cssText中的值会正常显示。

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