Hyphens and ampersand in selectors

[sandrojohanides]

It’s not really about the hyphens, they could be substituted other characters. But the & after :not() is clearly incorrect. Also don’t know where the purple color comes from. I don’t know what color would I expect tho.

&--test {} // [✗] Purple color
&--#{$test} {} // [✗] White hyphens
.test & {} // [✓] Correct
.test:not() & {} // [✗] White '&' after :not()

[braver]

Interpolation inside selectors needs more work. That last one is interesting though, that shouldn't be such a big problem.

[braver]

The purple color I can't explain.

This one doesn't work yet:

&--#{$test}

[sandrojohanides]

@braver you said you can’t explain the purple color, but is it correct tho? The scope says this: source.scss meta.selector.css entity.other.attribute-name.css. But I guess it has to be, because you have no way of knowing if you’re extending a class name, ID or type selector, all of which have different colors (scopes).

But here I made a test of some BEM-like dynamic selectors with some different results, please feel free to create separate issues if you see a problem with it. Make sure you notice the difference between white and blue-gray color:

.test {
    &--test {}

    &--#{$test} {}

    #{$test}--test {}

    #{$test}--test { // Notice the different color
    }

    .#{$test}--test {}

    #{$test}--#{$test} {}

    .#{$test}--#{$test} {}

    &__test {}

    &__#{$test} {}

    #{$test}__test {}

    .#{$test}__test {}

    #{$test}__#{$test} {}

    .#{$test}__#{$test} {}
}

[braver]

Yeah, the purple is indeed correct, there is no way to know exactly what kind of selector it is / will be after compilation.

#{$test}--test { // Notice the different color
    }

This one isn't good though, it breaks when you have a line break after the {. Damn, I thought I nailed it.

[braver]

A 3.0 beta release is out now, check the readme on how to get the early builds to take advantage of the improvements and help out improving the package before we ship it to the world. A lot has changed here, maybe improving these test cases as well.

[braver]

closed via #96