re: PostCSS Preset Env: Babel for CSS VIEW POST


Hello Adrian,

I was searching for post css solution regarding css variables and I found exactly what you wrote in article. But unfortunately, my output doesn't seem like yours.
here's the screen of my code:
and result screen seen on ie11 :

if I put css variable on :root, then ie 11 support it as fallback ie. width:300px, width var(--column). or I'll have to write css like width:var(--column, 300px); but that won't be solution what I wanted. all I want to write like width:var(--column) and output should support in ie11 with fallback using postcss.

can you help me on this??


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.


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.

code of conduct - report abuse