capricorn86 / happy-dom

A JavaScript implementation of a web browser without its graphical user interface
MIT License
3.24k stars 194 forks source link

If multiple custom property fallbacks occur, `getPropertyValue` returns an empty string #1308

Closed odanado closed 5 months ago

odanado commented 5 months ago

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));
}

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-L30

To Reproduce Steps to reproduce the behavior:

  1. Go to https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox
  2. Clone this repository
  3. run npm i
  4. run 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-L27

This case returns "blue" https://github.com/odan-sandbox/happy-dom-getComputedStyle-with-css-variables-sandbox/blob/bcffcab32a5c6299ea41535bcfd9cb7659df3354/src/index.js#L29-L30

Device: