Open dtothefp opened 5 years ago
When using variables for a CSS transition followed by a comma white space is removed between the transition properties which breaks the transition:
ex.
// pre-compiled.css :root { --transition-transform: transform 0.3s ease-out; } .bg { transition: var(--transition-transform), visibility 0.3s ease-out; }
// compiled css :root { --transition-transform: transform 0.3s ease-out; } .bg { transition: transform0.3sease-out, visibility 0.3s ease-out; transition: var(--transition-transform), visibility 0.3s ease-out; }
If a whitespace is added to the comma following the property the whitespace will be preserved
// pre-compiled.css :root { --transition-transform: transform 0.3s ease-out; } .bg { transition: var(--transition-transform) , visibility 0.3s ease-out; }
// compiled css :root { --transition-transform: transform 0.3s ease-out; } .bg { transition: transform 0.3s ease-out , visibility 0.3s ease-out; transition: var(--transition-transform) , visibility 0.3s ease-out; }
Have the same error From this :root { --input-border-bottom-idle: inset 0 -1px 0 0 var(--c-primary-light); } I get this incorrect style "--input-border-bottom-idle": "inset,0,-1px,0,0,var(--c-primary-light)",
:root { --input-border-bottom-idle: inset 0 -1px 0 0 var(--c-primary-light); }
"--input-border-bottom-idle": "inset,0,-1px,0,0,var(--c-primary-light)",
When using variables for a CSS transition followed by a comma white space is removed between the transition properties which breaks the transition:
ex.
If a whitespace is added to the comma following the property the whitespace will be preserved