Hi everybody, I'm a software engineer for as long as I can remember. When working with web application frameworks, I often get tired when having to scan long JSX, mostly because of long class names. I had an idea of writing a Vite plugin that move the classname attributes into comments above element. For example: Before < h1 class = "rounded-lg bg-blue-500 px-4 py-2 text-white" > Hello Mom </ h1 > Enter fullscreen mode Exit fullscreen mode After { /* @class rounded-lg bg-blue-500 */ } { /* @class px-4 py-2 text-white */ } < h1 > Hello Mom </ h1 >; Enter fullscreen mode Exit fullscreen mode Beside making JSX shorter and easier to scan, this also let you try new attribute values during development while keeping the original JSX unchanged.…