LearnBoost/stylus — Issue #542: Weird @extend behavior with comments
Author: ianstormtaylor
Created: 2012-01-27 18:20:25+00:00
State: open

Not sure if this is a bug or not, but I'll explain what's happening.

I have this...

```
input
&.valid
&:valid
border-color: light-red
box-shadow: inset 0 1px 4px rgba(gray4, .4), 0 0 3px rgba(light-red, .5)

```

... and input gets extended elsewhere. Works fine, this is generated: (remember its extended elsewhere)

```
input.valid,
textarea.valid,
button.valid,
select.valid,
.button.valid,
input:valid,
textarea:valid,
button:valid,
select:valid,
.button:valid {
border-color: #9fc71a;
box-shadow: inset 0 1px 4px rgba(191,187,178,0.40), 0 0 3px rgba(159,199,26,0.50);
}
```

But then, when I do this:

```
input
&.valid
// &:valid
border-color: light-red
box-shadow: inset 0 1px 4px rgba(gray4, .4), 0 0 3px rgba(light-red, .5)
```

... the generated CSS becomes this:

```
input.valid,
textarea.valid,
button.valid,
select.valid,
.button.valid,
input,
textarea,
button,
select,
.button,
textarea,
button,
select,
.button {
border-color: #9fc71a;
box-shadow: inset 0 1px 4px rgba(191,187,178,0.40), 0 0 3px rgba(159,199,26,0.50);
}
```

Seems like the comment before is doing weird things.

But I'm pretty sure it's ridiculous to have a comment there, although it made sense when writing the code (just comment out the extra selector I didn't want to support).

Just wanted this to be documented in case its a bug. Either way, I'm just going to remove the comment cuz I can live without it.