CHSS – CSS-Esque Semantic Code Styling in Real-Time

Hacker News

Share card

CHSS – CSS-Esque Semantic Code Styling in Real-Time

First time showing something off here. So I have always found semantic highlighting very interesting, and besides the kind of highlighting VSCode natively offers, I have always been partial to name based highlighting like Colorcoder or its VSCode counterpart "Color Identifiers", where symbols get assigned different colors based on their names. But I noticed that you could go further than just having the color be based on the hash of the name, I wanted to assign specific colors, have some "super important" class or variable colored in red or maybe every function that starts with the word "get" colored blue, or underlined, or bold etc. And the more I thought about it, I realized I basically just wanted CSS for code highlighting. So I wrote and extension that does just that. It lets you use use .chss files, basically a dialect of SCSS to design a dynamic color scheme for your code, that takes names as well as semantic token information into account and lets you set any style option that VSCode's text decoration class allows. Now I mostly wrote this extension for the fun of implementing weird stuff and I realize that the functionality is maybe a little bit dumb, a little bit counterproductive to productivity itself if you waste time picking out pretty colors for specific variables and so on. But... while styling my way through one on of my bigger coding projects, I started to wonder if defining colors for variables with names matching a specific names and patterns could, when utilized consistently, lead to a better and more consistent habit of selecting names. Instead of having variables with dozens of random different names, even though they are doing the same thing, one would select consistent names to get the right color, coding standard enforced via aesthetics. Anyway, I think it's a neat project and I might look into AST parsing in the future to implement proper relational CSS combinators.