[gdotdesign]

I think I managed to combine three languages in one with Mint (https://mint-lang.com/):

1. There is HTML (tags) with, but without interpolation {...} you can put string literals, variables and everything that type checks as HTML children.

2. There is CSS but only in style blocks where you can interpolate any expression you need and put in if and case expressions too.

3. There is the normal Mint code you write the logic in (this would be the JavaScript in other languages).

Here is an example which have all three: https://mint-lang.com/examples/7guis/flight-booker

The challenge was to make it seamless enough that so it doesn't look like that we tried to mash languages up, but to make them form a different language that is consistent and simple at the same time.

[promiseofbeans]

Your Mint language looks awesome! You’ve done a great job making it very seamless between the 3 languages. I had a couple thoughts regarding your css/styling though:

1. The one feature I prefer in Marko when compared to Mint is Marko’s nice ID and class syntax, rather than your custom selectors, so you can just use regular CSS (which seems to be advancing faster than the JS & HTML specs combined). You could get the scoping using shadow roots for your components (I’m sure this has flow on consequences, but given you own the language it’s probably better case than many others.)

2. Interpolating values directly in CSS blocks is something that a lot of HTML templating systems sort of give up on (see Astro going out of it’s way to make interpolating variables super verbose [0]), so I’m glad to see you do it. Does the value interpolation compile to CSS variables that are set on the component root (or somewhere else I suppose) as in Astro [0], or is it just simple interpolation? Additionally, I can’t help but notice your hash symbol would conflict with ID selectors, so is CSS nesting available?

Please don’t take this as criticism! I really like what you’ve done here and am very curious.

[0]: https://docs.astro.build/en/guides/styling/#css-variables

[gdotdesign]

1. Inside style blocks it's pretty much regular CSS except for interpolation and if/case expressions, so you can create a style for the root element and then use ids and classes if you desire, but it won't be optimized.

2. CSS definitions without interpolation compile down to static CSS while the ones with interpolation compile down to CSS variables which are set on the element where the style is assigned. This also allows for passig arguments to styles [0].

CSS nesting is supported and the interpolation doesn't conflict with the id selectors because interpolation is not supported in selectors.

[0]: https://mint-lang.com/reference/styling/arguments

[moron4hire]

It's there a way to define routes in a nested, hierarchial fashion, preferably across multiple modules?

For example, with react-router, my root route object array I define by spreading out other route object arrays that I've imported from other modules in my project. And each of those do the same thing, recurring as necessary until I get to the full depth of my route tree.

[gdotdesign]

No it's nor supported currently.