Ruby on Rails asset pipeline appears to be adding styles that don't exist

Question

I'm completely stumped by this. My SCSS file shows this:

.segmented-control {
  li .field_with_errors label {
      border-color: #db5757;
  }
}

But when I load the page and inspect the css, it shows this:

/* line 1382, /general.scss */
.segmented-control li .field_with_errors label,
.form-item-segmented-control li .field_with_errors label {
  border-color: #db5757;
}

The line number, 1382, points exactly to the first code snippet that I showed. Yet in the compiled version it includes an extra selector that includes .form-item-segmented-control .

I do use .form-item-segmented-control in other places in the CSS, but not here. And it is definitely not nested or anything like that.

I'm utterly stumped. Any ideas of what Rails could possibly be doing? Or even ideas of how I could debug further?

Answer 1

Okay, after some more debugging I believe I figured it out. It looks like it was due to an @extend that I had used earlier in the file. I hadn't realized all of the effects of @extend previously.

It looks like if I do something like:

.form-item-segmented-control {
    @extend .segmented-control;
}

ever in the file, it will then add the .form-item-segmented-control selector to all occurrences of .segmented-control . An important nuance to note, though, is that it will NOT do the same for occurrences of .segmented-control in other SCSS partials; the @extend only affects the file it is used in.