Support for classes within CSS `:not()` selectors

[thykka]

Say I have a rule that only applies when a specific classname is not present:

.foo {
  /* ... */
  &:not(.active) {
    opacity: 0.5;
  }
}

import classNames from "classnames";
import styles from "./Foo.module.scss";

export const Foo = ({ isActive }: { isActive: boolean }) => {
  return (
    <div
      className={classNames({
        [styles.foo]: true,
        [styles.active]: isActive,
      })}
    >
      foo
    </div>
  );
};

Functionally, this works. We get the expected classname when isActive is true, and the corresponding styles are applied when it's not:

But in VS Code, we get a squiggly warning:

Would be nice if we didn't have to ignore these warnings with comment directives?

[Viijay-Kr]

@thykka Thanks for reporting the issue. You are absolutely right , the support for pseudo class functions should have been there.

I opened a MR to fix this 🤞🏼