False positive alarm on unused class when using scss & parent selector

[chepash]

The ESLint warning is stating that the classes carouselListActive and carouselItemActive are detected as unused in the SubMenuCarousel.module.scss file. But they are not exist.

TSX

import cn from 'classnames';
import { FC } from 'react';
import { NavLink } from 'react-router-dom';
import s from './SubMenuCarousel.module.scss';

export interface ISubMenuCarouselProps {
  className?: string;
}

export const SubMenuCarousel: FC<ISubMenuCarouselProps> = ({ className = '' }) => {
  return (
    <nav className={cn(s.carousel, className)}>
      <ul className={cn(s.carouselList)}>
        <li className={s.carouselItem}>
          <NavLink
            to="/"
            className={({ isActive }) => cn(s.carouselLink, { [s.carouselLinkActive]: isActive })}
          />
        </li>
      </ul>
    </nav>
  );
};

SCSS

.carousel {
  margin: 0;

  &List {
    margin: 0;
  }

  &Item {
    margin: 0;
  }

  &Link {
    margin: 0;

    &Active {
      text-decoration: underline;
    }
  }
}