"Invalid resolve" error given erroneously

[chriseppstein]

Error: BlockSyntaxError: There are no conflicting values for display found in any selectors targeting grid.

Given from this code:

// grid.block.scss
:scope {
  width: 1128px;
  box-sizing: content-box;
  padding: 0 30px;
  display: block;
  margin: auto;
  position: relative;
}
@media (max-width: 976px) {
  :scope {
    padding: 0 18px;
  }
}     

// header.block.scss
@block grid from "./grid.block.scss";

:scope {
  background: blue;
}

.content {
  display: flex;
  display: resolve("grid"); // cause of error
  height: 100%;
}

.content[width="fixed"] {
  composes: grid;
}

.content[width="full"] {
  margin: resolve("grid");
  margin: 0 24px;
}

{{!-- header.hbs --}}
<header block:scope>
  <div block:class="content" block:width={{this.width}}>
  </div>
</header>

There is a display property set for grid. If the resolve() is not present, I get an error about an unresolved conflict on display.

If the media query containing :scope isn't present, this error goes away.