Thanks for the reply. I even tried movign css variable to .grid-item but it doesn't see to work. it just with at ie support is not working, beside that other browsers are supporting pretty well. there will be complex cases where we want css variables to be assign in certain viewport only I think this is the best featre of css variables but if we have to write all variable to :root then this won't be good solution either. some variables I want to be scoped to specific component rather than assigning to root of the document. So bottom line, when working with complex media query to css variables, it will trigger problems in IE and that's what my issue is.
Yeah, postcss-preset-env and IE cannot handle the case of dynamic variable values. We just have to wait for IE11 userbase to shrink even more.
Using a CSS in JS systems like styled components fix that issue by using regular JS variables. But that depends on your tech stack.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.