False positive with psuedo-element selectors

[Reinachan]

Becasuse of a limitation with CSS nesting, selecting a psuedo-class within a psuedo-element does not work. Basically, this doesn't work

input[type="file"] {
  cursor: pointer;

  &::file-selector-button {
    background-color: grey;

    &:hover {
      background-color: black;
    }
  }
}

However, if we try to do this

input[type="file"] {
  cursor: pointer;

  &::file-selector-button {
    background-color: grey;

  }

  &::file-selector-button:hover {
    background-color: black;
  }
}

Now I'm getting an error because it's requiring me to use nesting. I'd love to do so, but it's not actually possible.

I tried fixing it using something like this in the config

"csstools/use-nesting": ["always", { except: [/::.*/i] }],

However, that doesn't work either. I'm not really sure why, but I can't get the except to work at all. Idk if that's a bug or not, but it's not really relevant to me otherwise, and I think this issue shouldn't require a workaround.

Solution

I have to possible solutions. The first one is ideal imo and the other is fine.

1. use-nesting should detect when you're trying to use a pseudo-class inside a psuedo-element and move force it to not be nested. (this works great for css files, but is not ideal for scss)

e.g. this

input[type="file"] {
  cursor: pointer;

  &::file-selector-button {
    background-color: grey;

    &:hover {
      background-color: black;
    }
  }
}

Should correct to this

input[type="file"] {
  cursor: pointer;

  &::file-selector-button {
    background-color: grey;

  }

  &::file-selector-button:hover {
    background-color: black;
  }
}

2. use-nesting should not complain about psuedo-elements with a psuedo-class not being nested (works with any filetype, but doesn't warn about incorrect behaviour in css files)

e.g. use-nesting should not complain about this

input[type="file"] {
  cursor: pointer;

  &::file-selector-button {
    background-color: grey;

  }

  &::file-selector-button:hover {
    background-color: black;
  }
}