Top level selectors

[rctneil]

Hello,

Really love this library. Used it for the first time today and hit an issue:

I was attempting to do something similar to the thead example that you have in your documentation, but my code was like so:

table {
  table-layout: fixed;
}

tr {
  background-color: red;

  @include in('^thead') {
    background-color: blue;
  }
}

Is there a reason this won;t work when the new item in the selector would end up top level? I fixed it by moving the tr styles into the table selector but just wondered?

Thanks for building this though!

Neil

[ghost]

Hi @rctneil!

The reasoning for not making that work (and treating all modifications outside of current selector as errors in general) was that such cases are better adressed by using the & selector:

tr {
  background-color: red;

  thead & {
    background-color: blue;
  }
}

It's a hard to beat syntax, but if you think inStyle should also be able to do this too (perhaps for consistency reasons), it's not a problem to change.

[rctneil]

I think it would be nice if it did work at the top level but maybe with a note stating that using plain old & could be a better choice.