search

sylvainpolletvillard / postcss-grid-kiss

A PostCSS plugin to keep CSS grids stupidly simple
https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html
MIT License
1.32k stars 53 forks source link

IE 11 doesn't support nested calcs #8

Closed RichiCoder1 closed 7 years ago

RichiCoder1 commented 7 years ago

I was trying out this plugin as it seemed pretty darn awesome and decided to try out those IE claims myself. The first thing I ran into almost immediately is that kiss generates nested calcs for some of the CSS grid fallbacks. This isn't supported in IE (or really many browsers).

https://sylvainpolletvillard.github.io/grid-kiss-playground/index.html with the justify-* removed, for example, generates top: calc(120px + calc(100% - 120px - 60px)); for the footer div.

sylvainpolletvillard commented 7 years ago

Hi, thanks for the report.

Do you still have the issue with the optimize option enabled ? Calc expressions are supposed to be reduced with https://github.com/MoOx/reduce-css-calc

RichiCoder1 commented 7 years ago

At least in the playground, that was with optimize ticked :<

RichiCoder1 commented 7 years ago

Update: Well now it's doing the right thing. Bizzare. Sorry, I may have somehow broke to optimize checkbox haha. I'll play around with it more and let you know if I run into any other issues!

sylvainpolletvillard commented 7 years ago

The playground itself is not supported by IE at the moment. I did not bother to transpile it down to ES5, this is the next thing I need to do.

Since it causes issues, I will change the optimize option to always reduce calc() expressions whether it is enabled or not.

RichiCoder1 commented 7 years ago

I was basically generating the html + css in the playground, and then copying it over to a CodePen in IE + Edge.

Sounds good!

russelporosky commented 7 years ago

Nested calcs work fine in IE, but you have to remove the calc function name. In your example above, top: calc(120px +(100% - 120px - 60px)); will work fine.

sylvainpolletvillard commented 7 years ago

@metaloha Okay, good to know :+1: Maybe I will bring back full calc expressions with optimize; false, but I'm not sure if anyone uses this.