False positives with >

[bensaufley]

Problem

I've got PostCSS that looks like this with the nesting plugin, making use of the > child combinator:

.foo {
  > button {
    color: green;
  }

  &.warn > button {
    color: red;

    &:hover,
    &:focus {
      color: blue;
    }
  }
}

.bar {
  button {
    color: yellow;
  }

  > button {
    color: blue;
  }
}

I don't see a deeper way to nest these, but this plugin wants me to.

Expected

No violation, no change. Output of CSS when nesting is resolved should look like:

.foo > button {
  color: green;
}

.foo.warn > button {
  color: red
}

.foo.warn > button:hover,
.foo.warn > button:focus {
  color: blue;
}

.bar button {
  color: yellow;
}

.bar > button {
  color: blue;
}

Encountered

As mentioned above, I see a rule violation on &.warn > button and the latter > button. When I use auto-fix, this is what I get:

.foo {
  > button {
    color: green;

    &.warn & {
      color: red;

      &:hover,
      &:focus {
        color: blue;
      }
    }
  }
}

.bar {
  button {
    color: yellow;

    > & {
      color: blue;
    }
  }
}

This is obviously not an equivalent structure. This will boil down to:

.foo > button {
  color: green
}
.foo > button.warn .foo > button {
  color: red
}
.foo > button.warn .foo > button:hover,
.foo > button.warn .foo > button:focus {
  color: blue;
}

.bar button {
  color: yellow
}
> .bar button { /* I don't think this is even valid CSS? */
  color: blue;
}

Proposed solution

I can't say exactly what's going on under the hood here but there seems to be a fundamental misunderstanding of the > combinator. Obviously I would expect this to be a violation and correctly fixed:

.foo { color: green; }
.foo > .bar { color: red; }

/* becomes: */
.foo {
  color: green;

  > .bar {
    color: red;
  }
}

But it seems like something extra is happening and I'm not exactly sure what needs to change there so that correct nesting can still happen while this false positive does not.