Describe the bug
If multiple custom property (CSS Variables) fallbacks occur, getPropertyValue returns an empty string.
var() falls back to the second argument's value if no custom property is defined.
.one {
/* Red if --my-var is not defined */
color: var(--my-var, red);
}
.two {
/* pink if --my-var and --my-background are not defined */
color: var(--my-var, var(--my-background, pink));
}
Describe the bug If multiple custom property (CSS Variables) fallbacks occur,
getPropertyValue
returns an empty string.var()
falls back to the second argument's value if no custom property is defined.https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function
If the fallback is one time,
getPropertyValue
works correctly, but if it is two or more times, it returns an empty string. ref: https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L26-L30To Reproduce Steps to reproduce the behavior:
npm i
node src/index.js
Expected behavior This case returns
"pink"
https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L26-L27This case returns
"blue"
https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L29-L30Device: