I don't get it. You take a solution (pure CSS) that does not require JavaScript to run, so that users that turn off JavaScript for security or other reasons can see the page styled as intended, and you convert it to something that will require JavaScript to be enabled so that it can be displayed properly.

This kind of thing is useful for web applications, specifically single page apps i.e. a situation where the user needs to have javascript to use the product / whatever in question. Easily scoped and programmable css is very useful for self-contained, non-leaky react components.

However, for a web page I agree it would be absurd.

I was looking for something like this. In my case I went with vue to allow pure html/css in the templates vs converting to jdx.

Will look into this on my next project

well done mate, had a ton of spare time lately? :-)