I came across an Edge Case where styles were not applied to an element properly.
This is likely due to an issue with CSSStylesheets itself.
This produces a stylesheet that has no value vor background-color / nor background-image
const sheet = new CSSStyleSheet() sheet.replaceSync('my-button {background: var(--button-bg, white);\n background-repeat: no-repeat;\n}')
It only happens when the same rule contains a shorthand (and a css var) plus a long-hand with a certain value.
Example:
https://codepen.io/quarkus/pen/WbQzvGg
Problem:
Since ejs@1 we put all Styles from JS includes (or the styles getter) through a CSSStylesheets instance per prototype.
Maybe there is a way to deal with this .. maybe its just a limitation.
I came across an Edge Case where styles were not applied to an element properly.
This is likely due to an issue with CSSStylesheets itself.
This produces a stylesheet that has no value vor background-color / nor background-image
const sheet = new CSSStyleSheet() sheet.replaceSync('my-button {background: var(--button-bg, white);\n background-repeat: no-repeat;\n}')It only happens when the same rule contains a shorthand (and a css var) plus a long-hand with a certain value.
Example:
https://codepen.io/quarkus/pen/WbQzvGg
Problem:
Since ejs@1 we put all Styles from JS includes (or the styles getter) through a CSSStylesheets instance per prototype.
Maybe there is a way to deal with this .. maybe its just a limitation.