--app-grid-expandible-item fails when --app-grid-gutter is 0

[bennypowers]

Description

when --app-grid-gutter is 0, --app-grid-expandible-item applies invalid rules such as:

/* specified mixins */
      :host {
        --app-grid-columns: 6;
        --app-grid-expandible-item-columns: 2;
        --app-grid-item-height: auto;
        --app-grid-gutter: 1px;
      }

/* rendered rule */
    flex-basis: calc((100% - 0.1px) / 6 * 2 - 0) !important;
    max-width: calc((100% - 0.1px) / 6 * 2 - 0) !important;

Expected outcome

app-grid-expandible-item should be applied as normal

Actual outcome

app-grid-expandible-item is not applied, as css rules are invalid

Live Demo

https://jsbin.com/nekewomixa/edit?html,output

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10
  jsbin demo seems to only be working on chrome

[frankiefu]

This is a browser limitation on calc such that you can't mix unit with unitless zero, e.g. calc(100% - 0) is invalid whereas calc(100% - 0px) is fine. So it should work if you do --app-grid-gutter: 0px; instead.