About

CSS Class Finder searches for the class name where the cursor is currently located in the entire project's .scss files, opens the file that contains the class name, and highlights it. When the command is executed again, the cursor will move successively to the next matched location.

How to Use

• Move the cursor to the class name you want to search for in an html file, njk file, or any other file.
• Right-click and select 'CSS Class Finder,' or press Cmd+Option+F12 or Ctrl+Alt+F12 (assigning to a mouse button is recommended).
• Search for the same class name in the entire project's .scss or .css files, open the file, and highlight it.
• If there are multiple matches, execute the command again to highlight the next matched location.
• You can change search targets and exclusion targets in settings.json. (The default settings are as follows:)

  "css-class-finder": {
    "includePatterns": "**/*{.scss}",
    "excludePatterns": "**/{node_modules}"
  },

If you want to include .css files and exclude wp-content as well:

  "css-class-finder": {
    "includePatterns": "**/*{.scss,.css}",
    "excludePatterns": "**/{node_modules,wp-content}"
  },

If there are a large number of files in the project, it may cause the operation to become slow. In such cases, increasing the number of excluded files may help to improve performance.

Release Notes

2.0.0

I changed it to search throughout the entire project.