search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

[Potential cosebase wide] Questionable utility of CSS variables in pseudo elements #7630

Closed MrSimmmons closed 2 years ago

MrSimmmons commented 2 years ago

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 the var() 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.

Screen Shot 2022-06-03 at 12 03 03 AM

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)

MrSimmmons commented 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