linkedin / css-blocks

High performance, maintainable stylesheets.
http://css-blocks.com/
BSD 2-Clause "Simplified" License
6.34k stars 152 forks source link

Property conflict errors not given for dynamic property #373

Closed chriseppstein closed 4 years ago

chriseppstein commented 4 years ago
{{!-- header.hbs --}}
<header block:scope>
  <div block:class="content" block:width={{this.width}} grid:scope={{eq this.width "fixed"}}>
  </div>
</header>
// grid.block.scss
:scope {
  width: 1128px;
  box-sizing: content-box;
  padding: 0 30px;
  display: block;
  margin: auto;
  position: relative;
}```

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

:scope {
  background: blue;
}

.content {
  display: flex;
  height: 100%;
}

.content[width="fixed"] {
}

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

Because we don't analyze the syntax of the dynamic boolean expression, this should assume that all styles might conflict between grid and .content, .content[width="xxx"] (in this case, display and margin). Instead no conflicts errors are given. Making the grid:scope property static causes the appropriate errors to be given.

I suspect this is because it's using the new scope attribute.