Unnecessary property conflict error(s?).

[chriseppstein]

// grid.block.scss
:scope {
  width: 1128px;
  box-sizing: content-box;
  padding: 0 30px;
  display: block;
  margin: auto;
  position: relative;
}

// header.block.scss
.content {
  display: flex;
  display: resolve("grid"); // Feels like this should be resolved by the cascade when using composes, but acceptable for now.
  height: 100%;
}

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

.content[width="full"] {
  margin: resolve("grid"); // is exclusive with .content[width="fixed"] so there's not a conflict.
  margin: 0 item-spacing(6);
}

[hagmandan]

Another example with box-shadow/elevations in combination with other props:

// elevation-raised.block.scss
:scope {
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
}

and include it elsewhere, with more robustness:

// container.block.scss

@block elevation-raised from "./elevation-raised.block.scss";

// default
:scope {
  box-shadow: none;
  box-shadow: resolve("elevation-raised"); // but we need to add this resolve...
}

// - Flat (default)
:scope[elevation=flat],
:scope[elevation=default] {
  box-shadow: none;
  box-shadow: resolve("elevation-raised"); // but we need to add this resolve...
}

// - Raised (elevation)
:scope[elevation=raised] {
  composes: elevation-raised; // this is the good intended use!
}

// Combine with other props
:scope[elevation=lined][color=dark] {
  box-shadow: 0 0 0 1px #efefef;
  box-shadow: resolve("elevation-raised"); // but we need to add this resolve...
}