Can't seem to style element based on cursor scope


#1

I want to style the element wxyz in the screenshot:

14 PM

The scope for this element is as follows:

No matter what I try, I can’t get it to work. This is my latest attempt:

.syntax--js,
.syntax--ts {
  .syntax--meta {
    .syntax--interface {
      &.syntax--definition.syntax--property.syntax--ts.syntax--variable.syntax--object.syntax--property {
        background-color: red;
      }
    }
  }
}

and of course there is no red background where I expect.

What am I doing wrong?


#2

The problem is your syntax. Your Less compiles to

.syntax--js .syntax--meta .syntax--interface.syntax--definition.syntax--property.syntax--ts.syntax--variable.syntax--object.syntax--property,
.syntax--ts .syntax--meta .syntax--interface.syntax--definition.syntax--property.syntax--ts.syntax--variable.syntax--object.syntax--property {
  background-color: red;
}

Obviously, the .interface isn’t on the same level as .definition, so you want to move the & up in front of .syntax--interface so that it renders to .syntax--meta.syntax--interface


#3
.syntax--meta {
    &.syntax--interface {
      .syntax--definition.syntax--property.syntax--ts.syntax--variable.syntax--object.syntax--property {
        background-color: red;
      }
    }
  }

Still doesn’t work.


#4

I believe this is an issue with the TypeScript grammar. Scopes shouldn’t have spaces in them.


#5

Yep, you’re correct: https://github.com/atom/language-typescript/issues/16