DEV Community

Discussion on: PostCSS Preset Env: Babel for CSS

Collapse
 
adrianbdesigns profile image
Adrian Bece

I assume that the issue is that .grid-item doesn't have any relation to .grid once it's compiled to CSS. I think that the CSS would apply either if .grid-item is a child of .grid - .grid .grid-item or if you moved the variable to :root.

Collapse
 
shraone profile image
Shrawan Kumar Shrestha

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.

Thread Thread
 
adrianbdesigns profile image
Adrian Bece

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.