Unused SCSS Classes in TSX Highlighter

Highlight unused SCSS classes in your modules with ease. This extension highlights unused CSS classes in your SCSS and TSX files, helping you keep your code clean.

Features

• Automatic Detection: Instantly detect unused CSS classes in your SCSS files based on usage in related TSX components.
• Conditional and Dynamic Classes: Supports various class usage scenarios, including:
  • Simple assignments (e.g., className={styles.button})
  • Conditional expressions (e.g., condition ? styles.button : styles.otherButton)
  • Logical expressions (e.g., condition && styles.button)
  • Template literals (e.g., `${styles.button} ${styles.additionalClass}`)
  • Classes returned dynamically from functions
• Real-Time Updates: The extension automatically refreshes diagnostics when you edit relevant files.

How It Works

1. File Detection: Finds .module.scss files and their corresponding .tsx components within the workspace.
2. AST Parsing: Uses an Abstract Syntax Tree (AST) to analyze both SCSS and TSX files, identifying which classes are used in each component.
3. Diagnostics: Unused classes are highlighted directly in the editor and listed in the Problems tab, making it easy to manage unused styles.

Usage

1. Open your SCSS and TSX files.
2. The extension will automatically highlight any unused classes in your SCSS files based on the usage in your TSX files.
3. Unused classes will also be listed in the Problems tab, allowing you to view and address them easily.

Supported Use Cases

• Basic Class References: Detects standard class assignments.
• Conditional Classes: Identifies classes within conditional expressions.
• Dynamic Function Returns: Catches classes returned from helper functions.
• Template Literals: Supports template literals and embedded conditional expressions.

Requirements

• VS Code version 1.60 or later
• TypeScript and JSX syntax support enabled

TODO

• It should detect class usege if multiple components are contained in one file. Currenly it only works for classes in first component defined.
• This highlights isSelected class as unused when in fact is used

  className={`${styles.categorySliderItem} ${
              isCategorySelected(category)
                ? styles.isSelected + " body-3"
                : "body-2"
            }`}

.isSelected {
  border: solid 2px #7c58a0;
}

• Since we implemented both ways it now hihglighs .activeLink in both files for this case:

<div
    className={`${styles.overlayItem} ${
      isHomepageActive() ? styles.activeLink : ""
    }`}
  >
    <Link href={"/"}>{t("navigation.homepage")}</Link>
</div>

.overlayItem.activeLink {
    color: #250a40;
    font-family: "EuclidCircularA-Semibold";
  }

Release Notes

0.1.0

• Make it work both ways: if class is used in .tsx and not present in .scss mark that reference in .tsx file as unused

0.0.10

• No longer marks classes with pseudo selector as unsused when they are actually used like: .formGroup:first-child

0.0.9

• Now detects as used two classes combined (.overlayItem.activeLink) in template literal with contitional expression:

<div
  className={`${styles.overlayItem} ${
    isHomepageActive() ? styles.activeLink : ""
  }`}
>
  content
</div>

.overlayItem.activeLink {
  color: blue;
}

0.0.8

• Match files not by name convention but by import statement (.scss files still needs to end with ".module.scss")

0.0.1

• Initial release with support for detecting unused SCSS classes in TSX components.
• Added support for conditional and dynamic classes.

License

This extension is licensed under the MIT License.