Closed MrSimmmons closed 2 years ago
Well... Ive an in interesting day of testing. 1: Turns out css variables can go in pseudo elements (my fault for doing enough reading / initial testing) 2: The "--variable is not set" message its actually chromes fault here. And there is already a bug report filed about it here
I was having a thorough read on how the ripple animation works, and have found some instances of CSS variables being requested within
::before
&::after
pseudo class. I find this very strange as CSS variables are not accessible within pseudo elements and each time they are used the fallback value in thevar()
is used instead. You can see in this screenshot that although--mdc-ripple-fg-size
is defined on the parent element, the instance of it being called in the::after
is returning a "--mdc-ripple-fg-size is not defined" message and falling back on the default value.So this brings up a few questions 1: Why are they there? 2: Where else are they being unnecessarily added? (Not necessarily just in the ripple scss) 3: Could a large chunk of the scss be simplified by removing them? (This one is more of a guess as it appears there is a lot of extra scss to get them to where they need to go, only for the default value to be used)