CSS Navigation - VSCode Extension
Allows Go to Definition from HTML to CSS, provides Completion and Workspace Symbols for class & id name, and supports Find References from CSS to HTML.
Go to Definition and Peek Definition
In a HTML document, choose
Nesting reference "&" in Scss or Less is automatically combined.
The places you can find definitions:
Allows to search workspace symbols in CSS & Scss & Less files across all activated workspace folders.
Class Name and ID Completion
Provides class name and id completion for your HTML files.
Not that the extension doesn't support remote sources, and doesn't follow the
Find All References and Peek References
Supports looking for CSS selector references in your HTML files.
This functionality should not be very usefull, and it needs to load and parse all the files configured in
Why started this project
Then I found it eats so much CPU & memory. E.g., one of my project has 280 CSS files out of 5500 files, includes 6 MB css codes. On my MacBook Pro, it needs 7s to load (1.3s to search files in folder and 6s to parse), and uses 700 MB memory. Otherwise it keep parsing files every time you input a character, Assume that you can input 10 characters in 1 second, since it's parse speed is about 1 MB/s, so if your document is more than 100 KB, your CPU usage will keep high.
Finally I decided to implement a new css parser, which also supports Scss & Less naturally, as a result I created a new extension. The CSS parser is very simple and not 100% strict, but it's fast and very easy to extand. Now it costs about 0.8s to search files, and 0.5s to parse them. Memory usage in caching parsed results is only about 3x~10x to file size.
Otherwise, all the functionality will be started only when required by default, so CSS files are loaded only when you begin to search definitions or others. You may change this behavior by specify
After files loaded, The extension will track file and directory changes, creations, removals automatically, and reload them if needed.
Further more, I found the extension can support class name and id completion by the same core, so I do it with very few codes.
Finding references uses another core, I implement it because my work have a heavy CSS part, and I love refactoring CSS codes. I believe few people will need it.
Stress Test & Performance
I loaded 100 MB (0.9 M declarations, 2.8 M lines) CSS files for stress test, it took 8s to parse them, and used about 850 MB memory. After 1 minute, the memory usage fell back to 550 MB. Searching definitions across all 0.9 M declarations cost about 50ms, searching workspace symbols cost about 500ms, and searching completions cost about 230ms.
My environment is Win10, MacBook Pro 2014 version (I love MacBook so much, until they removed the function keys😢), with power on.
Plans & More
I just switched from Sublime Text to VSCode, this should be the first time I wrote a vscode extension.
I have plans to make this extension grow, I hope it can serve every frontend developers like me.
Please give me your feedbacks. Thanks.
Can I change definition order to make sass files always before the css files?
No, VSCode always sort the definition results, seems in name order. If you don't like duplicate css definitions, you can remove the
Need to wait when I go to definition for the first time after workspace startup.
Everything work on lazy mode by default, so it will not take up CPU and memory early. Set
Can't get definitions across all workspace folders.
By default, definition searching is limited in the same workspace folder, that means when you choose
If you have more than one folders in your workspace, and you definitely need to find definitions across them, set
Missed some workspace symbols.
Workspace symbols are always come from multiple workspace folders, but for each workspace folder, you need to open one HTML or CSS file to activate it, then it will return results belong to it.
How the extension filter the selectors?
This extension only compare the last part of the selector, the parts are defined by spliting selector by space or several other characters like
So when you are trying to find definitions for
Searching tag definition is a little different, it must be the unique part of the selector, which means
Searching completion works in the same way.
Many duplicate definotions got. Can you limit the results to only in files specified by