Implement Class Composition

[amiller-gh]

We require a syntax that enables class composition between blocks, similar to SASS mixins, but without duplicating declarations. For example:

Input:

/* elevation.block.css */
.elevation-2dp {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .55);
}

/* modal.block.css */
@block-reference elevation from "elevation.block.css";
.root {
  apply: "elevation.elevation-2dp";
  position: fixed;
  width: 800px;
  padding: 10px;
}

{{! modal.hbs }}
<div class="modal">

---

Output:

.elevation__elevation-2dp {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .55);
}
.modal {
  position: fixed;
  width: 800px;
  padding: 10px;
}

{{! modal.hbs }}
<div class="modal elevation__elevation-2dp">